dsh-theme-atlas:六套材質皮膚,一套 token 引擎

前言

DeepSeek Harness(DSH)的 Web 界面有一套 --dsw-* 設計 token,淺色與深色由殼層自身的 Appearance 控制。若只想換一套配色或背景氣質,而不改佈局、不掛圖片、也不依賴 host 上的 webServer,常見做法是手寫 CSS 或零散覆蓋變量,維護成本高,且很難保證明暗兩種模式下語義一致。

下面介紹社區插件 dsh-theme-atlas(維護者 John-20260101,分類:趣味換裝)。它是一個主題包而非單色換膚:六套「材質」皮膚共用同一套推導規則,在應用內切換,運行時純 CSS,不加載位圖、不註冊插件自有路由。

這是什麼

Atlas 面向 DSH Web GUI,提供六套材質向皮膚(墨玉 Ink Jade、赤陶 Terracotta、極光 Aurora、深海 Abyss、櫻霧 Sakura Mist、素箋 Paper)。每套皮膚爲每種外觀聲明六個輸入色;引擎據此推導 Web shell 使用的 119 個 --dsw-* 別名 token,並做對比度測量。六皮膚 × 明暗兩種外觀共十二套調色板,語義規則一致,便於在淺色與深色下保持可讀性。

倉庫以 MIT 許可證發佈,當前 package 版本爲 0.3.0。原先倉庫內的三套樂山攝影皮膚已拆到獨立插件 dsh-theme-leshan,本包不再包含。

核心功能

六套材質皮膚

皮膚 材質意象 強調色(淺 / 深) 正文對比度(淺 / 深)
墨玉 Ink Jade 和田青玉 · 宣紙 #2E6B57 / #74C3A2 15.6:1 / 16.0:1
赤陶 Terracotta 未上釉陶土 · 砂 #AE5229 / #E08C5F 14.9:1 / 15.0:1
極光 Aurora 極地冰晶 · 夜光 #16758F / #55D6D2 15.5:1 / 16.3:1
深海 Abyss 深海藍 · 微光 #1B58B4 / #5B8DEF 15.9:1 / 16.1:1
櫻霧 Sakura Mist 薄櫻 · 霧面 #B1436B / #E78BA8 15.1:1 / 15.8:1
素箋 Paper 無塗布紙 · 墨 #1F1F1F / #E8E8E8 17.9:1 / 16.9:1

完整 token 表與測量細節見倉庫 docs/palettes.md。

運行時行爲(三層)

加載後插件主要做三件事,卸載時會移除屬性、自定義屬性、樣式、切換條與 token 層,頁面回到殼層默認繪製;不寫 host 配置、不落盤、不髮網絡請求。

  1. Token 層:調用 ctx.theme.overrideTokens('dsh-theme-atlas', layer),將每個 --dsw-* 映射爲 { light, dark } 對;換皮膚即替換該層。若 shell 無 theme 服務,則回退到帶相同取值的 scoped 樣式表。
  2. 簽名 wash:插件自有樣式表在 html[data-dsh-atlas] 下添加頁面漸變、選區色與 focus ring,不改佈局、不加載圖片。
  3. Skin rail:右下角 shadow DOM 面板,用於切換皮膚,鍵盤可達;隨插件卸載移除。

兼容與環境

  • DSH Web 0.2.0-rc.1 … 0.2.x(package.json 中 dsh.engines 爲 >=0.2.0-rc.1 <0.3.0-0)。
  • 官方 Desktop 與 dsh web 均可;瀏覽器需支持 color-mix()(Chromium 111+、Safari 16.2+)。
  • 不需要 host 服務:有無 webServer / theme 服務均可應用主題(無 theme 服務時仍走 fallback 層)。

安裝與啓用

Web profile 下任選其一(命令來自倉庫 README):

# 直接從 GitHub 安裝
dsh plugin --profile web add github:John-20260101/dsh-theme-atlas

# 或使用預構建 tarball(無需 build)
dsh plugin --profile web add https://github.com/John-20260101/dsh-theme-atlas/releases/latest/download/dsh-theme-atlas.tgz

Desktop 端:插件 → 添加插件,粘貼 github:John-20260101/dsh-theme-atlas,啓用後若 shell 提示則重載窗口。插件爲常規 bundle(package.json 聲明 dsh.bundle 與 cordis.patch.yml),client.js 已預構建,安裝側無需執行 build。

典型用法

切換皮膚

  1. 點擊窗口右下角的 Atlas 藥丸按鈕,或按 Alt+K 循環切換。
  2. 當前選擇保存在瀏覽器本地:localStorage 鍵 dsh.theme-atlas.skin;不同瀏覽器可各自使用不同皮膚。
  3. 界面上的「隱藏此鈕」會隱藏藥丸(localStorage 鍵 dsh.theme-atlas.rail);Alt+K 仍可用,清除該鍵可恢復按鈕。
  4. 淺色 / 深色仍由殼層 Appearance 決定;Atlas 同時提供兩套調色板,不會覆蓋你的明暗偏好。

適用場景與注意

適合:長期在 DSH Web / Desktop 裏工作、希望多套統一推導的材質主題、且不想爲換膚部署圖片或 host 路由的開發者。

注意:

  • 插件在 當前 DSH 進程的權限 下運行;安裝前建議瀏覽 GitHub 源碼 與 MIT 許可證,確認符合你的環境策略。
  • 倉庫 assets/ 下的截圖與 key art 僅用於文檔與目錄展示,運行時皮膚不讀取這些位圖。
  • DSH 社區插件目錄爲獨立站點 skillhub.cn,與 DeepSeek / 幻方無官方從屬關係;生態上 DSH 強調「一切皆插件」,本包是其中的 Web 端趣味換裝類擴展。

若需自行改皮膚或貢獻,可在克隆後於倉庫根目錄執行 npm install 與 npm run verify(含 token 完整性與 WCAG 門禁);新增皮膚只需在 src/skins.mjs 增加一行並跑 verify。

結尾

dsh-theme-atlas 用一套 token 引擎把六組輸入色擴展爲 119 個 --dsw-* 別名,配合純 CSS 漸變與 focus/選區樣式,在應用內切換十二套調色板,且不依賴 host 路由與運行時圖片。查閱說明與安裝:

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

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

小夜