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三层星云光晕；::after14 组星点 + 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 在启动时装载），刷新页面即可。
使用
- 点右下角 🎨，或进入 设置 → 星际主题
外观选深色 / 浅色 / 跟随系统全局主题颜色点一个色块，或用取色器选任意颜色 —— 整个界面立刻统一- 想单独改某一栏：在
分区独立配色里把对应栏改成「自定义」，再选色 - 想用图片：
主题背景选「本地图片」→ 上传，再拖暗化遮罩调到合适 - 想恢复原生外观：点
还原原生外观
预览（无需安装）
用浏览器直接打开 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
