Bundle

@dsh-external/dsh-theme-rheostat

Sliding-rheostat theme: model + reasoning-effort driven accent, glow and gear dock for the dsh web GUI

Source: nineandnine-9
stars: 2 stars
License: MIT
Updated: Updated 18 hours ago

Readme

# 滑动变阻器 · 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 资产
```

## 构建

```bash
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` 里加一行：

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

2. 在同一个文件 `dsh.profile.bundles` 数组里追加：

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

3. 安装并重启 web：

   ```bash
   dsh plugin --profile web install
   # 重启：dsh web
   ```

   > `dsh plugin --profile web install` 等价于把参数转发给 profile 目录下的 pnpm。

4. 也可以一条命令加包（再手动补 bundles 行）：

   ```bash
   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`（强）。

Install

dsh plugin --profile web add github:nineandnine-9/dsh-theme-rheostat

Profile: web

This package builds from source on install. pnpm will ask you to allow its build script — that is permission to run the package’s code on your machine, outside the agent sandbox. Only allow sources you trust.
This source has no pinned commit, so a later push upstream changes what installs. Prefer pinning a commit.

Source