dsh-skin-collection:为 DSH Web GUI 提供多套可切换皮肤

前言

DeepSeek Harness(DSH)的 Web 界面默认只有官方的浅色 / 深色 / 跟随系统配色,改外观通常只能动全局主题偏好。若你希望在不改 DSH 核心的前提下,给界面套上侘寂、终端、赛博朋克等完整视觉风格,并在侧边栏快速切换、随时恢复原生样式,就需要一套独立于 ThemeRuntime 的皮肤机制。下面介绍社区插件 dsh-skin-collection 的定位与用法。

这是什么

dsh-skin-collection 是面向 DeepSeek Harness Web GUI 的多风格皮肤集合:每个皮肤注册一套主题 token 与作用域内的装饰 CSS,并通过侧边栏皮肤管理器切换;选「默认样式」可完全恢复 stock UI。

维护者与社区目录条目为 flyingludens,分类为「趣味换装」。项目在 npm 上发布为 dsh-skin-collection,当前版本 0.2.5,许可证 MIT(以仓库为准)。插件以预构建产物分发,安装阶段不执行构建脚本。

核心功能

九套皮肤

每套皮肤有固定 theme id、视觉风格、基础配色方案(light / dark)及典型效果,摘要如下(完整表格见 GitHub README):

Theme id 风格 Scheme 要点
wabi-sabi Wabi-Sabi 侘寂 light 大地色、纸纹、衬线字体、Enso 启动淡入等
terminal Terminal 终端 dark 磷光绿、VT323、CRT 扫描线与文字辉光
cyberpunk Cyberpunk 赛博朋克 dark 青/品红霓虹、Space Grotesk、扫描线
film-noir Film Noir 黑色电影 dark 明暗对比、胶片颗粒、灰度图 hover 恢复
swiss Swiss 国际主义 light 网格、Inter 大写标题、瑞士红点缀
bauhaus Bauhaus 包豪斯 light 红蓝黄几何、Jost、无阴影
brutalism Brutalism 野性主义 light 粗黑边框、硬阴影、警示黄块
dark-glass Dark Glass 暗黑玻璃 dark 深蓝底、蓝紫青环境光、磨砂代码面板
pixel-retro Pixel Retro 像素复古 dark 街机 indigo、Press Start 2P、像素阴影

各皮肤的设计参考 uiprompt.dev web-styles 提示词:palette 映射到 --dsw-alias-* token,关键视觉效果写在 scoped CSS 中。

皮肤与官方主题的关系

插件文档强调了几条行为,便于预期界面变化:

  1. 皮肤 ≠ 主题偏好。 官方 ThemeRuntime 只持久化 light / dark / system;若把 skin id 放在那里,每次保存设置或切换 run-mode 可能被还原。本插件用独立持久化标志驱动 body[data-dsh-skin-<id>],避免被自动流程清掉。
  2. 激活皮肤时锁定配色方案。 皮肤生效期间,基础 color scheme 与皮肤的 colorScheme 一致,避免 dark 皮肤外圈仍是浅色 chrome;选默认样式会解除锁定并恢复你之前的偏好。
  3. 调色板随 attribute 下发。 各皮肤的 --dsh-alias-* 也会作为普通 CSS 挂在对应 attribute 上,客户端树重建后颜色仍可用。
  4. 底层「跟随系统 / 浅色 / 深色」与皮肤 overlay 分离。 在皮肤层之下仍可切换基础 scheme。
  5. 若在官方 Settings → Appearance 里选了某 skin id,插件会自动采纳。

安装与启用

在已配置 DSH Web profile 的环境中,安装命令以 README 原文为准:

# from npm
dsh plugin --profile web add dsh-skin-collection

# or straight from GitHub (prebuilt lib/ committed — no build scripts run)
dsh plugin --profile web add github:NonchalantLudens/dsh-skin-collection

安装后重启 dsh web。侧边栏底部使用 皮肤 按钮选择皮肤;默认样式恢复原生外观。皮肤也会出现在 Settings → Appearance 中。

包结构要点(便于自查或二次开发):lib/client.js 为随 loader 下发的客户端 bundle;lib/index.js 为 Node 侧 no-op stub;cordis.patch.yml 负责把插件写入 Web roster。

典型用法

日常流程可以概括为:

  1. 按上一节命令安装并重启 Web 服务。
  2. 打开 DSH Web,在侧边栏底部点 皮肤,从九套风格中选一套;需要原生 UI 时选默认样式。
  3. 也可在 Settings → Appearance 中与官方外观选项一并切换。

若你要新增一套皮肤(需改插件源码并自行承担维护),README 给出的步骤是:

  1. 在 lib/client.js 的 EXTRA_SKINS 中追加条目(id、label、theme.tokens、可选 Google Fonts 的 imports、scoped css)。
  2. 注册、选择器菜单、palette 下发与 attribute 守卫均为数据驱动,无需再写样板代码。
  3. 提高版本号后重新安装。

注意:所有皮肤的 Google Fonts @import 会被提升到合并装饰表顶部;应把 @import 放在各皮肤的 imports 数组里,而不是写在 CSS 正文中间。

适用场景与注意

适合谁: 长期在 DSH Web 上调试智能体、希望界面风格与个人或演示场景匹配、又需要一键还原官方 UI 的开发者。

生态说明: DSH 奉行「一切皆插件」;SkillHub 插件目录 是社区站点,与 DeepSeek / 幻方无官方从属关系,不要当作官方应用商店。

安全与权限: 插件随当前 DSH 进程权限运行,会向 Web 客户端注入主题相关逻辑与 CSS。安装前请阅读仓库源码与 MIT 许可证,确认可接受后再在生产环境启用。

依赖: package.json 要求 Node >=18,peer 依赖 @deepseek-ai/cordis ^4.0.1;客户端注入依赖 @deepseek-ai/dsh-client-ui-theme,平台为 web,immediately: true。

结尾

dsh-skin-collection 把多套独立视觉皮肤与侧边栏管理器接到 DSH Web 上,并与官方 Appearance 设置互通;默认样式保证可完整回到 stock UI。目录页:https://www.skillhub.cn/plugins/flyingludens/dsh-skin-collection;源码与说明:https://github.com/flyingludens/dsh-skin-collection。

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

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

小夜