nineandnine-9

dsh-theme-rheostat

Name: dsh-theme-rheostat
Author: nineandnine-9

Sliding-rheostat theme plugin for the DeepSeek Harness web GUI: model + reasoning-effort driven accents, composer glow, and a whale slider.

Stars: 1
Language: TypeScript
Created: Aug 16, 2026
Updated: Aug 16, 2026

Theme

GitHub repo

Introduction

滑动变阻器 · dsh-theme-rheostat

一个「滑动变阻器」主题皮肤：根据当前会话的模型 + 推理等级，把界面切成四个挡位的外观，并在输入框上方显示当前挡位指示条。

GitHub 仓库：https://github.com/nineandnine-9/dsh-theme-rheostat

挡位	模型	推理等级	强调色（浅色 / 深色）	光晕
① flush-strong	deepseek-v4-flash	high（强）	`#2563EB` / `#60A5FA`	弱
② flush-max	deepseek-v4-flash	max（超强）	`#4F46E5` / `#818CF8`	中
③ pro-strong	deepseek-v4-pro	high（强）	`#D97706` / `#FBBF24`	中
④ pro-max	deepseek-v4-pro	max（超强）	`#DC2626` / `#F87171`	强

隐喻：变阻器升温——flush 走冷色系（蓝 → 靛），pro 走暖色系（琥珀 → 炽红），强 → 超强 在各自色系内「升温」并加宽光晕。

原理

变色：注入一份 CSS，用 body[data-dsh-rheostat][data-rheostat-level="…"] 选择器覆盖语义 token（--dsw-alias-brand-primary、--dsw-alias-border-l2 等），每个挡位提供浅色 + 深色两套（深色用 [data-ds-dark-theme] 区分）。这与 maid-atelier 皮肤同构，不注册完整主题、不污染外观设置里的主题列表。
光晕/边框：同一份 CSS 对 [data-composer-card]（对话输入框卡片的稳定 DOM 钩子）按挡位写 box-shadow 环 + 外发光。
挡位指示条：占用官方插槽 conversation.input.dock（输入框卡片正上方的整行），用 React useSyncExternalStore 订阅当前会话的 ctx.modelDirectories.directoryFor(sessionId).store，读取 { model, reasoningEffort }，解析成挡位并把 data-rheostat-* 属性写到 <body>。
鲸鱼滑片：挡位条上方的连续滑轨（四段色块分区）由一只卡通鲸鱼作滑块，支持拖动 / 点击 / 方向键切换模型与推理等级；四张挡位 PNG 以 base64 内嵌进 src/client/assets.generated.ts（由 scripts/embed-assets.mjs 生成）。

目录结构

dsh-theme-rheostat/
├─ package.json          # dsh.client 声明 + exports + devDeps(tsdown)
├─ tsdown.config.ts      # 一次性构建 host(lib/index.js) + client(lib/client.js)
├─ cordis.patch.yml      # bundle patch：把插件 insert 进 loader roster
├─ skin.json             # 皮肤市场清单
├─ assets/               # 5 张 PNG（源）
├─ scripts/embed-assets.mjs  # PNG → base64 常量
└─ src/
   ├─ index.ts           # host 半（no-op）
   └─ client/
      ├─ index.ts        # apply：locale + 样式注入 + slot 注册
      ├─ levels.ts       # 四挡映射 + resolveLevel()
      ├─ styles.ts       # 由挡位生成 CSS 字符串
      ├─ GearDock.tsx    # 挡位指示条组件
      └─ assets.generated.ts  # 生成的 base64 资产

构建

cd dsh-theme-rheostat
pnpm install      # 只需 tsdown
pnpm run assets   # 重新生成 base64 资产（assets/ 里 PNG 改动后）
pnpm build        # 产出 lib/index.js + lib/client.js

安装到你的 dsh profile

你的 web profile 已经用 link: + dsh.profile.bundles 方式挂过第三方皮肤（maid-atelier），这里照做即可：

在 C:\Users\rzh15\.dsh\profiles\web\package.json 的 dependencies 里加一行：

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

在同一个文件 dsh.profile.bundles 数组里追加：
```
"@dsh-external/dsh-theme-rheostat"
```
安装并重启 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"

调挡位

改配色/光晕：编辑 src/client/levels.ts 的 LEVELS（accent/ring/glow/spread）。
改模型匹配：modelMatch 是 ModelSelection.model 的大小写不敏感子串（当前 v4-flush / v4-pro）；如果你 catalog 里的模型 id 不同，改这里即可。
改文案：src/client/index.ts 的 zh / en 字典。

说明与已知限制

四张挡位图是 1024×1024 原图，内嵌后 lib/client.js 约 6.3MB（一次性加载）。若在意体积，可把 PNG 先压到 ~128px 再跑 pnpm run assets。
皮肤共存：本插件只覆盖少量语义 token + 输入框光晕，作为「强调层」叠加在现有皮肤上；若与其它会覆盖同一批 token 的皮肤同时启用，由 CSS 选择器特异性决定谁赢（本插件的 body[data-dsh-rheostat][data-rheostat-level] 特异性更高）。
当前只映射 high（强）与 max（超强）；未知/缺失的 reasoningEffort 回落到 high（强）。