前言¶
DeepSeek Harness（DSH）的 Web 界面有一套内置设计系统：界面颜色、侧栏、对话区、代码块等，最终都落在 CSS 自定义属性（设计令牌）上。若只想换一套浅色/深色观感、微调强调色或正文字体，直接改前端源码或手写全局 CSS 成本高，且容易在主题切换时不同步。
下面介绍社区插件 dsh-theme-studio（维护者 marselarts）。它不另建一套样式体系，而是通过 Harness 公开的 ctx.theme.overrideTokens 扩展点，按 light / dark 分别编辑客户端已在用的令牌，并支持预设、实时预览与自定义 CSS。插件在 SkillHub 目录中归类为「趣味换装」。
这是什么¶
Theme Studio for the DeepSeek Harness Web UI：在 Settings 里打开主题工作室，或在应用上方以可移动面板编辑同一套编辑器；改的是设计系统已有的语义色、组件填充色、静态色阶与字体变量，变更会写入宿主存储并在界面上即时生效。
插件包名 dsh-theme-studio，当前资料中的版本为 0.1.0，许可证 MIT。运行环境要求 Node.js ≥ 20、DSH ≥ 0.2.0-rc.1（见 package.json）。
核心功能¶
插件编辑的对象与 Harness Web 客户端绘制界面时使用的变量一致，主要包括：
- 语义令牌（Semantic tokens） — 共 107 个
--dsw-alias-*变量（表面、文字、边框、强调色、状态、按钮、代码、diff、菜单、工具提示、滚动条等），与设计系统令牌表一致。 - 组件填充（Component fills） — 11 个
--dsw-specific-*表面（侧栏列及其行、消息气泡、输入区、菜单材质、选择器等）。 - 静态色板（Static palette） — 77 个
--dsw-static-*色阶，别名可解析到这些步进值，便于从某一档（例如--dsw-static-deepseek-500）整体换 tint。 - 排版 —
--dsw-font-family（界面）、--ds-font-family-code（代码与 diff）、--dsw-font-family-brand（品牌字标），以及通过theme.setFontSize()写入的对话正文字号。 - 自定义 CSS — 插件自有样式表，用于令牌覆盖不到的部分。
编辑器按标签页组织（资料中的说明）：
| 标签 | 作用 |
|---|---|
| Colors Simple | 按区块（文字、应用背景、对话、侧栏、面板、菜单、强调色、状态、代码与 diff、控件等）只改该区块相关颜色；左侧列表显示每区已改颜色数量 |
| Colors | 完整网格：可搜索、分组，light/dark 各一控件，色块与自由输入（var(...)、color-mix(...)、transparent 等），单令牌重置、「仅已改」筛选 |
| Fonts | 三个 font-family 槽位、本机字体探测（未安装会标注）、对话字号与 live 样例 |
| Presets | 五套起点（Warm paper、Nord、Solarized、Rosé Pine、High contrast），JSON 导出/导入，全部重置 |
| Advanced | 自由样式表，带一键片段（界面缩放、标题色、圆角、不透明菜单、暖色阅读面等） |
覆盖层经 theme.overrideTokens 合并进当前主题快照并写到 body，浅色/深色切换、首屏绘制与卸载仍由 Harness 负责。
在界面旁编辑：Settings 对话框会盖住主界面，不便对照对话区看效果。工具栏中的 Open beside the interface 会关闭对话框，在同一套 store 下以可拖拽面板浮在应用一角；位置、折叠与是否打开保存在浏览器 localStorage，与 Settings 页数据一致。
安装与启用¶
包声明了 dsh.bundle.patch 与 dsh.client，官方安装器会挂载并加入 profile 的 bundle 栈。资料中的安装方式为本地目录 link（非 git clone 说明中的远程 URL 安装需自行查阅 README 后续段落）：
dsh plugin --profile desktop add <absolute path to this directory>
这会记录 link: 依赖，profile 指向该目录而非复制；修改 src/ 后执行 npm run build 即可更新插件。卸载：
dsh plugin --profile desktop remove dsh-theme-studio
安装后 重新加载 Web GUI。入口在 Settings → Theme Studio。不卸载仅禁用时，可在 profile 的 cordis.patch.yml 中覆盖：
- id: theme-studio
disabled: true
典型用法¶
- 安装并 reload Web GUI，打开 Settings → Theme Studio（或从编辑器工具栏打开浮动面板）。
- 在 Presets 选一套起点，或在 Colors Simple 按区块微调，再到 Colors 精调单个令牌。
- 在 Fonts 选择界面/代码/品牌字体；本机未安装的族名会被标记，选中有名无字的情况界面可能无可见变化。
- 需要超出令牌范围的效果时，在 Advanced 编辑自定义 CSS 或使用片段。
- 满意后配置持久化在宿主侧；客户端也会镜像到
localStorage以加快首屏，最终以宿主文件为准。
配置主文件路径（资料原文）：
<DSH_HOME>/dsh-theme-studio/theme.json
其中包含总开关、override 映射与 custom CSS；宿主通过 POST /api/dsh-theme-studio 写入，并对字段做校验（令牌名须为自定义属性、值长度上限等）。
开发者若改插件源码：
npm run build # 重新生成 lib/client.js
npm run check # 构建校验 + 离线激活/渲染/路由检查
渲染相关检查需要本地安装 React 18.3.1（见 README 中的 .devdeps 说明）；未安装时 npm run check 会跳过渲染断言并报告 skip。
适用场景与注意¶
适合：长期在 desktop profile 使用 Harness Web UI、希望按 light/dark 系统化换肤或/fonts 微调、又不想 fork 前端的用户；也适合想理解 DSH 设计令牌分层（alias / specific / static）的开发者。
注意：
- 插件在 当前 DSH 进程权限 下运行，安装前应阅读 GitHub 仓库 源码与 MIT 许可证，自行评估信任边界。
- 安装命令以 README 为准；资料给出的是 本地绝对路径 的
dsh plugin --profile desktop add，不要凭插件名臆造github:owner/repo一类命令。 - 部分组件在变量前写死了字体栈（例如 ui-conversation 中
Inter, var(--dsw-font-family)），本机有 Inter 时可能仍优先 Inter。 - SkillHub 目录（插件页）是社区生态索引，与 DeepSeek / 幻方无官方从属关系；星标等元数据以目录页为准（资料中 GitHub 星标为 0）。
结尾¶
dsh-theme-studio 把 Harness Web UI 已有的设计令牌和主题扩展点做成可编辑、可预设、可浮窗对照的 Theme Studio，适合在不动前端仓库的前提下做 light/dark 配色与字体实验。进一步了解与 issue 见 GitHub：marselarts/dsh-theme-studio，目录条目见 SkillHub 插件页。
