DSH Theme Studio:爲 DeepSeek Harness 切換整套視覺風格

前言

DeepSeek Harness(DSH)的 Web 殼層自帶亮/暗/跟隨系統等內置外觀,但長期使用同一套配色時,側欄、對話區、輸入框與代碼塊會混在一起,缺少可快速試用的主題入口。若你希望在 Harness 裏一次性切換整應用語義色、字體與部分風格特性(例如像素化的直角與掃描線),而不改核心配置,社區插件 wzuu/dsh-theme-studio 提供左側欄入口與主題選擇頁,把 5 套 Studio 風格與 43 個參考主題註冊到 DSH 的 ctx.theme 擴展點。

下面介紹該插件的定位、能力、安裝方式與典型用法。事實以 GitHub 倉庫 README 與 package.json 爲準。

這是什麼

wzuu/dsh-theme-studio 由維護者 wzuu 發佈,在 SkillHub 目錄中歸類爲「趣味換裝」。npm 包名爲 dsh-visual-styles(當前資料中的版本爲 1.1.0),許可證 MIT。

插件在左側欄增加 視覺風格 / Visual styles 入口,打開後可在緊湊卡片中選擇 5 種 Studio 風格,或在參考主題區搜索並選用 43 個亮/暗變體(分屬 28 個主題家族)。選定後立即作用於整個 Harness UI:側欄、對話、輸入區、菜單、對話框、代碼塊與狀態色等。另有 恢復系統外觀 / Restore app appearance 可回到內置亮/暗/系統設置。

核心功能

五種 Studio 風格

風格 明/暗 特點(README 描述)
紙墨 Paper Light 暖色紙感、柔和墨色、硃紅點綴、襯線字體
深海 Abyss Dark 深藍綠表面、明亮青綠點綴
像素 Pixel Dark 硬直角、等寬字體、青檸/品紅、CRT 掃描線
霓虹 Neon Dark 午夜紫、電青與品紅光暈
森野 Grove Light 苔蘚、亞麻、陶土色、穩重對比

Pixel 模式在 html[data-dsh-theme-studio="pixel"] 下注入作用域 CSS:方角、等寬 UI、塊狀層級與輕微掃描線疊加。

43 個參考主題

第二區提供 43 個亮/暗變體,家族包括 Absolutely、Ayu、Catppuccin、Codex、Dracula、Everforest、GitHub、Gruvbox、Linear、Lobster、Material、Matrix、Monokai、Night Owl、Nord、Notion、One、Oscurange、Proof、Raycast、Rose Pine、Sentry、Solarized、Temple、Tokyo Night、Vercel、VS Code Plus、Xcode 等。卡片按家族分組;搜索框可按主題名、家族、變體或明/暗模式過濾。

實現要點(無外鏈資源)

  • 每個主題通過 DSH ctx.theme 註冊大量 --dsw-* 語義 token,殼層各區域跟隨所選主題。
  • 43 個參考主題由種子文件中的背景、前景、強調色、diff 色、語法色、UI/代碼字體、對比度與窗口透明度等生成;缺失語義色由種子推導,必要時將文本對比提升至至少 4.5:1。
  • 啓動器註冊在 sidebar.panellist;選擇頁註冊在根作用域 main 的 theme-studio 鍵位。
  • 不導入 DSH Client 包;React 來自瀏覽器模塊表;圖標爲內聯 SVG。無網絡請求、遠程字體或圖片資源。

開發驗證記載:48 個主題各 253 個 token;主/次/強調按鈕對比在各主題上不低於 4.5:1。

安裝與啓用

官方 README 給出的安裝方式是將該目錄作爲 bundle 裝入當前 DSH 配置(示例爲 desktop profile)。安裝前應自行審閱源碼與 MIT 許可證;插件在當前 DSH 進程權限下運行,與目錄站無官方從屬關係。

git clone https://github.com/wzuu/dsh-theme-studio.git
plugin_manager install_bundle "$(pwd)/dsh-theme-studio"

卸載:

plugin_manager remove_bundle dsh-visual-styles

卸載會釋放全部 48 個主題註冊、注入樣式表、側欄入口、主頁面及文檔上的作用域屬性。

安裝後若側欄入口未立刻出現,刷新頁面一次(macOS 上爲 Cmd+R)。新裝或替換 client bundle 後,運行中的頁面通常也需刷新一次,屬 DSH client 模塊行爲。

典型用法

  1. 在左側欄打開 視覺風格 / Visual styles。
  2. 點選一張 Studio 卡片,或在參考區搜索後點選主題;整應用 UI 立即切換。
  3. 需要回到 Harness 內置外觀時,使用 恢復系統外觀 / Restore app appearance。
  4. 最後一次自定義選擇保存在當前瀏覽器的 localStorage;若在設置裏改回內置亮/暗/系統,會清除該記錄。

本地開發自檢可執行:

npm run check

適用場景與注意

適合希望在 DSH Web UI 中快速試配色與字體、或偏好 Pixel/霓虹等強風格化的開發者。不適合把第三方主題 id 寫進 DSH 內置 ui-theme 設置 schema 的場景:README 說明這類 id 爲進程內擴展,持久化由插件自行使用 localStorage 完成。

字體僅使用本機已安裝字體族;參考主題中命名的 Inter、Satoshi、Geist、JetBrains Mono 等未隨插件打包,若需完全一致排版需自行安裝。參考種子僅爲顏色與排版數據,不含 ChatGPT 相關素材。

結尾

dsh-theme-studio 把 5 套 Studio 風格與 43 個參考主題收斂到左側欄一個入口,通過語義 token 覆蓋整殼層,並支持一鍵恢復系統外觀。目錄頁:SkillHub - wzuu/dsh-theme-studio;源碼與說明:GitHub - wzuu/dsh-theme-studio。

羽毛球分组比赛记分
小程序二维码

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

小夜