DSH · One Dark Pro Theme
给 DeepSeek Harness Web GUI 的 One Dark Pro(经典版)主题。按 VS Code 扩展 zhuangtongfa.material-theme 3.20.3 的主题文件 1:1 取色,覆盖 DSH 的整套主题令牌:背景、文字、边框、按钮、状态色、滚动条、Markdown 代码块与 Shiki 语法高亮。
- 在 设置 → 通用 → 主题 里切换「One Dark Pro / 原生」
- 只影响深色外观;浅色外观保持 DSH 原样
- Markdown 行内代码(
像这样的小方块)的文字用 One Dark Pro 关键字紫 #c678dd、字号与正文一致并跟随「字号大小」设置缩放、半粗(600)
- Markdown 加粗文字用 One Dark Pro 的链接蓝
#61afef(深色外观下)
- 选择会被记住(刷新 / 重启 GUI 后仍在;桌面版端口变化时用 cookie 兜底),多窗口同步
- 启动时会自动叠加上主题图层(多次延迟重试 + 每 2 秒轻量校准),不需要手动切换一次
- 不修改 DSH 安装目录的任何文件;卸载即恢复
One Dark Pro 色板
设计取舍与实现记录见 PLAN.md;仓库:https://github.com/Cherryxxh/DSH-One-Dark-Pro-Theme。
安装
# 从 GitHub 安装
dsh plugin --profile desktop add "git+https://github.com/Cherryxxh/DSH-One-Dark-Pro-Theme.git"
# 或者从本地目录安装(目录名可以是仓库根目录)
dsh plugin --profile desktop add "C:\path\to\DSH-One-Dark-Pro-Theme"
本仓库的包名是 dsh-theme-one-dark-pro,仓库名是 DSH-One-Dark-Pro-Theme,两者可以不同。首次安装后如界面未出现设置行,重启一次 DSH(bundle 名册在启动时组装);之后切换主题不需要重启。
使用
- 打开 设置 → 通用,在「外观」「字号大小」下面找到 主题。
- 点 One Dark Pro:立即应用配色;如果当前是浅色外观,会自动切到深色。
- 点 原生:撤掉本插件的配色,回到 DSH 默认(外观深浅仍由「外观」那行决定)。
- 之后在「外观」里手动切浅色,界面就回到 DSH 原生浅色;再切回深色,One Dark Pro 会自动恢复。
配色来源
| 项目 | 来源 |
|---|
| 色值 | VS Code 扩展 zhuangtongfa.material-theme 3.20.3 的 themes/OneDark-Pro.json(223 个 UI 颜色键 + 271 条语法颜色规则) |
| 浅色面 | DSH @deepseek-ai/dsh-client-ui-theme 0.2.1-rc.2 的样式表默认值(快照:tools/reference/dsh-defaults.json) |
| 许可 | One Dark Pro 扩展为 MIT;本插件只使用色值数据(颜色本身不受版权保护),未复制扩展代码 |
覆盖范围
themes/one-dark-pro.json 里共 156 个令牌:
| 分组 | 令牌 | 代表值 |
|---|
| 背景 / 表面 | bg-base、bg-layer-1..3、bg-overlay、bg-module-platform、遮罩、骨架屏 | #282c34、#21252b、#2c313a、#323842 |
| 边框 | border-l1..l4、border-inverted* | #3e4452、#4b5263、#5c6370、#636b78 |
| 文字 | label-primary / secondary / tertiary / caption / dimmed、反色、蓝字 | #abb2bf、#9da5b4、#7f848e、#6b717d、#5c6370 |
| 品牌 / 按钮 | brand-*、button-* | 主按钮 #404754(VS Code button.background)、悬停 #4b5263、按钮文字 #ffffff |
| 状态 | success / error / warn / business / idle | #98c379、#ff616e、#d19a66、#61afef、#5c6370 |
| 交互 / 选中 | interactive-*、diff、file-diff-* | 选区 #67769660;diff 用语法绿 / 红透明叠加 |
| 滚动条 | scrollbar-bg-l1/l2、hover-l1/l2 | #4e566660、#5a637580、#747d9180 |
| 代码 / Markdown | code-block、inline-code、banner、segment、placeholder | #21252b、#2c313a、#1d1f23 |
| 浮层 | 菜单、tooltip、toast、选区器 | #21252b(94% 透明度做 DSH 的毛玻璃底)、#1d1f23、#2c313a |
| 侧栏 | specific-sidebar-* | #21252b、#2c313a、#61afef |
| Shiki 语法 | 11 个 token 色 | 见下表 |
| 主题专属样式(令牌无法表达) | Markdown 行内代码、加粗文字 | 行内代码 #c678dd(关键字紫)+ font-size:1em + font-weight:600;加粗文字 var(--dsw-alias-link)( 链接蓝)。均随主题图层注入/移除 |
语法高亮映射
| DSH Shiki 令牌 | One Dark Pro 颜色 | VS Code 作用域 |
|---|
| comment | #7f848e | comment(原版为斜体) |
| constant | #d19a66 | constant.numeric |
| function | #61afef | entity.name.function |
| keyword | #c678dd | keyword |
| link | #61afef | textLink.foreground |
| parameter | #e06c75 | variable.parameter(JS/TS 规则) |
| punctuation | #abb2bf | punctuation |
| string | #98c379 | string |
| string-expression | #56b6c2 | 正则 / 内嵌表达式 |
| background / foreground | #21252b / #abb2bf | editorWidget.background / editor.foreground |
对比度实测(深色面)
| 组合 | 前景 | 背景 | 对比度 | 门槛 |
|---|
| 正文 / 底色 | #abb2bf | #282c34 | 6.57 | 4.5 ✅ |
| 正文 / 抬升面 | #abb2bf | #21252b | 7.22 | 4.5 ✅ |
| 正文 / 选中面 | #abb2bf | #2c313a | 6.13 | 4.5 ✅ |
| 次要文字 / 底色 | #9da5b4 | #282c34 | 5.65 | 4.5 ✅ |
| 三级文字 / 底色 | #7f848e | #282c34 | 3.73 | 3.0 ✅ |
| 最弱提示 / 底色 | #6b717d | #282c34 | 2.86 | 2.5 ✅ |
| 装饰弱灰 / 底色 | #5c6370 | #282c34 | 2.32 | 2.0 ✅ |
| 链接 / 底色 | #61afef | #282c34 | 5.92 | 4.5 ✅ |
| 按钮文字 / 主按钮 | #ffffff | #404754 | 9.34 | 4.5 ✅ |
| 图标 / info 按钮 | #ffffff | #4d78cc | 4.31 | 3.0(图形元素)✅ |
| Toast 文字 / 底 | #d7dae0 | #2c313a | 9.33 | 4.5 ✅ |
| 代码正文 / 代码块 | #abb2bf | #21252b | 7.22 | 4.5 ✅ |
| 成功色 / 底色 | #98c379 | #282c34 | 6.94 | 4.5 ✅ |
| 错误色 / 底色 | #ff616e | #282c34 | 4.79 | 4.5 ✅ |
| 警告色 / 底色 | #d19a66 | #282c34 | 5.68 | 4.5 ✅ |
| 焦点蓝 / 底色 | #61afef | #282c34 |
复跑:node tools/contrast.mjs(硬性项不达标会以非零码退出)。
实现方式(可维护性)
DSH 的 ctx.theme 提供两种扩展点。设置里的「外观」行只有 light / dark / system 三个硬编码方块,第三方 register() 的 theme id 既不进 UI 也不进设置 schema(不持久化),所以本插件走官方认可的第二种:
ctx.theme.overrideTokens(source, { token: { light, dark } }) 叠加一层别名令牌;
- 自建一行
settings.general.item 做切换;
- 只在解析后的外观是深色时叠加图层,浅色时撤掉——因此浅色外观与原生逐像素一致;
- 图层值由
ui-layout presenter 写成 body 内联 CSS 变量,切换/卸载时自动回退。
目录结构
dsh-theme-one-dark-pro/
├── PLAN.md # 设计/实施计划
├── README.md # 本文件
├── package.json # bundle + client manifest
├── cordis.patch.yml # 插入本插件的 loader row
├── index.js # Host 半边(空 apply,只为让客户端 bundle 被发现)
├── client.js # 构建产物:ModuleLoader bundle
├── src/client.template.js # 可编辑的运行时源码(含 __TOKENS__ 占位)
├── themes/one-dark-pro.json # 令牌映射真源(暗色值 + 出处注释)
├── locale/{en,zh}.json # 插件页展示文案
├── icon.svg # 原创图标
├── tools/
│ ├── build.mjs # 生成 client.js(含覆盖率校验)
│ ├── contrast.mjs # 对比度审计
│ ├── test-runtime.mjs # 运行时行为测试(无浏览器)
│ ├── reference/
│ │ ├── dsh-defaults.json # DSH 0.2.1-rc.2 默认令牌双面值快照
│ │ └── onedark-palette.json# One Dark Pro 色值参考(含语法作用域)
│ └── reference/render-palette.py # 生成 docs/onedark-palette.png
└── docs/onedark-palette.png # 色板图
重建
cd <仓库根目录>
node tools/build.mjs # 改 themes/*.json 或 src/client.template.js 后必须重建
node tools/contrast.mjs # 对比度审计
node tools/test-runtime.mjs # 运行时行为测试
DSH 大版本升级后,如果官方浅色调色板有变,重跑一次默认值提取并更新 tools/reference/dsh-defaults.json 再构建即可。
已知边界
- 只做深色:浅色外观完全沿用 DSH 默认(图层在浅色下会被撤掉)。
- 静态色阶只覆盖被组件直接引用的 16 个:
--dsw-static-neutral-850/800/700 等被 DSH 组件直接当卡片/悬停底色用,必须一起映射,否则和别的主题插件(如护眼配色)叠加时会被染成土黄/橄榄色。其余未被引用的静态步进与 --dsw-shadow-*、字号/字体/圆角令牌不动。
- 8 个组件专用令牌:
bg-l1、bg-layer-4、fill-l1/l2/tertiary、fill-tsp-secondary、label-quaternary、separator-primary 被 DSH 组件引用但当前 ui-theme 样式表未定义;本插件按 One Dark Pro 语义补了值(否则这些位置无主题色)。
--dsw-menu-backdrop-filter 是滤镜不是颜色,保持 DSH 默认。
- 第三方插件里写死的颜色无法覆盖(DSH 自带组件没有此问题)。
- 与本 profile 里已安装的
@xiaotuchu/dsh-theme-eye-care 同时启用时,两层会按“后叠加逐令牌获胜”混合。建议在其「背景色」行选「原生」或禁用,避免两套配色混搭。
- 本插件不是 VS Code 官方或 One Dark Pro 作者发布的项目,名称仅用于说明配色来源。
卸载
dsh plugin --profile desktop remove dsh-theme-one-dark-pro
卸载或选「原生」后界面立即恢复 DSH 默认,插件不改动 DSH 自身文件。
许可
插件代码 MIT。One Dark Pro 配色来自 MIT 许可的 VS Code 扩展(© Zhuang TongFa / Binaryify 等),本仓库仅使用颜色数据。