Final-LX/dsh-ui-customizer

dsh-ui-customizer — a visual, no-code theme customizer for DeepSeek Harness (DSH) Web. Change colors, fonts, background and component style from the Settings → DIY Theme panel and watch it apply instantly.

▶️ Demo video: click the cover above to open and play it in a new tab.

Languages: English · 简体中文 · 繁體中文 · 日本語

✨ Features

The plugin is readability‑first: environment surfaces (main background, sidebar) become transparent with your translucency setting, while overlays (dialogs, menus, inputs, tooltips) stay ~94% opaque so text inside pop‑ups always remains readable.

🚀 Quick Start

You need Node.js (with npx) to run a DSH Web profile. No git or pnpm is required for the simplest path.

Option A — install script (only Node.js needed)

1. Download this repo as a ZIP and extract it.

2. In PowerShell, cd into the extracted folder and run:

   .\install-web.ps1
   

3. Start DSH Web:

   npx @deepseek-ai/dsh web
   

4. Open Settings → DIY Theme in the browser.

The script copies the plugin into ~\.dsh\profiles\web\node_modules\dsh-ui-customizer and registers it in cordis.patch.yml. It is safe to re‑run.

Execution policy error? If PowerShell says the script "cannot be loaded / is not digitally signed", that is the default execution policy blocking an unsigned script. Bypass it for just this window (safe, resets when the window closes):

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
.\install-web.ps1

or run it in one line:

powershell -ExecutionPolicy Bypass -File .\install-web.ps1

Option B — DSH plugin command (git + pnpm available)

dsh plugin --profile web add "git+https://github.com/Final-LX/dsh-ui-customizer"

If dsh is not on your PATH:

npx @deepseek-ai/dsh plugin --profile web add "git+https://github.com/Final-LX/dsh-ui-customizer"

dsh plugin add only installs the dependency — this plugin is a classic bundle (activated via a loader row, not dsh.bundle), so you must register the loader manually for it to appear. Edit:

%USERPROFILE%\.dsh\profiles\web\cordis.patch.yml

Make sure it contains:

- insert:
    - id: ui-customizer
      name: dsh-ui-customizer

Then fully restart DSH Web (npx @deepseek-ai/dsh web) and refresh the page. If you only run dsh plugin add without the loader row, the panel will not show up.

🤖 Install via AI (copy & paste)

Prefer to let an AI agent (e.g. DeepSeek Harness, Claude, ChatGPT) set it up for you? Copy one of the prompts below and paste it to your AI. Both are self-contained.

English prompt:

Help me install the dsh-ui-customizer theme plugin into my DeepSeek Harness (DSH) Web.
Steps:
1. Make sure I have Node.js (with npx).
2. Start DSH Web with: npx @deepseek-ai/dsh web  (this initializes the "web" profile on first run).
3. Install the plugin from git:  npx @deepseek-ai/dsh plugin --profile web add "git+https://github.com/Final-LX/dsh-ui-customizer"
4. This plugin is a classic bundle (no dsh.bundle), so dsh plugin add will NOT activate it on its own.
   Open %USERPROFILE%\.dsh\profiles\web\cordis.patch.yml and make sure it contains:
     - insert:
         - id: ui-customizer
           name: dsh-ui-customizer
5. Fully restart DSH Web (stop and run "npx @deepseek-ai/dsh web" again), then refresh the browser.
6. Open Settings -> DIY Theme to confirm the panel appears.
If anything fails, show me the error and the contents of cordis.patch.yml, and tell me how to fix it.

中文提示词：

帮我把 dsh-ui-customizer 主题插件安装到 DeepSeek Harness（DSH）Web 里。
步骤：
1. 确认本机已装 Node.js（含 npx）。
2. 启动 DSH Web：npx @deepseek-ai/dsh web（首次运行会初始化 web profile）。
3. 从 git 安装插件：npx @deepseek-ai/dsh plugin --profile web add "git+https://github.com/Final-LX/dsh-ui-customizer"
4. 本插件是 classic bundle（没有 dsh.bundle），dsh plugin add 不会自动激活它。
   打开 %USERPROFILE%\.dsh\profiles\web\cordis.patch.yml，确认包含：
     - insert:
         - id: ui-customizer
           name: dsh-ui-customizer
5. 完全重启 DSH Web（先停掉，再跑 npx @deepseek-ai/dsh web），然后刷新浏览器。
6. 打开「设置 -> DIY 主题」确认面板出现。
如果失败，把报错和 cordis.patch.yml 的内容给我看，并告诉我怎么修。

🖼️ First run & how the panel works

1. Start DSH and finish the built‑in model / API‑key onboarding.
2. Open Settings (top‑right) → DIY Theme.
3. Everything you change is previewed live (“try on”).
4. Click Apply to save, Revert to undo unsaved changes, Reset to default to restore factory values.

🔒 Data, security & compatibility

• Your theme config and schemes are stored in localStorage; uploaded media (if any) live in IndexedDB. Nothing is uploaded to the DSH server.
• Remote image URLs load subject to the scheme, browser security policy, and the server's CORS / Referrer response.
• DSH is evolving quickly — official tokens, slots and page structure may change and affect compatibility. If a setting stops working after a DSH upgrade, re‑run the tests and report the mismatch.

❓ FAQ

Why isn't my theme synced between browsers? Theme data belongs to the browser (localStorage/IndexedDB). Different browsers/profiles keep their own copy; DSH server session data is shared because it lives on the server.

I changed something but nothing happened. Changes are applied on Apply. If even Apply has no effect, your DSH version may have drifted from the plugin's token set — update the plugin or report the token mismatch (see Troubleshooting).

Can I share a scheme? Not directly — schemes are stored locally. You can Export… (via your browser's storage tools) or just note the color/scale values and recreate them.

🛠️ Troubleshooting

👩‍💻 For developers

dsh-ui-customizer/
├── lib/client.js                 # browser-side classic bundle (theme logic + settings UI)
├── lib/index.js                  # host-side entry (no-op for this browser-only plugin)
├── package.json                  # plugin metadata + dsh.client config
├── tools/                        # tests
├── docs/                         # screenshots & introduction
├── install-web.ps1               # Node.js-only web install script
└── README.md                     # this file (+ other languages)

Run the tests:

npm test

which runs test-client, test-render, test-idb, and test-tokens. The last one requires an installed @deepseek-ai/dsh (it compares the plugin's whitelisted tokens against the official dist CSS); with no DSH installed it is skipped rather than failing, so npm test always works. CI runs it against latest and a pinned version to catch token drift early.

Key plugin contracts:

• package.json must export ./package.json so DSH can read dsh.client.
• The client bundle registers via window.__ModuleLoader__.load({...}).
• dsh.client declares platform: "web", immediately: true and the inject services.

📄 License

MIT — © 2025 Final-LX. Contributions (issues, PRs, stars) are welcome!