▶️ 示範影片： 點擊上方封面圖，在新分頁開啟播放。

語言： English · 简体中文 · 繁體中文 · 日本語

✨ 功能一覽

| 分組 | 可以調什麼 | 說明 | |---|---|---| | 總開關 | 啟用 / 關閉 DIY 主題 | 關閉後撤銷本外掛的全部覆蓋 | | 皮膚中心 | 8 套一鍵預設皮膚 | 選完後仍可繼續微調 | | 配色 | 品牌、強調、成功、警告、錯誤色 | 顏色選擇器 + 十六進位 | | 配色 | 中性色調方向 | 藍灰、冷灰、暖灰、石墨 | | 字型 | 介面字型、程式碼字型 | 預設字型棧 | | 字型 | 整體縮放（80–140%）、字號縮放（80–130%） | 兩個獨立控制 | | 背景 | 圖片 URL（http(s): 或 data:） | 保存在瀏覽器本機 | | 背景 | 面板通透度、毛玻璃強度 | 數值過高會增加 GPU/CPU 負擔 | | 元件 | 陰影層級、圓角 | 調整層次感與圓潤度 | | 我的方案 | 保存並切換整套主題 | 為你的設定命名後隨時取用 |

外掛以可讀性為先：環境表面（主背景、側邊欄）隨你的通透度設定變透明露出背景；覆蓋層（對話方塊、選單、輸入框、提示氣泡）則固定保持約 94% 不透明，保證彈窗內文字始終清晰。

🚀 快速開始

執行 DSH Web profile 需要 Node.js（含 npx）。最簡單的路徑不需要 git 或 pnpm。

方案 A：安裝腳本（只需 Node.js）

1. 從 GitHub 下載本倉庫的 ZIP 並解壓。

2. 在 PowerShell 中進入解壓後的目錄，執行：

   .\install-web.ps1

3. 啟動網頁版：

   npx @deepseek-ai/dsh web

4. 開啟瀏覽器裡的「設定 → DIY 主題」。

腳本會把外掛複製到 ~\.dsh\profiles\web\node_modules\dsh-ui-customizer，並在 cordis.patch.yml 中登記 loader。腳本可重複執行。

提示「無法載入……未進行數位簽章 / 無法執行指令碼」？ 這是 PowerShell 預設執行原則攔截了未簽章腳本。只需放寬目前視窗的原則再跑（只影響目前視窗，關掉即恢復，安全）：

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

或一行直接跑：

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

方案 B：DSH 外掛命令（標準 bundle，推薦）

自 v1.1.0 起此外掛宣告了 dsh.bundle，是標準 bundle 層：dsh plugin add 會自動把它追加進 dsh.profile.bundles 並套用其自帶的 loader 補丁， 無需手動編輯 cordis.patch.yml；更新也用同一條命令。

dsh plugin --profile web add dsh-ui-customizer@latest

如果命令列找不到 dsh：

npx @deepseek-ai/dsh plugin --profile web add dsh-ui-customizer@latest

（發佈到 npm 後直接從 registry 安裝；也可用 git+https://github.com/Final-LX/dsh-ui-customizer 安裝 git 版本。）

然後完全退出並重新啟動 DSH Web（npx @deepseek-ai/dsh web），再重新整理頁面。

以後更新到最新版：

dsh plugin --profile web update dsh-ui-customizer@latest

注意：v1.0.0 及更早是 classic bundle，dsh plugin add 只裝依賴、必須手動在 cordis.patch.yml 登記 loader 行才會生效；v1.1.0 起不再需要。

🤖 讓 AI 幫你安裝（複製貼上）

想讓 AI 代理（如 DeepSeek Harness、Claude、ChatGPT）替你裝好？複製下面任一段提示詞發給你的 AI 即可，兩段都自包含。

中文提示詞：

幫我把 dsh-ui-customizer 主題外掛安裝到 DeepSeek Harness（DSH）Web 裡。
步驟：
1. 確認本機已裝 Node.js（含 npx）。
2. 啟動 DSH Web：npx @deepseek-ai/dsh web（首次執行會初始化 web profile）。
3. 從 npm 安裝外掛（v1.1.0 起是標準 bundle，會自動進 dsh.profile.bundles，無需手動改配置）：
   npx @deepseek-ai/dsh plugin --profile web add dsh-ui-customizer@latest
4. 完全重新啟動 DSH Web（先停掉，再跑 npx @deepseek-ai/dsh web），然後重新整理瀏覽器。
5. 開啟「設定 -> DIY 主題」確認面板出現。
如果失敗，把報錯給我看，並告訴我怎麼修。

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 npm (since v1.1.0 it is a standard bundle: dsh plugin wires it
   into dsh.profile.bundles automatically, no manual config edit needed):
   npx @deepseek-ai/dsh plugin --profile web add dsh-ui-customizer@latest
4. Fully restart DSH Web (stop and run "npx @deepseek-ai/dsh web" again), then refresh the browser.
5. Open Settings -> DIY Theme to confirm the panel appears.
If anything fails, show me the error and tell me how to fix it.

🖼️ 首次使用與面板操作

1. 啟動 DSH，完成內建的模型 / API key 引導。
2. 開啟右上角「設定」→「DIY 主題」。
3. 更動會即時預覽（試穿）。
4. 點「套用」保存，「還原」復原未保存的修改，「重設為預設」恢復原廠值。

🔒 資料、安全與相容性

• 主題設定和方案保存在 localStorage；如有上傳媒體則存於 IndexedDB。此外掛不會把主題設定上傳到 DSH 伺服端。
• 遠端圖片 URL 能否載入，取決於協定、瀏覽器安全策略及伺服器的 CORS / Referrer 回應。
• DSH 迭代很快，官方 token、slot 與頁面結構變化可能影響相容性。若升級 DSH 後某項設定失效，請執行測試並回報給作者（見故障排除）。

❓ 常見問題

為什麼主題在不同瀏覽器之間不同步？ 主題資料屬於瀏覽器（localStorage/IndexedDB）。不同瀏覽器 / profile 各自保存；DSH 伺服端的會話資料由伺服端統一管理，所以可以共享。

改了沒生效？ 需要點「套用」才保存。若點了也沒效果，多半是 DSH 版本與外掛的 token 集發生漂移——更新外掛或回報 token 缺失（見故障排除）。

方案能分享嗎？ 目前方案保存在本機，不支援直接匯出分享；你可以記下顏色與縮放數值手動重建。

🛠️ 故障排除

| 症狀 | 可能原因 / 處理 | |---|---| | 安裝後找不到面板 | DSH 未完全重新啟動。重新啟動 dsh web 後重新整理。（v1.1.0+ 是標準 bundle；面板沒出現代表 bundle 補丁沒套用——檢查 dsh-ui-customizer 是否在 dsh.profile.bundles 中。） | | 主題生效但某些顏色不對 | 官方 token 跨版本變化。npm test（含 tools/test-tokens.cjs）會暴露缺失項，把列出的 token 回報給作者。 | | 毛玻璃 / 大圖感覺卡 | 調低面板通透度 / 毛玻璃強度，或換更小的背景圖。 | | 背景 URL 載入不出 | 檢查協定（僅 http(s)）以及遠端伺服器的 CORS / Referrer 策略。 |

👩‍💻 開發者說明

dsh-ui-customizer/
├── lib/client.js                 # 瀏覽器端外掛（主題邏輯 + 設定 UI）
├── lib/index.js                  # 宿主側入口（本瀏覽器端外掛為 no-op）
├── cordis.patch.yml              # bundle 自帶的 loader 補丁（v1.1.0+，自動掛載）
├── package.json                  # 外掛中繼資料 + dsh.bundle/dsh.client 設定
├── tools/                        # 測試工具
├── install-web.ps1               # 只需 Node.js 的網頁端安裝腳本
└── README.md                     # 本文檔（及各語言版本）

執行測試：

npm test

等同於執行 test-client、test-render、test-idb 和 test-tokens。最後一個需要已安裝 @deepseek-ai/dsh（它把外掛的白名單 token 與官方 dist CSS 對拍）；未安裝時會跳過而非失敗，所以 npm test 在任何環境都能跑。CI 會對 latest 與固定版本都執行它，及早捕捉 token 漂移。

關鍵外掛契約：

• package.json 宣告 dsh.bundle.patch: "./cordis.patch.yml" —— 使外掛成為標準 bundle：dsh plugin add 會把它追加進 dsh.profile.bundles 並自動套用其 loader 補丁（- insert: - id: ui-customizer），因此無需手動編輯 profile 的 cordis.patch.yml，dsh plugin update 也可直接更新。
• package.json 必須匯出 ./package.json，以便 DSH 讀取 dsh.client。
• 用戶端 bundle 以 window.__ModuleLoader__.load({...}) 註冊。
• dsh.client 宣告 platform: "web"、immediately: true 及所需 inject 服務。

📄 授權

MIT —— © 2025 Final-LX。歡迎 Issue、PR 與 Star！