前言¶
DeepSeek Harness（DSH）的 Web GUI 自带一套偏蓝灰的设计 token 和圆角体系，对话区、侧栏、输入框的层级也按 DSH 默认组件来排。若你长期在 Claude Desktop 里写代码、读长回复，切回 DSH 时往往会觉得「画布、气泡、工具折叠」的节奏不一样——这不是功能缺失，而是视觉与排版习惯不同。
dsh-claude-code-theme 走 DSH 官方主题扩展点，用 token 覆盖和组件样式注入把界面调成接近 Claude Desktop 的暖纸色、陶土色强调和可读正文，而不是去改 DSH 自带样式表。下面介绍它是什么、改动了哪些层面，以及如何安装与按需微调。
这是什么¶
dsh-claude-code-theme 是维护者 Klop233 发布的 DSH 插件，在 SkillHub 目录 中归类为「趣味换装」。npm 包名与安装名均为 dsh-claude-code-theme（当前资料中的版本为 0.1.0，MIT 许可证）。
一句话定位：把 Claude Desktop 的视觉语言（暖纸中性色、陶土色强调、适合阅读的正文、分层表面、连续输入区）应用到 DSH Web GUI，并保留你对 light / dark / system .palette 的选择。
核心功能¶
颜色与设计 token¶
DSH 设计系统分三层 token，主题在三层都生效：
| 层级 | 含义 | 主题行为 |
|---|---|---|
--dsw-static-* |
原始色阶 | 把 DSH 偏蓝的灰改成 Claude 暖纸灰，把 DeepSeek 蓝改成陶土色；别名层经此解析，因此能覆盖大部分界面 |
--dsw-alias-* |
组件消费的语义角色 | 固定 Claude 侧差异：浅色下奶油色画布托住抬升面板、陶土色主按钮与焦点环、暖色细分割线、深色下文字避免纯白 |
--dsw-specific-* |
命名表面 | 微调侧栏、输入区、气泡、菜单与代码区域 |
表面层级与圆角¶
Claude Desktop 用叠层表达深度，主题给各列单独层级（深色 / 浅色示例如 README）：侧栏最深或最浅一层，中间画布，卡片、输入区、右侧面板为抬升 sheet；右侧面板以细线分隔，而不是悬浮的 detached card。
DSH 将约 280 处 border-radius 收敛到六个 --dsw-radius-* token，主题重映射整段尺度（例如 --dsw-radius-panel 从 28px 改为 20px）。未走 token 的圆角通过稳定的 data-slot / data-* 钩子覆盖。
排版与对话区¶
助手回复用 UI 无衬线、约 1.65 行高；行内代码、代码块、工具输出保持等宽字体。侧栏、顶栏、输入区同样用 UI 无衬线；代码块标题为 sentence case，而非全大写。
对话呈现上：你的消息为右对齐气泡；助手为画布上的正文；工具调用折叠为单行摘要（如 Ran 2 commands ›），可原地展开，便于长会话扫读。
输入区与 chrome¶
输入区为一块连续圆角表面：编辑区与控件同卡、无中间分割线，发送为圆形按钮，焦点为柔和陶土色环。导航行偏安静，hover 限于可用控件，键盘焦点用 focus-visible 环，滚动条为细暖色样式。
实现方式（便于判断是否信任）¶
浏览器侧在单个 Cordis effect 里做两件事：调用 ctx.theme.overrideTokens('dsh-claude-code-theme', …) 注入 174 个 { light, dark } token；再以 <style data-plugin-css> 注入组件样式表。无 React 等运行时依赖，不注册快捷键、不碰会话状态。样式选择器优先用 data-slot 等组件公开钩子，必要时用 CSS Modules 语义后缀（如 [class*="_bubble"]）；DSH 改名时最坏情况是某条规则失效、主题降级，不应拖垮应用。
package.json 标明对 DSH 0.2.0-rc.2 为 compatible，并依赖 @deepseek-ai/dsh-client-ui-theme 注入。
安装与启用¶
在已配置 DSH 的环境里执行官方安装命令：
dsh plugin install dsh-claude-code-theme
也可在 profile 的 cordis.patch.yml 与 dsh.profile.bundles 中手动加入插件包；README 给出的 patch 片段为：
- insert:
- id: claude-code-theme
name: dsh-claude-code-theme
完成后重新加载 Web GUI。无需单独开关：主题叠在你当前 palette 之上，light、dark、system 仍按原逻辑工作。
插件以当前 DSH 进程权限在浏览器端运行；安装前建议查看 GitHub 仓库 源码与 MIT 许可证，确认与本地 DSH 版本匹配。
典型用法：按需覆盖样式¶
组件层可读写在 body 上的 --cct-* 变量，可在自己的 CSS 里微调，无需改包内文件：
body {
/* 长文用衬线体 */
--cct-prose: Georgia, "Songti SC", serif;
/* 表面更松或更紧 */
--cct-composer-radius: 24px;
--cct-control-radius: 6px;
--cct-editor-inset: 20px;
}
常用旋钮包括：--cct-sans（UI 字体）、--cct-prose（仅助手正文）、--cct-mono（代码与路径）、--cct-control-radius、--cct-composer-radius、--cct-editor-inset、--cct-focus（焦点环色，默认跟品牌主色）。
若要改颜色而非字体与圆角，可再叠一层 token（后写入者优先）：
ctx.theme.overrideTokens('my-tweaks', {
'--dsw-alias-brand-primary': { light: '#c96442', dark: '#d97757' },
})
适用场景与注意¶
适合：希望在 DSH Web GUI 里获得接近 Claude Desktop 的阅读感与工具摘要节奏，又愿意继续用 DSH 的 light / dark / system 与官方主题 API 的开发者。
注意：
- 这是纯前端主题插件，不改变模型或 Agent 行为；目录站 SkillHub 为社区生态站点，与 DeepSeek / 幻方无官方从属关系。
- 兼容性以包内
dsh.compatibility为准（资料中为0.2.0-rc.2）；大版本升级 DSH 后若布局钩子变化，部分样式可能轻微退化。 - 开发该插件需 Node
>=22.0.0；普通用户只需dsh plugin install，不必git clone仓库。
结尾¶
dsh-claude-code-theme 用 DSH 文档化的第三方主题扩展点，把暖纸色、陶土强调、连续输入区和对话排版接到现有 Web GUI，并留出 --cct-* 与 overrideTokens 二次调色入口。若要浏览简介或跟进 issue，可看 SkillHub 目录页 与 GitHub：Klop233/dsh-claude-code-theme。
