dsh-theme-studio:在 DSH 里用预设与 design token 定制界面主题

前言

DeepSeek Harness(DSH)把能力拆成插件,界面外观通常由宿主自带的主题服务与 design token 决定。若你只想换强调色、调内容密度或字体,又不想手写整份 CSS 或改 DOM,就需要一个走官方主题 API、且只覆盖 dsh 里真实存在的 token 的插件。dsh-theme-studio 面向这类需求:在设置里集中改主题,并通过 ctx.theme.overrideTokens() 叠层,而不是直接改页面样式。

这是什么

dsh-theme-studio 是维护者 hj01857655 发布的 DSH 插件,npm 包名同为 dsh-theme-studio,在 SkillHub 等社区目录中归类为「趣味换装」。它通过 accent 预设、自定义强调色、内容密度、字体、动画开关以及原始 token / 自定义 CSS,定制 dsh 客户端 UI 主题。

插件声明可改动的 token 以 dsh 实际 stylesheet(如 @deepseek-ai/dsh-client-ui-theme)为准,并在 src/tokens.ts 与测试中约束;不能 faithful 实现的能力(例如全局圆角)不会提供。自 dsh-theme-studio@0.7.0 起,开发与发布已迁到 monorepo hj01857655/dsh-plugins 的 packages/dsh-theme-studio;独立仓库 hj01857655/dsh-theme-studio 主要保留历史。新 issue 与 PR 应提到 monorepo。

能改什么、不能改什么

下面两点来自 README 对机制与宿主限制的说明,安装前值得先看一眼。

  1. 只写 dsh 里存在的 design token。 变更经 dsh 主题服务的 ctx.theme.overrideTokens('dsh-theme-studio', overrides) 写入,卸载插件会移除该来源的整层 override,不会留下陈旧 token。
  2. 没有 border-radius 控制。 dsh 在各组件上硬编码圆角(含圆形等),未提供 radius token,插件因此不提供该项。
  3. 动画开关不是 token。 dsh 无 motion token;关闭动画时插件注入样式表,将 transition / animation 时长压到 0.001ms(而非 0s),避免部分依赖 transitionend / animationend 的组件挂起;卸载后该样式表随插件作用域移除。

核心功能

强调色与预设

  • 12 套预设:Ocean、Forest、Sunset、Monochrome、Nord、Dracula、Gruvbox、Solarized、Tokyo Night、Catppuccin、Rosé、Ember。
  • 暗色感知:预设若在暗色模式下 accent 与亮色不同,会随 dsh 进入暗色模式自动适配。
  • 自定义 accent,并可单独设置暗色模式 accent。
  • Contrast guard:暗色 accent 低于 WCAG 亮度下限时会分步提亮,面板会提示已调整。

密度、字体与动画

  • Density:Compact / Comfortable / Spacious。密度不写入 override 层的 --dsh-content-font-size,而是调用 ctx.theme.setFontSize(),与官方 Appearance 里的字号步进一致;在官方处改字号时,此处对应预设会高亮,反之亦然。
  • Font family:System / Monospace / Serif。
  • Animation toggle:见上文机制说明。

自定义 CSS 与主题文件

  • Custom CSS:可覆盖任意 --dsw-* 或 --dsh-* token(包括在自定义 CSS 框里自行设置 --dsh-content-font-size)。
  • Import / export:主题以经校验的 JSON 导入导出;旧版导出的 density 字段在导入时会被忽略(字号现由宿主状态管理)。
  • Live preview:用与应用相同的变量名渲染,预览与真实 token 不一致时会在预览里反映出来。

偏好经 localStorage、导入 JSON 或手改配置进入时,统一走 normalizePreferences() 校验与归一化。

安装与启用

在已安装 dsh CLI 的环境中,README 给出的安装方式为:

dsh plugin add dsh-theme-studio

安装后,插件在设置中注册 settings.section 槽位(order 47),在对应分区里调整主题;偏好持久化在 localStorage。

插件以当前 dsh 进程权限运行。安装前应自行查看源码与许可证(MIT);社区目录 SkillHub 为独立站点,与 DeepSeek / 幻方无官方从属关系。

典型用法

  1. 执行 dsh plugin add dsh-theme-studio 并重启或刷新 dsh 客户端(按你本地 dsh 插件加载方式为准)。
  2. 打开设置,找到 Theme Studio(或插件注册的主题相关分区)。
  3. 选择 12 套预设之一,或填写自定义 accent / 暗色 accent;需要时在 Density、Font family、Animation 上切换。
  4. 在 Custom CSS 中按需写 --dsh-* / --dsw-* 覆盖;面板内 live preview 可对照当前生效的 accent。
  5. 满意后使用 export 保存 JSON;换机器或重装时用 import 恢复。Reset 会恢复首次在本插件改密度前的宿主字号等状态。

从源码本地链接安装(README 提供,需 Node >= 20 与构建环境):

git clone https://github.com/hj01857655/dsh-theme-studio.git
cd dsh-theme-studio
npm install && npm run build
dsh plugin add link:.

日常用户以 npm 包名安装即可;跟进新版本可关注 monorepo 中 packages/dsh-theme-studio 的发布。

机制简述(与多插件共存)

插件 inject 依赖包括 slots、locale、theme。每次主题变更通过 overrideTokens 叠一层 partial token;多层按顺序组合,同一 token 后写覆盖先写;每个值必须是 { light, dark } 对,避免在另一配色下不可读。层以来源 dsh-theme-studio 为键,重新发布会整层替换,缩小 override 集合时不会残留旧 token。两个主题类插件可并存,各自只影响自己写入的 token。

适用场景与注意

  • 适合:长期用 DSH 做智能体或工具开发、希望统一强调色与阅读密度,又希望与官方 Appearance 字号一致的用户。
  • 不适合:需要全局改圆角、或依赖 dsh 未暴露 token 的视觉效果;这类需求只能等宿主扩展 token,或在 Custom CSS 范围内试探。
  • 安全与信任:插件会持久化偏好并改写主题 token;仅安装你审查过的版本,并知悉其运行在 dsh 同一进程内。

结尾

dsh-theme-studio 把「预设 accent + 官方字号 API + token 叠层 + JSON 主题文件」收进一块设置面板,约束在 dsh 真实 token 之内,避免与宿主主题服务打架。目录页:https://www.skillhub.cn/plugins/hj01857655/dsh-theme-studio;代码与说明:https://github.com/hj01857655/dsh-theme-studio(0.7.0 及以后见 https://github.com/hj01857655/dsh-plugins/tree/main/packages/dsh-theme-studio)。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜