🎨 DSH Web 编辑器主题皮肤集
August 14, 2026 · View on GitHub
English | 中文
给 DeepSeek Harness (DSH) Web 界面换肤的客户端插件：21 个取自经典编辑器配色的自适应主题家族，每个家族都包含完整的 light 与 dark 变体，随系统明暗自动切换。全部纯 token 覆盖（
--dsw-*alias 层），零核心改动。
✨ 特性
- 21 个主题家族 —— 取自 Vim / VS Code / Neovim 生态的经典配色（Gruvbox、Catppuccin、Dracula、Solarized、Tokyo Night 等），外加两个原创配色（Violet Slate、Prism Noir）。
- 自适应明暗 —— 每个家族都是一对完整的
SkinDefinition（light + dark），通过官方ThemeService分别注册；设置页只显示一个家族瓦片，运行时按系统偏好解析。 - 纯 token 换肤 —— 只覆盖
--dsw-alias-*/--dsw-specific-*语义 token，不引入背景图、不改布局、不动交互。
🏠 主题家族
| 家族 | 配色来源 | 明暗变体 |
|---|---|---|
| Gruvbox | morhetz/gruvbox | Dark Medium / Light Medium |
| Dimmed Graphite | primer/github-vscode-theme ¹ | Dark Dimmed / Light Default |
| Everforest | sainnhe/everforest | Dark Medium / Light Medium |
| Kanagawa | rebelot/kanagawa.nvim | Wave / Lotus |
| Ayu | ayu-theme/vscode-ayu | Mirage / Light |
| Rosé Pine | rose-pine/vscode | Moon / Dawn |
| Solarized | altercation/solarized | Dark / Light |
| Catppuccin | catppuccin/vscode | Mocha / Latte |
| Tokyo Night | tokyo-night/tokyo-night-vscode-theme | Tokyo Night / Tokyo Night Light |
| Night Owl | sdras/night-owl-vscode-theme | Night Owl / Light Owl |
| Dracula | dracula/visual-studio-code | Dracula / Alucard |
| One Dark Pro | Binaryify/OneDark-Pro ² | One Dark Pro / DSH Light |
| Monokai Classic | microsoft/vscode Monokai ² | VS Code Monokai / DSH Light |
| Violet Slate | 原创配色 | Original Dark / Original Light |
| Prism Noir | 原创配色 | Original Dark / Original Light |
| Flexoki | kepano/flexoki | Flexoki Dark / Flexoki Light |
| Melange | savq/melange-nvim | Dark / Light |
| Horizon | jolaleye/horizon-theme-vscode | Horizon / Horizon Bright |
| Nightfox | EdenEast/nightfox.nvim | Nightfox / Dayfox |
| Tomorrow | chriskempson/tomorrow-theme | Tomorrow Night / Tomorrow |
| Iceberg | cocopon/iceberg.vim | Iceberg Dark / Iceberg Light |
¹ 品牌安全改名：未使用 GitHub 名称、logo 或品牌资产，仅映射配色。 ² 上游无官方浅色版，DSH 原创设计了配套的浅色变体。
完整的来源 commit、文件路径与许可证记录见 docs/sources/editor-themes.yaml；分发声明见 THIRD_PARTY_NOTICES.md。
🖼️ 预览
每个家族的配色思路与本地试穿页见 皮肤画廊：
pnpm build && pnpm preview
预览页直接读取构建出的 lib/preview-skins.js，用同一份家族与 token 数据驱动 mock 聊天布局。
📦 安装
DSH 插件通过 dsh plugin 安装进 web profile。本包发布为 @guanmu/dsh-web-skins。
从 npm 安装（推荐）
dsh plugin --profile web add @guanmu/dsh-web-skins
从 GitHub 源码安装（调试）
git clone https://github.com/ZeroZ-lab/dsh-web-skins.git
cd dsh-skins
pnpm install && pnpm build
dsh plugin --profile web add "file:$(pwd)" --ignore-scripts
装完重启 dsh web，设置 → 通用设置 → 皮肤 即可看到主题下拉。完整步骤、更新、卸载与故障排查见安装手册。
⚙️ 原理
DSH 官方 ui-theme 客户端插件提供主题系统：
ThemeService.register({ id, colorScheme, tokens })是官方支持的第三方主题表面（--dsw-*token 体系）。本插件把每个家族的 light/dark 两个具体皮肤分别注册进去。- 设置页通用区块注册一个"皮肤"选择器：用户选家族，插件的自适应解析器按系统明暗偏好在两个具体皮肤间切换，偏好写入
dsh.theme。 - 切换时维护
body[data-ds-skin="<id>"]属性，便于作用域样式与排查；卸载无残留。
🔨 开发
pnpm install
pnpm build
pnpm test
pnpm preview
pnpm install 需要仓库旁有 DSH 官方快照提供私有类型；pnpm build 生成 lib/index.js、lib/client.js 与 lib/preview-skins.js；pnpm preview 需先 build。新增家族：在 packages/dsh-web-skins/src/client/families/ 写完整 light/dark SkinDefinition，登记为一个 AdaptiveSkinFamily，在 locales.ts 补 skins.name.<id> 中英文案；配色到 token 的映射用 token-map.ts 的 createSkinTokens。