前言¶

DSH 的理念是「一切皆插件」，外觀自然也不例外。但如果你日常在 deepseek-v4-flash 和 deepseek-v4-pro 之間切換、也會調整推理等級，界面上並沒有與擋位對應的視覺反饋，不同會話看起來是一樣的。

nineandnine-9 寫的 dsh-theme-rheostat 解決的就是這件事：把當前會話的模型 + 推理等級映射成四個擋位的外觀，強調色、光暈、輸入框上方的指示條都跟着擋位走。和常見的靜態皮膚不同，它的外觀不是寫死的一套配色，而是由會話狀態驅動；實現上它與 README 裏對照的 maid-atelier 皮膚同構，不註冊完整主題。下面按四擋外觀、實現原理、安裝與定製的順序介紹。

這是什麼¶

dsh-theme-rheostat 在社區目錄裏歸類爲「趣味換裝」，一句話定位：根據當前會話的模型 + 推理等級，把界面切成四個擋位的外觀，並在輸入框上方顯示擋位指示條。

隱喻是「滑動變阻器升溫」：flush 走冷色系（藍 → 靛），pro 走暖色系（琥珀 → 熾紅），從「強」到「超強」在各自色系內升溫並加寬光暈。

四擋外觀¶

四個擋位的對應關係如下，每擋提供淺色 + 深色兩套強調色：

當前只映射 high（強）與 max（超強）兩擋推理等級；未知或缺失的 reasoningEffort 會回落到 high。

實現原理¶

插件整體做三件事：注入一份 CSS、給輸入框卡片加光暈、在官方插槽上掛擋位指示條。分別說明。

變色：覆蓋語義 token¶

插件注入一份 CSS，用 body[data-dsh-rheostat][data-rheostat-level="…"] 選擇器覆蓋 --dsw-alias-brand-primary、--dsw-alias-border-l2 等語義 token，深色模式用 [data-ds-dark-theme] 區分。它不註冊完整主題，所以不會在外觀設置的主題列表裏多出一項。

光暈：輸入框卡片¶

同一份 CSS 對 [data-composer-card]（對話輸入框卡片的穩定 DOM 鉤子）按擋位寫入 box-shadow 光環和外發光，四個擋位的光暈強度不同。

擋位指示條：官方插槽¶

指示條佔用官方插槽 conversation.input.dock（輸入框卡片正上方的整行）。組件用 React useSyncExternalStore 訂閱當前會話的 ctx.modelDirectories.directoryFor(sessionId).store，讀取 { model, reasoningEffort }，解析成擋位後把 data-rheostat-* 屬性寫到 <body>——上面的 CSS 選擇器正是靠這些屬性生效。

鯨魚滑片¶

擋位條上方有一條四段色塊分區的連續滑軌，滑塊是一隻卡通鯨魚，支持拖動、點擊、方向鍵切換模型與推理等級。四張擋位 PNG 以 base64 內嵌進 src/client/assets.generated.ts，由 scripts/embed-assets.mjs 生成。

安裝與啓用¶

README 給出的安裝方式是本地 link + profile bundles 手動配置，沒有 registry 安裝命令，所以要先在本地構建產物：

cd dsh-theme-rheostat
pnpm install      # 只需 tsdown
pnpm run assets   # assets/ 裏 PNG 改動後重新生成 base64 資產
pnpm build        # 產出 lib/index.js + lib/client.js

構建產出 host 半的 lib/index.js 和 client 半的 lib/client.js。然後把包掛進你的 web profile：

1、在 profile 的 package.json（如 C:\Users\rzh15\.dsh\profiles\web\package.json）的 dependencies 里加一行，link 路徑按你本地倉庫的實際位置改：

"@dsh-external/dsh-theme-rheostat": "link:E:/dsh-workplace2/dsh-theme-rheostat"

2、在同一個文件的 dsh.profile.bundles 數組裏追加：

"@dsh-external/dsh-theme-rheostat"

3、安裝並重啓 web：

dsh plugin --profile web install
dsh web

dsh plugin --profile web install 等價於把參數轉發給 profile 目錄下的 pnpm。也可以一條命令加包（再手動補 bundles 行）：

dsh plugin --profile web add "link:E:/dsh-workplace2/dsh-theme-rheostat"

定製擋位¶

經過上面的步驟，插件就掛進 profile 了。想調整行爲，主要動三個文件：

• 配色和光暈：編輯 src/client/levels.ts 的 LEVELS，每擋有 accent / ring / glow / spread 四組參數。
• 模型匹配：modelMatch 是對 ModelSelection.model 做大小寫不敏感的子串匹配，當前是 v4-flush / v4-pro；如果你 catalog 裏的模型 id 不同，改這裏即可。
• 文案：指示條上的文字在 src/client/index.ts 的 zh / en 字典裏。

改完源碼或 PNG 後，重新跑一遍 pnpm run assets 和 pnpm build，再重啓 web 生效。

適用場景與注意¶

適合的人羣：在 flash / pro 與強 / 超強之間切換、希望擋位一眼可見的人，或者單純想給界面換裝的用戶。除鯨魚滑片可以切換模型與推理等級外，插件的其餘改動都在外觀層。

使用前有幾點需要知道：

• 體積：四張擋位圖是 1024×1024 原圖，base64 內嵌後 lib/client.js 約 6.3MB，一次性加載。在意體積的話，先把 PNG 壓到 ~128px，再跑 pnpm run assets。
• 皮膚共存：插件只覆蓋少量語義 token 和輸入框光暈，作爲「強調層」疊加在現有皮膚上。如果與覆蓋同一批 token 的皮膚同時啓用，由 CSS 選擇器特異性決定誰生效——本插件的 body[data-dsh-rheostat][data-rheostat-level] 特異性更高。
• 等級映射：只映射 high（強）與 max（超強），未知 / 缺失的 reasoningEffort 回落到 high。
• 平臺與依賴：package.json 聲明 client platform 爲 web，注入 @deepseek-ai/dsh-client-ui-slots、@deepseek-ai/dsh-client-locale、@deepseek-ai/dsh-client-ui-conversation、@deepseek-ai/dsh-client-ui-model-selection 四個依賴。
• 權限與許可證：插件以當前 dsh 進程的權限運行，安裝前建議先讀一遍源碼。package.json 標記 private: true 且未聲明 license 字段，README 也沒有給出許可證信息，是否能在你的場景裏使用需自行確認。

結尾¶

dsh-theme-rheostat 的價值在於把「當前會話跑在哪個模型、哪一擋推理」變成可見的界面狀態：四個擋位、兩套色系、一條輸入框上方的指示條，外加一隻可以拖動的鯨魚。想試的話，從下面的入口進入：

• 社區目錄頁：https://www.skillhub.cn/plugins/nineandnine-9/dsh-theme-rheostat
• GitHub 倉庫：https://github.com/nineandnine-9/dsh-theme-rheostat