dsh-theme-neumorph:为 DeepSeek Harness 网页界面换上新拟态皮肤

前言

长期在 DeepSeek Harness(DSH)里调试智能体时,界面是否顺眼往往不影响功能,却会影响长时间盯屏的疲劳感。不少开发者会直接改浏览器样式,或装全局主题扩展,但这些做法容易误伤页面结构,也难和 Harness 自带的浅色、深色切换对齐。DSH 生态把能力拆成可插拔的 bundle;在「趣味换装」类目下,维护者 wcnmamrs 提供了 dsh-theme-neumorph,专门给 Harness 网页端套一层新拟态(neumorphism / soft UI)视觉:冷灰表面、钢蓝强调、成对的柔和阴影,且停用后可回到原生外观。

这是什么

dsh-theme-neumorph 是一个 DSH 主题类插件(npm 包名同仓库名,当前清单版本 1.0.1,许可证 MIT)。它不改业务逻辑,只覆盖 Harness 自绘 UI 的颜色 token,并额外注入一层阴影样式表,使卡片、输入区、侧栏等控件呈现浮雕感。浅色与深色模式共用一套设计逻辑:浅色底以冷灰 #e0e5ec 为主,深色底切换为 #262b31,强调色在深色下变为 #7ea6c9。

社区目录页:skillhub.cn/plugins/wcnmamrs/dsh-theme-neumorph。源码与说明:github.com/wcnmamrs/dsh-theme-neumorph。

核心能力:颜色层与阴影层

README 把实现拆成两层,彼此独立,也都可以单独回退:

层 手段 作用
颜色层 ctx.theme.overrideTokens() 覆盖 72 个 --dsw-* 颜色与圆角 token(表面、按钮、代码面板、浮动层、边框、文字、品牌色、状态色、圆角刻度等)
阴影层 注入一张 <style> 新拟态依赖成对软阴影,token 侧只能承载颜色,因此阴影单独维护

配色基线(资料原文):

  • 表面:冷灰 #e0e5ec 系;强调:钢蓝 #4a6b8a(深色模式为 #262b31 / #7ea6c9)
  • 高光 rgba(163,177,198,.6) 与暗部 #ffffff 组成双缘阴影;深色模式改用低透明度白光与深黑

浮雕刻意落在四处:卡片柔和投影、输入区内凹、输入区大板与菜单/对话框的双向浮雕、侧栏沟槽。整宽且背景透明的控件(列表行、菜单项、分段控件)不加投影,避免圆角外出现「幻影边线」。

边界:只动宿主界面

主题规则按 Harness CSS Module 的整类名锚定(例如 [class$="_card"]),不按裸标签(span、button)生效。第三方插件常用 dshwv-*、BEM 等命名,不会被命中;卡片内部子节点也不会因子串匹配(如 _cardContent)被误改。README 明确:主题只动宿主自己画的界面,不碰第三方插件。

Client 半通过 window.__ModuleLoader__.load({ id, factory }) 注册,factory 返回 { inject: ['theme'], apply(ctx) }。副作用包在 ctx.effect() 里并返回清理函数——停用时撤销 token 覆盖并移除样式表。若宿主拒绝含 --dsw-radius-* 的 token 表,会自动退回仅含颜色的 58 项重试。

package.json 中 dsh.client 声明:platform: "web"、immediately: true,并 inject 依赖 @deepseek-ai/dsh-client-ui-theme;bundle 通过 cordis.patch.yml 写入 profile 的 Loader 树。无需额外配置文件字段。

安装与启用

已抓取资料中未给出统一的 dsh plugin add … 安装命令行原文。实际接入应以待装环境所用的 DSH 插件安装流程为准,并以目录页与仓库为准核对包名与版本:

安装前应阅读 client.js 与 LICENSE,确认接受 MIT 条款及注入行为。插件随当前 dsh 进程权限在浏览器端执行样式覆盖,与装任意 DSH 插件相同,不应在未审源码的情况下用于高敏感环境。

典型用法与验证

启用后,因 immediately: true,Client 会在 Web 端尽早加载并对当前 Harness 会话生效;切换系统或应用内的深浅色模式时,配色会按 README 描述的基线自动切换。若不再使用,在 DSH 中停用或移除该插件即可,清理函数会恢复原生 token 与 DOM 中的阴影样式表。

维护者在仓库内用 Node 自带测试做不依赖浏览器的校验,可作为二次评估参考:

npm test                    # 7 项断言:调色板、样式表结构、卸载路径
npm run check               # 语法检查
node scripts/verify-manifest.mjs   # 清单/打包自检
npm run verify              # 以上全部

要求 Node >= 20(见 package.json 的 engines)。

适用场景与注意

适合:长期在 Harness Web UI 里工作、希望界面统一为新拟态风格、又需要与原生深浅色并存的开发者。不适合:指望改主题就能调整智能体逻辑或第三方插件布局的场景——本插件明确不覆盖插件自绘 UI。

SkillHub 等社区目录与 DeepSeek / 幻方无官方从属关系,安装来源请以你信任的目录条目与 GitHub 提交历史为准,勿把第三方页面等同于官方应用商店。

结尾

dsh-theme-neumorph 把 DSH 网页端收成冷灰 + 钢蓝的新拟态皮肤,用 token 覆盖与独立阴影层解决「颜色能 token 化、阴影不能」的实现分工,并用 CSS Module 整类名锚定降低对生态内其他插件的干扰。需要看图或细节时,打开仓库 README 中的截图与目录结构说明即可。

  • 目录页:https://www.skillhub.cn/plugins/wcnmamrs/dsh-theme-neumorph
  • GitHub:https://github.com/wcnmamrs/dsh-theme-neumorph
羽毛球分组比赛记分
小程序二维码

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

小夜