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

3. 分区独立配色

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

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

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 在启动时装载），刷新页面即可。

使用

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

预览（无需安装）

用浏览器直接打开 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

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

3. 分区独立配色

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

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

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 在启动时装载），刷新页面即可。

使用

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

预览（无需安装）

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

卸载

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

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

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

工作原理

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

120777190/dsh_plugin

dsh-cosmic-theme

功能

1. 全局调色盘

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

3. 分区独立配色

4. 图片背景

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

6. 两个入口

7. 外观与一键还原

8. 自动跟随主题变化

9. 持久化与容错

安装

使用

预览（无需安装）

卸载

工作原理

已知限制

目录结构

License

Community comments

120777190/dsh_plugin

dsh-cosmic-theme

功能

1. 全局调色盘

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

3. 分区独立配色

4. 图片背景

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

6. 两个入口

7. 外观与一键还原

8. 自动跟随主题变化

9. 持久化与容错

安装

使用

预览（无需安装）

卸载

工作原理

已知限制

目录结构

License

Community comments