120777190/dsh_plugin

dsh-cosmic-theme

宇宙星空 · 未来科技 —— 为 DeepSeek Harness（DSH）Web GUI 打造的调色盘式主题插件。

选一个颜色，整个界面自动生成同色系主题：背景底色、面板层次、边框、强调色、链接、按钮、代码高亮、选中态全部由这一个颜色推导。也可以只给左侧栏 / 对话主区 / 右侧栏单独换色，并叠加本地图片背景与星尘装饰。

| 项目 | 值 |
|---|---|
| 版本 | 0.6.0 |
| 类型 | DSH 客户端插件（浏览器端换肤） |
| 实现 | 纯 CSS 自定义属性重映射，无构建步骤、无网络请求 |
| 许可 | MIT |

功能

1. 全局调色盘

- 6 个预设色：电光蓝 #4C7DFF（默认）、星云紫 #8B5CF6、极光青 #22D3EE、霓虹粉 #F472B6、星尘金 #FBBF24、星云绿 #34D399
- 也可用取色器选任意颜色；一键「恢复默认蓝」
- 选一个颜色即自动推导下面全部内容，无需其它设置：
- 静态色阶：--dsw-static-neutral-bluish-、neutral-、deepseek-、blue-、green / amber / red
- 表面层次：bg-base、bg-layer-1..3、bg-overlay、bg-module-platform、bg-multi-select、sidebar-fill、bubble、bubble-highlight、menu、input-major、selector、tip
- 边框与遮罩：border-l1..l4、border-inverted、bg-mask-1..3、bg-mask-photo、bg-mask-drop
- 文字：label-primary / secondary / tertiary / foreground / inverted
- 强调与按钮：brand-primary、brand-text、button-primary-hover / dimmed、button-floating-fill / hover
- 侧栏交互态：sidebar-nav-item-hover / active / active-accent
- Markdown 代码块 与 Shiki 语法高亮 9 项
- 浅色与深色两套映射由同一个颜色分别推导；浅色下强调色自动加深以保证对比度

2. 按钮配色（可独立于全局）

- 「跟随全局主题」或「自定义色」
- 覆盖 brand-primary、button-primary-fill / hover / dimmed、brand-text、label-primary-foreground，以及分区容器上的 button-elevated-fill、button-floating-hover，因此「新建会话」这类浮动主按钮也会变色
- 以内联 CSS 变量写在  上，优先级高于任何样式表

3. 分区独立配色

| 区域 | 作用域选择器 |
|---|---|
| 左侧栏（会话 / 导航） | [data-slot="sidebar"] |
| 对话主区 | [data-slot="conversation"] |
| 右侧栏（面板） | [data-slot="rightbar"] |

每栏可选「跟随」或「自定义」；自定义时会在该区域子树内重新注入一整套变量，同一屏可并存多种配色。

4. 图片背景

- 纯色（默认）/ 本地图片 两种模式
- 支持 PNG / JPEG / GIF / WebP，动图自动播放
- 开启后 14 个主要表面令牌转为半透明（毛玻璃）， 背景为「暗化渐变 + 图片」，铺满、居中、滚动时固定
- 暗化遮罩 0–80% 可调
- 图片以 dataURL 存入 IndexedDB，刷新、重启后依然在

5. 星尘装饰（仅深色模式）

- ::before 三层星云光晕；::after 14 组星点 + 7 秒呼吸动画
- pointer-events: none，不拦截任何点击；尊重系统 prefers-reduced-motion

6. 两个入口

| 入口 | 位置 |
|---|---|
| 设置页 | 设置 → 星际主题 |
| 悬浮按钮 | 界面右下角 🎨 |

两处共享同一份配置，改动即时同步。

7. 外观与一键还原

- 深色 / 浅色 / 跟随系统，直接驱动 DSH 原生外观偏好
- 开关「还原原生外观 / 启用主题」：关闭后不注入任何样式，完整回到 DSH 原生外观

8. 自动跟随主题变化

监听  的 data-ds-dark-theme 变化，并订阅 DSH 的 theme/change 事件，切换深浅色时自动重算内联变量。

9. 持久化与容错

- 配置存 localStorage（键 dsh-cosmic-v1），图片存 IndexedDB（库 dsh-cosmic-theme）
- 逐字段校验，配置损坏时自动回退默认值，不会白屏
- 首次运行：沿用 DSH 当前外观偏好，否则默认应用「宇宙星空 · 深色」

安装

dsh plugin --profile web add file:/absolute/path/to/dsh-cosmic-theme

然后重启 dsh web（bundle 在启动时装载），刷新页面即可。

使用

1. 点右下角 🎨，或进入 设置 → 星际主题
2. 外观 选深色 / 浅色 / 跟随系统
3. 全局主题颜色 点一个色块，或用取色器选任意颜色 —— 整个界面立刻统一
4. 想单独改某一栏：在 分区独立配色 里把对应栏改成「自定义」，再选色
5. 想用图片：主题背景 选「本地图片」→ 上传，再拖 暗化遮罩 调到合适
6. 想恢复原生外观：点 还原原生外观

预览（无需安装）

用浏览器直接打开 preview.html，即可看到三栏模拟界面，实时切换外观、全局颜色与分区配色。

卸载

dsh plugin --profile web remove dsh-cosmic-theme

如需彻底清除浏览器侧残留：

localStorage.removeItem('dsh-cosmic-v1');
indexedDB.deleteDatabase('dsh-cosmic-theme');

工作原理
DSH 的配色链路是「--dsw-static- 静态色阶 → --dsw-alias- 语义别名 → 组件」。插件把静态色阶整族按所选颜色重算，并对静态色阶覆盖不到的别名（边框、遮罩、气泡、菜单等）追加覆盖，所有组件因此跟着变色，不改写任何组件代码；再借助界面渲染时的 [data-slot=…] 标记做作用域注入，实现分区换肤。最终输出一个  节点，加上  上的内联变量。

插件不发任何网络请求，不读取或修改会话 / 文件 / 凭据；卸载时由 ctx.effect 统一注销观察器、事件订阅、内联变量与注入的节点。

已知限制

- 分区换肤依赖界面的 [data-slot="sidebar|conversation|rightbar"] 标记，DSH 若改名则分区换肤失效（全局配色不受影响）
- 依赖 DSH 的 --dsw-static- / --dsw-alias- 令牌体系，上游重构时个别区域可能回落默认色
- 浅色模式不绘制星尘装饰（有意为之）
- 气泡 / 弹窗表面颜色跟随所属分区，不能单独设置
- 主题只作用于当前浏览器，换浏览器或清空站点数据后配置与图片会重置

目录结构

dsh-cosmic-theme/
├── package.json        # 元数据；声明 dsh.bundle.patch 与 dsh.client
├── cordis.patch.yml    # bundle 补丁层：向 profile 装载树插入 cosmic-theme 行
├── lib/
│   ├── index.js        # host 半边：可加载载体 + 生命周期日志
│   └── client.js       # 浏览器端主体：配色引擎、设置页、悬浮面板、装饰层
├── preview.html        # 独立静态预览页
├── DESIGN.md           # 设计文档：配色推导与实现机理
└── README.md

License

MIT