VlanTech/dsh-glassic-mist-theme

Install

# 以 ~/.dsh/profiles/web 为例
   mkdir -p ~/.dsh/profiles/web/node_modules/dsh-mistblue
   cp -R <本仓库目录>/. ~/.dsh/profiles/web/node_modules/dsh-mistblue/
   ```

2. 在 profile 的 `package.json` 中注册 bundle 与依赖：

   ```json
   {
     "dsh": {
       "profile": {
         "bundles": ["...", "dsh-mistblue"]
       }
     },
     "dependencies": {
       "dsh-mistblue": "file:./node_modules/dsh-mistblue"
     }
   }
   ```

3. 重启 Harness（组合在启动时读取）。

`cordis.patch.yml` 会自动把 `mistblue` 行插入组合，无需手动编辑 cordis.yml。

### 启用主题

- **设置开关**：设置 → 通用 →「雾蓝主题」→「启用 雾蓝」（再点一次或选择默认主题即可关闭）
- **命令**：输入框输入 `/misttheme` → 选择「开启雾蓝主题 / 关闭雾蓝主题」
- **浓度调节**：拖动「雾蓝主题」行内的「雾蓝浓度」滑块（10%~100%），实时生效并持久化（键 `dsh-mistblue.intensity.v2`）；50% 为默认观感，100% 浓度翻倍
- 选择结果持久化在 `localStorage`（键 `dsh-mistblue.enabled`），下次启动自动恢复

## 设计批注

> 代码中的关键决策与原因，方便二次开发与审查。

### 1. 蒙版式而非替换式

主题不替换默认皮肤，而是注册为 `mist-blue`（`colorScheme: light`）并把整套视觉叠在默认皮肤之上。好处：默认浅色/深色主题完全不受影响，切换/关闭零残留（见 `src/client/index.js` 的 `TOKENS` 与 `CSS`）。

### 2. 作用域隔离

所有自定义 CSS 都以 `body[style*='--dsh-mistblue']` 开头——主题激活时框架会在 `body` 上写入该 style 标记，CSS 才生效；关闭后选择器失配，无任何样式残留。这是「零侵入」的关键实现。

### 3. 云雾动效的性能与可访问性

- `::after` 伪元素使用 `will-change: transform, opacity`，动画仅用 `translate3d + scale`（合成器友好），避免重排
- 动画周期 74s、漂移幅度 ≤2.4%，克制不抢戏
- `@media (prefers-reduced-motion: reduce)` 下动画关闭，尊重系统减弱动态效果偏好

### 4. 毛玻璃的分档强度

不同层级使用不同模糊档位（输入框 `blur(20px)` / 上下文面板 `blur(24px) saturate(1.25)` / Modal `blur(28px) saturate(1.3)` / 深色模块走 `--dsh-mistblue-glass-blur` 变量默认 `16px`），并全部带 `-webkit-` 前缀以兼容 Safari。

### 5. Safari 的已知例外

审批卡 / 问题卡（`.bqrRRG_card` 等）使用近不透明底 `rgba(248, 251, 254, 0.97)`——这是**有意为之**：Safari 的 `backdrop-filter` 与 `overflow: hidden` 组合会裁切子元素，半透明底会导致内容异常。可读性优先于「全透明」。

### 6. 持久化与启动恢复

开关状态写入 `localStorage`（键 `dsh-mistblue.enabled`），插件启动时读取并自动应用；`theme/change` 事件同步回写，保证设置行与真实主题状态一致。

### 7. 浓度滑块与实时覆盖

浓度滑块通过 `theme.overrideTokens("intensity", {...})` 实时覆盖 `--dsh-mistblue-veil-opacity` / `--dsh-mistblue-mist-opacity` / `--dsh-mistblue-veil-saturate` 三个私有令牌（动态包门面会自动把 source 替换为包 ID，重复调用替换同一层）。

- 档位映射：50% → 透明度 1 / 饱和 1（默认观感）；100% → 透明度 1 / 饱和 2（浓度翻倍）；低于 50% 按比例降透明度
- 开启雾蓝时叠加 +8% 增深，开关切换反馈更明显
- 拖动采用 100ms 防抖，避免频繁重算全量令牌造成卡顿；图层不带过渡动画
- 切回默认主题时覆盖层自动卸载，私有令牌随之清除，浅色/深色主题不受影响

### 8. 服务集成方式

插件注入 `slots`（设置行）、`theme`（主题注册/切换）、`commandUi`（/misttheme 命令）三个客户端服务：

- `slots.inject("settings.general.item", ...)` 在设置 → 通用下插入开关行（`order: 11`）
- `theme.register({ id: "mist-blue", ... })` 注册主题
- `commandUi.register(...)` 注册 `popupSelect` 类型的 `/misttheme` 命令

### 9. 第三方插件兼容

对 `dsh-reasoning-effort` 的开关（`.re-setting-switch`）做了雾蓝轨道适配（`.is-on` 态为 `rgb(58, 132, 216)` 蓝色），同类插件的开关样式可参考此模式扩展。

### 10. 构建管线

`src/` 是可读源码，`lib/` 是运行时产物：

- `scripts/build-client.mjs` 把 `src/client/index.js`（CommonJS 风格）包装为 `window.__ModuleLoader__.load({ id, factory })` 工厂，输出 `lib/client/index.js`
- `src/index.js`（host 空实现）直接复制为 `lib/index.js`，使包成为合法插件行，浏览器半区通过 `dsh.client` 清单解析

## 目录结构

Add VlanTech/dsh-glassic-mist-theme to your DSH config (web profile) to enable.