dsh-skin-picker:给 DSH Web 界面换肤的插件

前言

如果你日常用 dsh web,大概遇到过这样的情况:界面只有官方主题和明暗两种模式,想换个观感,没有现成入口。DSH 的理念是「一切皆插件」,界面外观这件事也可以交给插件来做。

下面介绍的 dsh-skin-picker 就是这样一个插件:装好后会在「设置 → 通用」里多出一行「皮肤」,点色块、输入一句描述、或者放一张背景图,就能改变整个页面的配色。

这是什么

dsh-skin-picker 是一个 DSH(DeepSeek Harness)换肤插件,归类为「趣味换装」,当前版本 0.6.0,采用 MIT 许可证。代码托管在 GitHub(仓库所有者为 Lzh-12),插件作者署名为 Aaron111。

它解决的问题很具体:在不改动 DSH 本体的前提下,为 web 界面提供换肤能力,包括预设皮肤、按描述生成配色、自定义背景图片、界面控件联动和跨设备同步。

核心功能

预设皮肤:内置 10 套皮肤,亮 / 暗双色板自动跟随当前模式。分别是:海盐蓝、樱花粉、薄荷绿、暖阳橙、薰衣草紫、石墨灰、奶油米、极光青、莓果红、森林绿。

自然语言换肤:输入一段描述(比如「赛博朋克霓虹」「日式抹茶」),插件会自动生成一套配色。实现上分两层:内置 15 组语义关键词库做匹配,匹配不上的任意文本则走确定性 HSL 调色兜底,保证任何输入都有结果。

自定义背景图片:上传本地图片或粘贴 URL,设为页面背景。插件会叠加一层可读性蒙层,写入 --dsw-alias-bg-basebackground 栈(蒙层 + 图片 cover)。

界面控件联动:换肤不只改主色。输入框、气泡、按钮、tab、渐变都会跟随配色,通过派生令牌(如 --dsw-specific-*--dsw-static-deepseek-*--dsw-alias-button-*)加 inline !important 双保险生效。

跨设备同步:皮肤选择写入 settings.yaml。host 端用 settings.register 注册命名空间,再通过 connection RPC 通道同步,本地以 localStorage 兜底。需要说明的是,settings 网关只对白名单命名空间开放第三方读写,这个插件是在这个约束下工作的。

恢复默认:一键回到官方主题。

安装与启用

从 GitHub 安装:

dsh plugin --profile web add github:Lzh-12/dsh-skin-picker

也可以从本地目录安装:

dsh plugin --profile web add file:./dsh-skin-picker

安装完成后需要重启 dsh web 并刷新页面,才能在「设置 → 通用」看到「皮肤」这一行。

该插件声明了两个 peerDependencies:@deepseek-ai/dsh-settings ^0.1.0-rc.6@deepseek-ai/schemastery ^3.18.1

典型用法

  1. 打开 设置 → 通用 →「皮肤」
  2. 预设皮肤:点色块立即换肤
  3. 自然语言换肤:输入描述(如「赛博朋克霓虹」),点「生成」
  4. 背景图片:点「选择图片」上传,或粘贴 URL 后点「设为背景」
  5. 恢复默认:一键回到官方主题

所有操作都在这一行设置里完成,不需要改配置文件。

实现原理

浏览器端通过 theme.overrideTokens(source, tokens) 叠加一层令牌覆盖。tokens 是「令牌名 → { light, dark } 值对」的结构,因此与 DSH 的主题系统、明暗模式天然兼容——切换明暗模式时,皮肤色板会自动跟着切换。

跨设备同步这条链路值得单独看一下:host 半边(lib/index.js)负责注册 settings 命名空间和 config RPC 通道;浏览器半边(lib/client.js)负责 UI、令牌覆写、配色生成和同步。插件整体通过 package.json 中的 dsh.bundle / dsh.client 声明和 cordis.patch.yml 组合补丁接入。

另外提一句版本变化:0.5.0 的「图片取色换肤」在 0.6.0 中已被「背景图片」取代——图片不再用于取色,而是直接铺成页面背景并带可读性蒙层。如果你看过旧版文档,以 0.6.0 的行为为准。

适用场景与注意

适合经常使用 dsh web 界面、希望调整观感的开发者。它属于趣味换装类插件,不改变对话和智能体的行为逻辑。

两点提醒:

  1. 插件以当前 dsh 进程的权限运行,安装任何第三方插件前,建议先检查源码和许可证,确认没有越权行为再安装。
  2. 该插件需要 @deepseek-ai/dsh-settings@deepseek-ai/schemastery 两个 peer 依赖,版本要求见上文。

结尾

dsh-skin-picker 把「换肤」这件事完整地做成了插件:从预设色板、自然语言生成配色,到背景图、控件联动和 settings.yaml 跨设备同步,卸载或点「恢复默认」即可回到官方主题,对本体没有侵入。

  • 社区目录页:https://www.skillhub.cn/plugins/Lzh-12/dsh-skin-picker
  • GitHub 仓库:https://github.com/Lzh-12/dsh-skin-picker
羽毛球分组比赛记分
小程序二维码

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

Xiaoye