dsh-theme

dsh plugin --profile web add dsh-theme

🎨 dsh-theme

DeepSeek Harness 主题插件 · 30 款即插即用主题 · DSH 原生集成

一个面向 DeepSeek Harness Web 界面的主题包：既是零依赖的 DSH 客户端插件（注册进「设置 → 通用」，与内置「外观」选择器并列），也附带 30 个独立 CSS 文件 可任意方式接入。

每个主题都完整映射 DSH 官方设计令牌（--dsw-alias- 语义层、--dsw-specific- 组件层、--shiki-* 代码高亮），并同时提供浅色 / 深色两套变体——深色变体会跟随 DSH 内置的 data-ds-dark-theme 自动切换，无需额外设置。

插件类型 · DSH web 客户端插件（platform: web、immediately: true、inject: ["slots"]、零依赖）

主题数量 · 30（每个含 light + dark 双变体，共 60 套配色）

集成方式 · 设置 → 通用 →「主题包」（settings.general.item 槽位，React 组件经平台 seed 渲染）

程序化接入 · window.dshTheme / ctx.provide("dshTheme")（Agent 可直接调用）

持久化 · localStorage（dsh-theme:theme / dsh-theme:mode，旧 dsh-theme-pack:* key 自动迁移）

🤖 你是 AI Agent / 想快速接入？直接看 [docs/AGENT.md](docs/AGENT.md)（Agent 快速接入指南）。

---

30 款主题目录

# · id · 中文名 · English · 特点 · 描述

1 · ocean · 海洋 · Ocean · 浅色·冷·蓝 · 清凉的蓝，安静而深邃

2 · midnight · 午夜 · Midnight · 深色·冷·蓝 · 深夜藏蓝，缀以电光蓝

3 · aurora · 极光 · Aurora · 深色·紫·青 · 紫罗兰与青碧交融的夜空

4 · lava · 熔岩 · Lava · 深色·暖·橙 · 炭黑岩层，燃烧的橙红余烬

5 · forest · 森林 · Forest · 浅色·绿 · 松绿与柔软的苔藓

6 · sakura · 樱花 · Sakura · 浅色·粉 · 淡粉的春日，落樱如雨

7 · sunset · 日落 · Sunset · 浅色·暖·橙 · 暖桃色渐入黄昏

8 · graphite · 石墨 · Graphite · 中性·极简 · 柔和的暖灰，护眼耐看

9 · ink · 墨黑 · Ink · 深色·中性·极简 · 纯粹的黑与白，至简

10 · paper · 纸张 · Paper · 浅色·暖·米 · 暖奶油色，像一本翻旧了的笔记本

11 · amber · 琥珀 · Amber · 浅色·暖·金 · 蜂蜜般的金色，温暖透亮

12 · mint · 薄荷 · Mint · 浅色·绿·青 · 清新的青绿，脆爽清凉

13 · violet · 紫罗兰 · Violet · 浅色·紫 · 柔和的紫，带着一丝庄重

14 · cyber · 赛博 · Cyber · 深色·霓虹·蓝 · 近黑底上的霓虹青，赛博电路板

15 · retro · 复古 · Retro · 浅色·暖·复古 · 旧照片般的米褐与陶土红

16 · terminal · 终端 · Terminal · 深色·绿·CRT · CRT 黑底上的磷光绿（含 shiki 语法色）

17 · dune · 沙丘 · Dune · 浅色·暖·沙 · 暖阳下的金色沙丘

18 · glacier · 冰川 · Glacier · 浅色·冷·蓝 · 清澈锐利的冰蓝

19 · nebula · 星云 · Nebula · 深色·靛·紫 · 靛蓝星云，缀满星光

20 · coral · 珊瑚 · Coral · 浅色·暖·橙 · 礁石珊瑚，明快而活泼

21 · steel · 钢铁 · Steel · 深色·冷·蓝灰 · 冷冽的蓝灰，工业般的沉静

22 · autumn · 秋日 · Autumn · 浅色·暖·金 · 丰收午后，满地金黄

23 · matcha · 抹茶 · Matcha · 浅色·绿·暖 · 苔绿间透着茶香

24 · knight · 骑士 · Knight · 深色·金·中性 · 暗色铠甲，缀以古金

25 · pastel · 粉彩 · Pastel · 浅色·柔和·紫 · 糖果般的柔彩，轻柔俏皮

26 · lavender · 薰衣草 · Lavender · 浅色·紫·冷 · 晨光里的薰衣草田

27 · charcoal · 煤灰 · Charcoal · 中性·极简·灰 · 诚实的灰，不打扰你的专注

28 · rose · 玫瑰 · Rose · 深色·粉·酒红 · 深酒红的天鹅绒，缀着浅绯花瓣

29 · wave · 碧波 · Wave · 浅色·青·冷 · 青碧的水波，清澈灵动

30 · mono · 极简 · Mono · 中性·极简·单色 · 严格单色，极致专注

打开 preview.html（构建产物，双击即可，无需服务器）可浏览全部 30 款主题的实时预览。

---

目录结构

dsh-theme/
├── package.json            # DSH 插件清单：dsh.client { inject:["slots"], platform:"web", immediately:true }
├── README.md
├── docs/
│   └── AGENT.md            # ★ Agent 快速接入指南（安装/API/自定义主题/排障）
├── preview.html            # 构建生成：30 主题自包含预览页（file:// 直接打开）
├── src/
│   ├── themes.json         # ★ 30 个主题的唯一数据源（16 个语义插槽 × light/dark）
│   └── client.template.js  # 客户端插件模板（__THEME_DATA__ 由构建内联；设置页 React 行）
├── scripts/
│   ├── build.mjs           # 构建：生成 themes/*.css、manifest、client.js、preview.html（含令牌校验）
│   ├── screenshot.mjs      # 开发工具：对运行中的 DSH 界面截图验证主题
│   ├── plugintest.mjs      # 开发工具：模拟 DSH loader 对插件做集成测试
│   └── pixelcheck.mjs      # 开发工具：PNG 像素校验（截图非空 + 主色命中）
├── themes/                 # 构建生成：每主题一个独立 CSS（可直接用）
│   ├── ocean.css
│   ├── ...
│   ├── index.css           # 全部 30 个主题合一的样式
│   └── manifest.json       # 机器可读目录（含色板 swatch）
├── lib/
│   ├── index.js            # ★ 服务端入口（no-op cordis 插件，loader 挂载必需）
│   ├── client.js           # ★ 构建生成：自包含 DSH 客户端插件（内联全部主题）
│   └── themes.data.json    # 运行时数据
└── shots/                  # 开发工具产出的效果截图

---

快速安装（三选一）

方式 0：一键安装脚本（推荐给普通用户 / Agent）

克隆仓库后直接运行（自动完成构建 + dsh plugin add + loader 条目写入，幂等、带备份）：

git clone https://github.com/mux9056-bot/dsh-theme ~/dsh-theme
cd ~/dsh-theme
node scripts/install.mjs          # 可选：--profile <名字> 装到其他 profile；--no-build 跳过构建

脚本跑完只需重启 dsh web 并刷新页面。详细说明见 [docs/AGENT.md](docs/AGENT.md)。

通过 Agent 安装（3 分钟）

如果你用 DeepSeek Harness 或其他 AI Agent，把下面这段指令直接复制发给你的 Agent，

它会照着 [docs/AGENT.md](docs/AGENT.md) 自动完成安装、重启与验证：

📋 给 Agent 的安装指令（可直接复制）

请帮我把 dsh-theme 主题插件安装到 DSH web 界面（仓库：https://github.com/mux9056-bot/dsh-theme ）：

1. clone 仓库到持久路径（如 ~/dsh-theme，不要用 /tmp）；若无 lib/client.js 先执行 npm run build

2. 安装进 web profile：COREPACK_ENABLE_PROJECT_SPEC=0 dsh plugin --profile web add ~/dsh-theme

（若报 corepack 权限错就用这个前缀重试）

3. 必须在 $DSH_HOME/profiles/web/cordis.patch.yml 追加 loader 条目：

- insert: [{ id: theme, name: 'dsh-theme' }] —— 客户端插件没有自动发现，漏掉就不生效

4. 重启 dsh web（注意：agent 通常运行在 dsh web 进程内，需用 detach 方式重启并留出收尾时间；或让用户手动重启）

5. 验证：curl -s http://127.0.0.1:3080/ | grep '"id":"dsh-theme"' 命中；

并打开「设置 → 通用」确认出现「主题包 · 30 款」色卡行

6. 完成后告诉我，我刷新页面即可使用

Agent 会自行处理所有已知坑（corepack 权限、loader 条目、重启时机、manifest 验证）；

遇到异常可直接让它查阅 [docs/AGENT.md](docs/AGENT.md) 的排障清单。手动安装见下节。

---

快速接入（DSH 原生方案）

⚠️ 重要：DSH 的客户端插件（dsh.client 清单）没有自动发现机制。光把包装进 profile 的

node_modules 还不够 —— 必须同时满足三个条件插件才会出现在 boot manifest 里：

① 依赖装入 profile；② 在 profile 补丁层注册 loader 条目；③ 重启 dsh web。

并且包的 exports 必须提供 . 主入口（lib/index.js），因为 loader 会 import() 整个包。

方式 A：作为 DSH 客户端插件（推荐）

lib/client.js 遵循 DSH 官方客户端插件打包契约（与 @deepseek-ai/dsh-client-ui-theme 同款）：

// package.json —— 本项目的 dsh.client 清单
"dsh": { "client": { "inject": ["slots"], "platform": "web", "immediately": true } },
"exports": {
  ".":        { "default": "./lib/index.js" },   // 服务端入口（loader import 必需）
  "./client": { "default": "./lib/client.js" }   // 浏览器 bundle
}

第 1 步：构建并安装依赖（本地目录即可，无需发布 npm）：

npm run build                                  # 生成 lib/client.js 等构建产物
dsh plugin --profile web add /absolute/path/to/dsh-theme

若遇到 corepack 报 EPERM ... package.json（它会试图往项目外层写 packageManager 字段），

加环境变量重试：`COREPACK_ENABLE_PROJECT_SPEC=0 dsh plugin --

…(truncated)