前言¶

在 DSH（DeepSeek Harness）里跑 Web 端会话时，界面外观由宿主内置的浅色、深色与跟随系统偏好驱动。若你只是想换一套更可预期的设计规范配色与圆角、阴影、动效节奏，又不想 fork 一整套主题或和布局类插件抢样式优先级，单独做一个「叠在现有主题之上的 token 层」会更稳妥。下面介绍社区插件 dsh-web-m3e（维护者 androidly，GitHub 星标 0），它把 Google Material 3 Expressive（M3E）的配色与几何令牌接到 DeepSeekRuntime Web UI 上，分类落在社区目录的「趣味换装」。

这是什么¶

dsh-web-m3e 是面向 DeepSeekRuntime Web UI 的浏览器端 bundle 插件（当前文档版本 1.5.1，MIT 许可）。它不注册全新主题名，而是通过 theme.overrideTokens() 在当前主题之上叠一层设计令牌与补充样式表，因此宿主自带的「浅色 / 深色 / 跟随系统」仍可独立工作；关掉配色开关或卸载 bundle 后，图层与样式表会一并撤除，外观回到原生。

宿主半边 index.js 为空实现，主要逻辑在 client.js，经 package.json 的 dsh.client 声明注入 @deepseek-ai/dsh-client-ui-theme，并在设置页 settings.general.item 槽注册一行入口。

核心能力¶

设计令牌层¶

client.js 中的 ROLES、ALIASES、DESIGN 负责三部分映射：

1. 55 个 Material 3 颜色角色（如 --dsw-m3e-primary、--dsw-m3e-surface-container，浅/深各一套）。
2. 将宿主调色板 114 个 --dsw-alias-* 别名指向上述角色，含文档预览、代码 diff、空状态插画等边角场景，合计 197 个 token。
3. 覆盖宿主已用的几何与动效原语：--dsw-radius-*（4/8/12/16/28）、--dsw-elevation-*（对应 md.sys.elevation 的 level 1/3/5）、--ds-ease-in-out 与 --ds-transition-duration*（100/200/300ms）、焦点环宽度 2px 调整为 3px 等。

配色数值来自 @material/material-color-utilities@0.4.0（默认种子 #6750a4，SchemeTonalSpot），形状与动效对齐 @material/web 的 md.sys 规范；仓库提供 .check/contrast.mjs 做 WCAG AA 配对检查。插件不改字体与布局，避免聊天区行距被 typescale 重排拖垮。

样式表层（token 无法表达的部分）¶

在 token 之外，样式表还处理了例如：

• corner-shape: squircle（依赖 Chromium 139+，旧内核回退普通圆角）。
• 输入区按 M3 filled text field：tonal 容器、聚焦抬升；发送按钮改为 M3 填充按钮并修正深色下前景色可读性。
• 按压反馈：spring 缩放与 M3 state layer；触摸端 safe-area、pointer: coarse 下输入字号与图标命中区等。
• 浮层菜单：不透明 tonal 容器、去掉 40px 背景模糊、level 2 阴影、44px（触摸 48px）行高等，与宿主 Menu 的自定义属性协作，不复制 DOM。
• 对话框入场：通过 MutationObserver 在首帧前写入 --m3e-origin-x/-y，从点击位置做 scale(0.84)→1 展开；退场因宿主 React 卸载方式不做 CSS 过渡；prefers-reduced-motion 下整体关闭动效。

设置入口¶

路径：设置 → 通用 → 外观（插件在「语言」与宿主「外观」之间插入一行，order: 9，标题「Material 3 主题」）。

• 明暗：三个方块调用 theme.setTheme()，写入宿主偏好，刷新后保持。
• Material 3 配色：开关控制本插件 token 与样式表；状态保存在 localStorage 的 dsh-web-m3e.enabled。

若只想改明暗、不动 M3 图层，仍可使用宿主原有「设置 → 通用 → 外观」。

安装与启用¶

插件在 dsh 会话里通过 plugin_manager 安装，命令须与仓库 README 一致：

本地 bundle：

# 在 dsh 会话里
plugin_manager action=install_bundle target=/绝对路径/dsh-web-m3e

从 GitHub 安装（发布后）：

plugin_manager action=install_bundle target=github:androidly/dsh-web-m3e

也可把 bundle 写进 profile 的 bundles 列表。标准结构为 package.json → dsh.bundle.patch → cordis.patch.yml → insert: web-m3e，浏览器端由 exports["./client"] 与 dsh.client 发现。

安装后打开 Web UI，进入设置 → 通用，找到「Material 3 主题」，打开「Material 3 配色」即可看到叠层效果；明暗可与开关分开调节。

典型用法与关闭层次¶

经过上面的步骤启用后，日常只需在设置里切换明暗或 M3 配色开关。若要定制品牌色，不要手改 ROLES 中单色；应按 README 用 @material/material-color-utilities 换种子重新生成整表，再写回 client.js 的 ROLES（ALIASES 中的 var(--dsw-m3e-*) 会自动跟随）。同一 seed 可换 SchemeExpressive 或 SchemeFruitSalad 等方案变体。

关闭分为三档，按需要选择：

1. 关掉「Material 3 配色」：仅停叠层，插件仍装载，状态会记住。
2. 插件管理里禁用「Material 3 主题」：整包停用，设置行消失。
3. 从 profile 移除 dsh-web-m3e：彻底卸载；disposer 挂在插件 fiber 上，禁用后立即恢复原生配色。

适用场景与注意¶

适合希望在 DSH Web 会话里统一 M3/M3E 观感、又不愿改动布局结构的开发者。它与布局类插件意图正交：只改配色与几何令牌，不写布局规则，降低样式互相覆盖的风险。

使用前请注意：

• 插件在当前 dsh 进程权限下运行，安装前宜通读 GitHub 仓库 源码与 MIT 许可证，确认符合你的环境策略。
• corner-shape: squircle 在 Firefox/Safari 上为普通圆角；窄屏重排需另配布局插件。
• 设置行文案跟 navigator.language（zh 前缀为中文），未接入宿主 i18n 字典。

结尾¶

dsh-web-m3e 用「override token + 薄样式表」的方式，把 Material 3 Expressive 的配色、菜单浮层与触摸细节叠到 DeepSeekRuntime Web UI 上，明暗仍由宿主管，一键可退。社区目录页：https://www.skillhub.cn/plugins/androidly/dsh-web-m3e；源码与详细设计说明：https://github.com/androidly/dsh-web-m3e。