Bundle

dsh-cosmic-theme

Cosmic starfield & futuristic-tech theming for the DeepSeek Harness (DSH) Web UI: one color drives the whole palette, with per-area (sidebar / conversation / rightbar) colors, local picture backgrounds and star dust.

Source: 120777190
License: MIT
Updated: Updated 5 hours ago

Readme

# 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 当前外观偏好，否则默认应用「宇宙星空 · 深色」

## 安装

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

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

## 使用

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

## 预览（无需安装）

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

## 卸载

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

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

```js
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

Install

dsh plugin --profile web add github:120777190/dsh_plugin

Profile: web

This source has no pinned commit, so a later push upstream changes what installs. Prefer pinning a commit.

Source