前言¶
DeepSeek Harness（DSH）的 Web 界面有一套內置設計系統：界面顏色、側欄、對話區、代碼塊等，最終都落在 CSS 自定義屬性（設計令牌）上。若只想換一套淺色/深色觀感、微調強調色或正文字體，直接改前端源碼或手寫全局 CSS 成本高，且容易在主題切換時不同步。
下面介紹社區插件 dsh-theme-studio（維護者 marselarts）。它不另建一套樣式體系，而是通過 Harness 公開的 ctx.theme.overrideTokens 擴展點，按 light / dark 分別編輯客戶端已在用的令牌，並支持預設、實時預覽與自定義 CSS。插件在 SkillHub 目錄中歸類爲「趣味換裝」。
這是什麼¶
Theme Studio for the DeepSeek Harness Web UI：在 Settings 裏打開主題工作室，或在應用上方以可移動面板編輯同一套編輯器；改的是設計系統已有的語義色、組件填充色、靜態色階與字體變量，變更會寫入宿主存儲並在界面上即時生效。
插件包名 dsh-theme-studio，當前資料中的版本爲 0.1.0，許可證 MIT。運行環境要求 Node.js ≥ 20、DSH ≥ 0.2.0-rc.1（見 package.json）。
核心功能¶
插件編輯的對象與 Harness Web 客戶端繪製界面時使用的變量一致，主要包括：
- 語義令牌（Semantic tokens） — 共 107 個
--dsw-alias-*變量（表面、文字、邊框、強調色、狀態、按鈕、代碼、diff、菜單、工具提示、滾動條等），與設計系統令牌表一致。 - 組件填充（Component fills） — 11 個
--dsw-specific-*表面（側欄列及其行、消息氣泡、輸入區、菜單材質、選擇器等）。 - 靜態色板（Static palette） — 77 個
--dsw-static-*色階，別名可解析到這些步進值，便於從某一檔（例如--dsw-static-deepseek-500）整體換 tint。 - 排版 —
--dsw-font-family（界面）、--ds-font-family-code（代碼與 diff）、--dsw-font-family-brand（品牌字標），以及通過theme.setFontSize()寫入的對話正文字號。 - 自定義 CSS — 插件自有樣式表，用於令牌覆蓋不到的部分。
編輯器按標籤頁組織（資料中的說明）：
| 標籤 | 作用 |
|---|---|
| Colors Simple | 按區塊（文字、應用背景、對話、側欄、面板、菜單、強調色、狀態、代碼與 diff、控件等）只改該區塊相關顏色；左側列表顯示每區已改顏色數量 |
| Colors | 完整網格：可搜索、分組，light/dark 各一控件，色塊與自由輸入（var(...)、color-mix(...)、transparent 等），單令牌重置、「僅已改」篩選 |
| Fonts | 三個 font-family 槽位、本機字體探測（未安裝會標註）、對話字號與 live 樣例 |
| Presets | 五套起點（Warm paper、Nord、Solarized、Rosé Pine、High contrast），JSON 導出/導入，全部重置 |
| Advanced | 自由樣式表，帶一鍵片段（界面縮放、標題色、圓角、不透明菜單、暖色閱讀面等） |
覆蓋層經 theme.overrideTokens 合併進當前主題快照並寫到 body，淺色/深色切換、首屏繪製與卸載仍由 Harness 負責。
在界面旁編輯：Settings 對話框會蓋住主界面，不便對照對話區看效果。工具欄中的 Open beside the interface 會關閉對話框，在同一套 store 下以可拖拽面板浮在應用一角；位置、摺疊與是否打開保存在瀏覽器 localStorage，與 Settings 頁數據一致。
安裝與啓用¶
包聲明瞭 dsh.bundle.patch 與 dsh.client，官方安裝器會掛載並加入 profile 的 bundle 棧。資料中的安裝方式爲本地目錄 link（非 git clone 說明中的遠程 URL 安裝需自行查閱 README 後續段落）：
dsh plugin --profile desktop add <absolute path to this directory>
這會記錄 link: 依賴，profile 指向該目錄而非複製；修改 src/ 後執行 npm run build 即可更新插件。卸載：
dsh plugin --profile desktop remove dsh-theme-studio
安裝後 重新加載 Web GUI。入口在 Settings → Theme Studio。不卸載僅禁用時，可在 profile 的 cordis.patch.yml 中覆蓋：
- id: theme-studio
disabled: true
典型用法¶
- 安裝並 reload Web GUI，打開 Settings → Theme Studio（或從編輯器工具欄打開浮動面板）。
- 在 Presets 選一套起點，或在 Colors Simple 按區塊微調，再到 Colors 精調單個令牌。
- 在 Fonts 選擇界面/代碼/品牌字體；本機未安裝的族名會被標記，選中有名無字的情況界面可能無可見變化。
- 需要超出令牌範圍的效果時，在 Advanced 編輯自定義 CSS 或使用片段。
- 滿意後配置持久化在宿主側；客戶端也會鏡像到
localStorage以加快首屏，最終以宿主文件爲準。
配置主文件路徑（資料原文）：
<DSH_HOME>/dsh-theme-studio/theme.json
其中包含總開關、override 映射與 custom CSS；宿主通過 POST /api/dsh-theme-studio 寫入，並對字段做校驗（令牌名須爲自定義屬性、值長度上限等）。
開發者若改插件源碼：
npm run build # 重新生成 lib/client.js
npm run check # 構建校驗 + 離線激活/渲染/路由檢查
渲染相關檢查需要本地安裝 React 18.3.1（見 README 中的 .devdeps 說明）；未安裝時 npm run check 會跳過渲染斷言並報告 skip。
適用場景與注意¶
適合：長期在 desktop profile 使用 Harness Web UI、希望按 light/dark 系統化換膚或/fonts 微調、又不想 fork 前端的用戶；也適合想理解 DSH 設計令牌分層（alias / specific / static）的開發者。
注意：
- 插件在 當前 DSH 進程權限 下運行，安裝前應閱讀 GitHub 倉庫 源碼與 MIT 許可證，自行評估信任邊界。
- 安裝命令以 README 爲準；資料給出的是 本地絕對路徑 的
dsh plugin --profile desktop add，不要憑插件名臆造github:owner/repo一類命令。 - 部分組件在變量前寫死了字體棧（例如 ui-conversation 中
Inter, var(--dsw-font-family)），本機有 Inter 時可能仍優先 Inter。 - SkillHub 目錄（插件頁）是社區生態索引，與 DeepSeek / 幻方無官方從屬關係；星標等元數據以目錄頁爲準（資料中 GitHub 星標爲 0）。
結尾¶
dsh-theme-studio 把 Harness Web UI 已有的設計令牌和主題擴展點做成可編輯、可預設、可浮窗對照的 Theme Studio，適合在不動前端倉庫的前提下做 light/dark 配色與字體實驗。進一步瞭解與 issue 見 GitHub：marselarts/dsh-theme-studio，目錄條目見 SkillHub 插件頁。
