前言¶

在 DSH（DeepSeek Harness）裏跑 Web 端會話時，界面外觀由宿主內置的淺色、深色與跟隨系統偏好驅動。若你只是想換一套更可預期的設計規範配色與圓角、陰影、動效節奏，又不想 fork 一整套主題或和佈局類插件搶樣式優先級，單獨做一個「疊在現有主題之上的 token 層」會更穩妥。下面介紹社區插件 dsh-web-m3e（維護者 androidly，GitHub 星標 0），它把 Google Material 3 Expressive（M3E）的配色與幾何令牌接到 DeepSeekRuntime Web UI 上，分類落在社區目錄的「趣味換裝」。

這是什麼¶

dsh-web-m3e 是面向 DeepSeekRuntime Web UI 的瀏覽器端 bundle 插件（當前文檔版本 1.5.1，MIT 許可）。它不註冊全新主題名，而是通過 theme.overrideTokens() 在當前主題之上疊一層設計令牌與補充樣式表，因此宿主自帶的「淺色 / 深色 / 跟隨系統」仍可獨立工作；關掉配色開關或卸載 bundle 後，圖層與樣式表會一併撤除，外觀回到原生。

宿主半邊 index.js 爲空實現，主要邏輯在 client.js，經 package.json 的 dsh.client 聲明注入 @deepseek-ai/dsh-client-ui-theme，並在設置頁 settings.general.item 槽註冊一行入口。

核心能力¶

設計令牌層¶

client.js 中的 ROLES、ALIASES、DESIGN 負責三部分映射：

1. 55 個 Material 3 顏色角色（如 --dsw-m3e-primary、--dsw-m3e-surface-container，淺/深各一套）。
2. 將宿主調色板 114 個 --dsw-alias-* 別名指向上述角色，含文檔預覽、代碼 diff、空狀態插畫等邊角場景，合計 197 個 token。
3. 覆蓋宿主已用的幾何與動效原語：--dsw-radius-*（4/8/12/16/28）、--dsw-elevation-*（對應 md.sys.elevation 的 level 1/3/5）、--ds-ease-in-out 與 --ds-transition-duration*（100/200/300ms）、焦點環寬度 2px 調整爲 3px 等。

配色數值來自 @material/material-color-utilities@0.4.0（默認種子 #6750a4，SchemeTonalSpot），形狀與動效對齊 @material/web 的 md.sys 規範；倉庫提供 .check/contrast.mjs 做 WCAG AA 配對檢查。插件不改字體與佈局，避免聊天區行距被 typescale 重排拖垮。

樣式表層（token 無法表達的部分）¶

在 token 之外，樣式表還處理了例如：

• corner-shape: squircle（依賴 Chromium 139+，舊內核回退普通圓角）。
• 輸入區按 M3 filled text field：tonal 容器、聚焦抬升；發送按鈕改爲 M3 填充按鈕並修正深色下前景色可讀性。
• 按壓反饋：spring 縮放與 M3 state layer；觸摸端 safe-area、pointer: coarse 下輸入字號與圖標命中區等。
• 浮層菜單：不透明 tonal 容器、去掉 40px 背景模糊、level 2 陰影、44px（觸摸 48px）行高等，與宿主 Menu 的自定義屬性協作，不復制 DOM。
• 對話框入場：通過 MutationObserver 在首幀前寫入 --m3e-origin-x/-y，從點擊位置做 scale(0.84)→1 展開；退場因宿主 React 卸載方式不做 CSS 過渡；prefers-reduced-motion 下整體關閉動效。

設置入口¶

路徑：設置 → 通用 → 外觀（插件在「語言」與宿主「外觀」之間插入一行，order: 9，標題「Material 3 主題」）。

• 明暗：三個方塊調用 theme.setTheme()，寫入宿主偏好，刷新後保持。
• Material 3 配色：開關控制本插件 token 與樣式表；狀態保存在 localStorage 的 dsh-web-m3e.enabled。

若只想改明暗、不動 M3 圖層，仍可使用宿主原有「設置 → 通用 → 外觀」。

安裝與啓用¶

插件在 dsh 會話裏通過 plugin_manager 安裝，命令須與倉庫 README 一致：

本地 bundle：

# 在 dsh 會話裏
plugin_manager action=install_bundle target=/絕對路徑/dsh-web-m3e

從 GitHub 安裝（發佈後）：

plugin_manager action=install_bundle target=github:androidly/dsh-web-m3e

也可把 bundle 寫進 profile 的 bundles 列表。標準結構爲 package.json → dsh.bundle.patch → cordis.patch.yml → insert: web-m3e，瀏覽器端由 exports["./client"] 與 dsh.client 發現。

安裝後打開 Web UI，進入設置 → 通用，找到「Material 3 主題」，打開「Material 3 配色」即可看到疊層效果；明暗可與開關分開調節。

典型用法與關閉層次¶

經過上面的步驟啓用後，日常只需在設置裏切換明暗或 M3 配色開關。若要定製品牌色，不要手改 ROLES 中單色；應按 README 用 @material/material-color-utilities 換種子重新生成整表，再寫回 client.js 的 ROLES（ALIASES 中的 var(--dsw-m3e-*) 會自動跟隨）。同一 seed 可換 SchemeExpressive 或 SchemeFruitSalad 等方案變體。

關閉分爲三檔，按需要選擇：

1. 關掉「Material 3 配色」：僅停疊層，插件仍裝載，狀態會記住。
2. 插件管理裏禁用「Material 3 主題」：整包停用，設置行消失。
3. 從 profile 移除 dsh-web-m3e：徹底卸載；disposer 掛在插件 fiber 上，禁用後立即恢復原生配色。

適用場景與注意¶

適合希望在 DSH Web 會話裏統一 M3/M3E 觀感、又不願改動佈局結構的開發者。它與佈局類插件意圖正交：只改配色與幾何令牌，不寫佈局規則，降低樣式互相覆蓋的風險。

使用前請注意：

• 插件在當前 dsh 進程權限下運行，安裝前宜通讀 GitHub 倉庫 源碼與 MIT 許可證，確認符合你的環境策略。
• corner-shape: squircle 在 Firefox/Safari 上爲普通圓角；窄屏重排需另配佈局插件。
• 設置行文案跟 navigator.language（zh 前綴爲中文），未接入宿主 i18n 字典。

結尾¶

dsh-web-m3e 用「override token + 薄樣式表」的方式，把 Material 3 Expressive 的配色、菜單浮層與觸摸細節疊到 DeepSeekRuntime Web UI 上，明暗仍由宿主管，一鍵可退。社區目錄頁：https://www.skillhub.cn/plugins/androidly/dsh-web-m3e；源碼與詳細設計說明：https://github.com/androidly/dsh-web-m3e。