dsh-theme-neumorph:爲 DeepSeek Harness 網頁界面換上新擬態皮膚

前言

長期在 DeepSeek Harness(DSH)裏調試智能體時,界面是否順眼往往不影響功能,卻會影響長時間盯屏的疲勞感。不少開發者會直接改瀏覽器樣式,或裝全局主題擴展,但這些做法容易誤傷頁面結構,也難和 Harness 自帶的淺色、深色切換對齊。DSH 生態把能力拆成可插拔的 bundle;在「趣味換裝」類目下,維護者 wcnmamrs 提供了 dsh-theme-neumorph,專門給 Harness 網頁端套一層新擬態(neumorphism / soft UI)視覺:冷灰表面、鋼藍強調、成對的柔和陰影,且停用後可回到原生外觀。

這是什麼

dsh-theme-neumorph 是一個 DSH 主題類插件(npm 包名同倉庫名,當前清單版本 1.0.1,許可證 MIT)。它不改業務邏輯,只覆蓋 Harness 自繪 UI 的顏色 token,並額外注入一層陰影樣式表,使卡片、輸入區、側欄等控件呈現浮雕感。淺色與深色模式共用一套設計邏輯:淺色底以冷灰 #e0e5ec 爲主,深色底切換爲 #262b31,強調色在深色下變爲 #7ea6c9。

社區目錄頁:skillhub.cn/plugins/wcnmamrs/dsh-theme-neumorph。源碼與說明:github.com/wcnmamrs/dsh-theme-neumorph。

核心能力:顏色層與陰影層

README 把實現拆成兩層,彼此獨立,也都可以單獨回退:

層 手段 作用
顏色層 ctx.theme.overrideTokens() 覆蓋 72 個 --dsw-* 顏色與圓角 token(表面、按鈕、代碼面板、浮動層、邊框、文字、品牌色、狀態色、圓角刻度等)
陰影層 注入一張 <style> 新擬態依賴成對軟陰影,token 側只能承載顏色,因此陰影單獨維護

配色基線(資料原文):

  • 表面:冷灰 #e0e5ec 系;強調:鋼藍 #4a6b8a(深色模式爲 #262b31 / #7ea6c9)
  • 高光 rgba(163,177,198,.6) 與暗部 #ffffff 組成雙緣陰影;深色模式改用低透明度白光與深黑

浮雕刻意落在四處:卡片柔和投影、輸入區內凹、輸入區大板與菜單/對話框的雙向浮雕、側欄溝槽。整寬且背景透明的控件(列表行、菜單項、分段控件)不加投影,避免圓角外出現「幻影邊線」。

邊界:只動宿主界面

主題規則按 Harness CSS Module 的整類名錨定(例如 [class$="_card"]),不按裸標籤(span、button)生效。第三方插件常用 dshwv-*、BEM 等命名,不會被命中;卡片內部子節點也不會因子串匹配(如 _cardContent)被誤改。README 明確:主題只動宿主自己畫的界面,不碰第三方插件。

Client 半通過 window.__ModuleLoader__.load({ id, factory }) 註冊,factory 返回 { inject: ['theme'], apply(ctx) }。副作用包在 ctx.effect() 裏並返回清理函數——停用時撤銷 token 覆蓋並移除樣式表。若宿主拒絕含 --dsw-radius-* 的 token 表,會自動退回僅含顏色的 58 項重試。

package.json 中 dsh.client 聲明:platform: "web"、immediately: true,並 inject 依賴 @deepseek-ai/dsh-client-ui-theme;bundle 通過 cordis.patch.yml 寫入 profile 的 Loader 樹。無需額外配置文件字段。

安裝與啓用

已抓取資料中未給出統一的 dsh plugin add … 安裝命令行原文。實際接入應以待裝環境所用的 DSH 插件安裝流程爲準,並以目錄頁與倉庫爲準覈對包名與版本:

安裝前應閱讀 client.js 與 LICENSE,確認接受 MIT 條款及注入行爲。插件隨當前 dsh 進程權限在瀏覽器端執行樣式覆蓋,與裝任意 DSH 插件相同,不應在未審源碼的情況下用於高敏感環境。

典型用法與驗證

啓用後,因 immediately: true,Client 會在 Web 端儘早加載並對當前 Harness 會話生效;切換系統或應用內的深淺色模式時,配色會按 README 描述的基線自動切換。若不再使用,在 DSH 中停用或移除該插件即可,清理函數會恢復原生 token 與 DOM 中的陰影樣式表。

維護者在倉庫內用 Node 自帶測試做不依賴瀏覽器的校驗,可作爲二次評估參考:

npm test                    # 7 項斷言:調色板、樣式表結構、卸載路徑
npm run check               # 語法檢查
node scripts/verify-manifest.mjs   # 清單/打包自檢
npm run verify              # 以上全部

要求 Node >= 20(見 package.json 的 engines)。

適用場景與注意

適合:長期在 Harness Web UI 裏工作、希望界面統一爲新擬態風格、又需要與原生深淺色並存的開發者。不適合:指望改主題就能調整智能體邏輯或第三方插件佈局的場景——本插件明確不覆蓋插件自繪 UI。

SkillHub 等社區目錄與 DeepSeek / 幻方無官方從屬關係,安裝來源請以你信任的目錄條目與 GitHub 提交歷史爲準,勿把第三方頁面等同於官方應用商店。

結尾

dsh-theme-neumorph 把 DSH 網頁端收成冷灰 + 鋼藍的新擬態皮膚,用 token 覆蓋與獨立陰影層解決「顏色能 token 化、陰影不能」的實現分工,並用 CSS Module 整類名錨定降低對生態內其他插件的干擾。需要看圖或細節時,打開倉庫 README 中的截圖與目錄結構說明即可。

  • 目錄頁:https://www.skillhub.cn/plugins/wcnmamrs/dsh-theme-neumorph
  • GitHub:https://github.com/wcnmamrs/dsh-theme-neumorph
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜