前言¶
DeepSeek Harness（DSH）的 Web 界面默認主題相對固定。若你長時間在 Harness 裏調試智能體、查看對話軌跡，純色背景與統一控件樣式容易顯得單調，也不利於區分側邊欄、對話卡片與輸入區等不同區域。
社區裏已有不少「換膚」類做法，但多數只能改單一背景圖或全局色調，很難精細控制各 UI 部位的透明度與模糊。下面介紹的 dsh-any-background 是 maintainer Tkingxiao 維護的 DSH 外觀插件（SkillHub 分類：趣味換裝；GitHub 約 16 stars），面向 Web 端，把主題色、壁紙與分部位透明度/模糊度放在同一套設置面板裏統一管理。
這是什麼¶
dsh-any-background 是一個 DeepSeek Harness 外觀插件，當前版本 0.2.1，MIT 許可。它解決的核心問題是：在不改 Harness 源碼的前提下，自定義 Web UI 的主題色、背景壁紙（圖片或視頻），並對主背景、側邊欄、卡片面板、輸入框與控件、設置面板等部位分別調節透明度與毛玻璃模糊。
配置寫入文件系統 ~/.dsh/.dsh-any-background-data/，不依賴 localStorage；界面支持中英文自動切換。插件還帶有主題守護機制，宿主重置主題後會重新激活自定義樣式。
核心功能¶
主題色¶
- PS 風格色輪：在色相環上選色，在內嵌方形調節飽和度與明度，即時生成 30+ 個 CSS 設計令牌。
- 精確 HSL / RGB 輸入：數值與色輪雙向同步。
- 智能取色：一鍵從壁紙可見區域採樣並量化像素，剔除灰色/近黑/近白，選出鮮亮色作爲主題色；視頻壁紙會自動截幀參與。純客戶端完成。
- 吸管取色：在壁紙上懸停預覽，點擊即可設爲主題色。
背景壁紙¶
- 圖片壁紙：上傳任意圖片，在視口比例的編輯器中拖動平移、滾輪縮放。
- 視頻壁紙：靜音循環播放，刷新不丟失（落盤持久化 + HTTP 流式播放，支持 Range seek）；自動截幀用於預覽、取色與位置編輯。
- 位置編輯器：圖片與視頻共用拖動/縮放/重置操作，但位置狀態各自獨立保存。
- 佈局模式：適應 / 填充 / 拉伸 / 平鋪 / 居中五種，圖片與視頻通用。
- 動態生成背景：網格漸變、Shader、幾何圖案，可調節擴散範圍、色彩強度並鎖定種子。
界面透明度與模糊¶
- 分部位透明度：主背景、側邊欄、卡片面板（含對話框周圍的下拉菜單與彈層）、輸入框與控件（發送框、Cordis 插件面板）、設置面板與壁紙，各自獨立滑塊。
- 分部位模糊度：每個部位可設 0–60 px 的
backdrop-filter毛玻璃效果；發送框與 Cordis 面板通過宿主穩定選擇器（如[data-composer-card]、[data-cordis-panel]）獲得真實背景模糊。 - 對話視圖卡片：消息列表自動包裹爲半透明卡片；軌跡頁可整頁調節透明度與模糊，讓壁紙從內容後方透出。
配置分享與持久化¶
- 導出 / 導入：一鍵導出爲自包含的
dsh-any-theme.json（配置 + 壁紙，視頻以 data URL 內嵌），可在其他環境導入還原。 - 大視頻上傳：走 HTTP 二進制 POST 流式落盤，不經過 base64 繞行 RPC，避免通道 body 上限。
安裝與啓用¶
推薦通過 DSH 插件命令安裝（來源：GitHub README 與 SkillHub 目錄頁）：
dsh plugin --profile web add github:Tkingxiao/dsh-any-background
若插件已發佈到 npm registry，也可使用：
dsh plugin --profile web add dsh-any-background
安裝完成後啓動 Web 端：
dsh web
插件會出現在設置面板的 「主題」 分類中。
未全局安裝 DSH 時，可用 npx：
npx @deepseek-ai/dsh plugin --profile web add github:Tkingxiao/dsh-any-background
npx @deepseek-ai/dsh web
本地開發構建（lib/ 已提交，一般無需構建；修改 src/ 後需重新 bundle）：
git clone https://github.com/Tkingxiao/dsh-any-background.git
cd dsh-any-background
pnpm install
pnpm run bundle
pnpm dsh plugin --profile web add "dsh-any-background"
pnpm dsh web
典型用法¶
經過上面的安裝步驟，打開 dsh web 後進入設置面板 「主題」 即可操作。常見流程如下：
- 設壁紙：上傳圖片或視頻，或在「動態生成背景」裏選網格漸變 / Shader / 幾何圖案；用位置編輯器拖動平移、滾輪縮放，選適應/填充/拉伸/平鋪/居中之一。
- 定主題色：用色輪或 HSL/RGB 輸入精確設色；也可點「智能取色」從壁紙提取，或用吸管在壁紙上點選。
- 調界面層次：分別拖動主背景、側邊欄、卡片面板、輸入框與控件、設置面板等透明度滑塊；按需爲各部位加 0–60 px 模糊，形成毛玻璃效果。
- 備份與遷移：滿意後導出
dsh-any-theme.json；在新環境通過導入還原整套配置（含壁紙與內嵌視頻）。
導出文件爲自包含 JSON，適合在多臺機器或團隊成員之間分享同一套視覺方案。
適用場景與注意¶
適合誰
- 長期在 DSH Web 端開發、調試智能體的開發者，希望界面更易區分區域、減少視覺疲勞。
- 需要統一團隊 Harness 界面風格、並通過 JSON 導出/導入分享配置的場景。
- 想用視頻或動態生成背景，又不想手動改 CSS 的用戶。
兼容性
dsh web：完全支持（見 README「兼容性」一節）。- deepseek-harness-desktop：README 註明支持，但 Electron 打包問題可能導致左側邊欄與中心區域透明度顯示相反，需等待桌面端更新修復。
安全與權限
DSH 插件以當前 dsh 進程權限運行，可讀寫本地文件（本插件將數據存於 ~/.dsh/.dsh-any-background-data/）。安裝前建議查看 GitHub 源碼 與 MIT 許可證，確認符合你的安全策略。
SkillHub（目錄頁）是社區插件目錄，與 DeepSeek / 幻方無官方從屬關係；DSH 生態理念是「一切皆插件」，本插件即其中一例。
結尾¶
dsh-any-background 把主題色色輪、圖片/視頻壁紙、分部位透明度與模糊、配置導出導入收進 Harness Web 設置面板，適合需要精細控制 Web 端外觀的 DSH 用戶。
