dsh_plugin

dsh-cosmic-theme

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

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

功能

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 变量写在 <body> 上，优先级高于任何样式表

3. 分区独立配色

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

4. 图片背景

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

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

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

6. 两个入口

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

7. 外观与一键还原

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

8. 自动跟随主题变化

监听 <body> 的 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=…] 标记做作用域注入，实现分区换肤。最终输出一个 <style data-plugin="dsh-cosmic-theme"> 节点，加上 <body> 上的内联变量。

插件不发任何网络请求，不读取或修改会话 / 文件 / 凭据；卸载时由 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