前言¶

给 Web 界面换主题，常见做法是直接改构建产物，或者对着一个个组件类名写覆盖样式。前者升级就被冲掉，后者换个版本类名就失效。DSH 的理念是「一切皆插件」，主题这件事同样可以交给插件来做。

下面介绍的 dsh-krill-theme 就是一个纯客户端 CSS 主题插件：一个插件同时覆盖 DSH Web 的深色和亮色两套外观，深色对应深海世界，亮色对应浅海世界，另带一层浮游生物动画背景。不改 dist、不碰组件逻辑。

这是什么¶

dsh-krill-theme 由 i1j 维护，MIT 许可证，当前版本 v1.0.0（2026-08-15）。定位是「浮游主题」：深色模式是深海世界，以光的亮度编码信息重要程度，越重要越亮；亮色模式是浅海世界，以清澈度编码，越重要越清。除配色外，还包含对话栏的浮游生物动画背景、生成期间的深潜（Deep diving…）工作态增强，以及一个水母形状的参数入口。

核心功能¶

双模式一体¶

深、亮两段样式写在同一个样式表里，选择器互斥，跟随系统外观自动切换，不需要手动切主题。

token 级零侵入覆盖¶

DSH Web 的组件统一读取 token。插件只在 body 上重定义约 95+ 个 token 声明（--dsw-alias-* / --dsw-specific-* / --shiki-*），一处生效全站：侧栏、对话栏、dock、浮层、菜单、设置全部跟随。因为不改 dist、不依赖具体组件类名，升级换代时只需要复查 token 键名和 3 个组件哈希类名（wSkVaW_root / Sxvs8a_body / hHd-Xa_root，来自 @deepseek-ai/dsh-client-ui-conversation dist）。

浮游生物动画背景¶

对话栏背景是一层 canvas 绘制的浮游生物动画：预渲染发光 sprite，无任何依赖。粒子由洋流驱动——全体同向漂移，流向和流速周期性变化，个体只有微小的游动扰动，安静、不干扰阅读。系统开启 prefers-reduced-motion 时自动退化为静态帧。

深潜工作态增强¶

生成期间全体粒子以约 40× 流速近乎竖直上冲，叠加约 3.1s 呼吸节奏的周期性涌浪；额外涌出更小更亮的光点；整体亮度 ×1.15；对话栏再叠一层下深上白的竖向渐变辉光脉动。开销方面，预渲染渐变仅在 resize 时重建，每帧只多 1 次 drawImage。

水母参数入口¶

对话栏右上角有一只水母按钮，点击弹出参数面板：粒子数、透明度、流速、流向、摆动、潮汐脉动、深潜倍率等全部可调，实时生效，无需重启。

全站一致的细节¶

侧栏文字降噪；状态色按深海色板统一（成功荧光绿 / 警告深海琥珀 / 错误珊瑚红）；发送按钮深海脉动；代码高亮双模式适配（深色 shiki 荧光系、亮色白底可读系）；markdown 配色段双模式生效。

安装与启用¶

先做社区安装。在 profile 目录（如 ~/.dsh/profiles/web）执行：

dsh plugin --profile web add git+https://github.com/i1j/dsh-krill-theme.git

国内可以用 Gitee 镜像，速度更快：

dsh plugin --profile web add git+https://gitee.com/elite1j/dsh-krill-theme.git

然后把 dsh-krill-theme 加入 profile 的 dsh.profile.bundles。经过上面的步骤，重启 dsh web 主题即生效。

不走 git 安装的话，也可以在 <profile>/package.json 的 dependencies 里手动声明：

{
  "dependencies": {
    "dsh-krill-theme": "link:/path/to/dsh-krill-theme"
  }
}

同时在 dsh.profile.bundles 数组加入 "dsh-krill-theme"，然后在 profile 目录执行 pnpm install，重启 dsh web。

仓库已打上 GitHub dsh-plugin 主题标签，可以通过社区插件搜索（find_dsh_plugin / dsh-recommend 榜单）找到。

需要自行构建的话，先装依赖、跑类型检查，再打包：

pnpm install
pnpm typecheck
pnpm bundle                    # tsdown → lib/index.js + lib/client.js
npx tsc -p tsconfig.build.json # 生成类型

使用与调参¶

浮游生物动画支持三种调参方式。

第一种，加载前配置（例如注入脚本或书签），适合把默认参数固定下来：

window.__DSH_DEEPSEA_PLANKTON__ = { speed: 0.0004, count: 70 }

关闭动画同样是加载前设置：

window.__DSH_DEEPSEA_PLANKTON__ = false

第二种，加载后实时调参，无需重启：

window.__DSH_DEEPSEA__.setPlankton({ speed: 0.001, baseAngle: -1.2 })
window.__DSH_DEEPSEA__.getPlankton()

第三种，在自己的样式表里覆盖 CSS 变量：

:root { --dsh-plankton-speed: 0.0004; --dsh-plankton-angle: -1.2; }

可调参数及默认值（节选）：count=90（--dsh-plankton-count）、opacity=0.32（--dsh-plankton-opacity）、speed=0.0007（--dsh-plankton-speed）、baseAngle=-1.28（--dsh-plankton-angle）、swing=0.18、swingPeriod=55、flowPulse=0.45、flowPulsePeriod=42、diveCountScale=1.6、diveBrightness=1.15、diveGlow=0.22（0 表示关闭）。不想写代码，直接用水母按钮的参数面板调即可。

适用场景与注意¶

适合谁：

• 想要一套同时覆盖深/亮外观、升级不容易坏的主题；
• 希望界面有一点氛围但不干扰阅读——动画透明度低，且支持降级；
• 只要纯深色主题的话，注释样式文件末尾的浅海段即可。

几点注意：

1. 范围：本插件只做主题与颜色。布局类改动（宽对话栏 1360px、用户气泡对齐、隐藏 tool-call 节点、隐藏 reasoning、wide.dock 双栏）由 dsh-wide-dock 插件承接，两者可以配合使用。
2. 亮色模式下粒子仍使用深海荧光色板，不做主题切换；亮色模式默认浅海化。
3. 无障碍：prefers-reduced-motion 时浮游生物动画与深潜动画均退化为静态帧。
4. 机制：样式在 bundle 求值时注入 document.head（幂等 style 守卫），晚于 dist token 样式表加载，同特异性下后写覆盖先写。
5. 安全：插件以当前 dsh 进程的权限运行，安装前请自行检查源码与许可证（本项目为 MIT）。

结尾¶

dsh-krill-theme 的价值在于把「换主题」从改 dist 变成了装插件：一个样式表管两套外观，token 级覆盖把升级成本压到几个键名和类名，动画和调参入口都是可关可调的附加项。

• 目录页（独立社区目录，与 DeepSeek / 幻方无官方从属关系）：https://www.skillhub.cn/plugins/i1j/dsh-krill-theme
• GitHub：https://github.com/i1j/dsh-krill-theme