nineandnine-9/dsh-theme-rheostat

滑动变阻器 · dsh-theme-rheostat

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

GitHub 仓库：

| 挡位 | 模型 | 推理等级 | 强调色（浅色 / 深色） | 光晕 |
|---|---|---|---|---|
| ① 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-* 属性写到 。
- 鲸鱼滑片：挡位条上方的连续滑轨（四段色块分区）由一只卡通鲸鱼作滑块，支持拖动 / 点击 / 方向键切换模型与推理等级；四张挡位 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），这里照做即可：

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

"@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。

4. 也可以一条命令加包（再手动补 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（强）。