dsh-skin-blue-whale 🐋

为 dsh Web UI 打造的「蓝鲸跃海」皮肤插件 —— 极简、高级，像桌面壁纸一样安静地铺在界面后面。

效果

• 官网同款蓝白渐变底：浅色模式复刻 DeepSeek 官网 Hero 区的蓝白渐变 （按可访问性要求提亮为 #b9d3ec → 白），叠加缓慢漂移的"流动海水"水汽与 一道横向水光（纯 CSS，无 canvas/WebGL），深色模式自动适配为"夜海"幽光版；
• 官网蓝鲸 logo：使用 DeepSeek 官方鲸鱼 logo 路径，官方蓝 #4D6BFE 主身 + 亮冰蓝鱼肚 + 尾鳍高光 + 眼睛，水花飞溅、涟漪扩散、气泡上升；
• 双场景自适应：
  • 主页（空会话）：鲸鱼把输入框当作海平面破浪而出，贴着输入框顶边 还有一道发光水线；
  • 对话 / 思考中：鲸鱼变为整页居中的底层水印（约 10% 透明度，像 底层印刷），不影响阅读，且从不占据左侧边栏；
• 整套鲸蓝界面令牌：按钮、焦点环、选区、聊天气泡、侧栏、滚动条统一 换成 DeepSeek 蓝鲸蓝（#4D6BFE 系），浅色/深色双调色板自动切换；
• 尊重系统 prefers-reduced-motion（用户偏好减少动效时关闭动画）。

安装

前置要求：Node 20+、pnpm、dsh（0.1.0-rc.6+）。

git clone https://github.com/zenghuizhu69-hub/dsh-skin-blue-whale.git
cd dsh-skin-blue-whale
dsh plugin --profile web add .

安装后重启 Web 服务（dsh web）即可生效。dsh plugin 会把本包以 link: 方式挂进 profile，因此克隆目录请勿移动；移动后重新执行 dsh plugin --profile web add . 即可。

⚠️ 请将本仓库克隆到不含空格的路径（如 D:\plugins\dsh-skin-blue-whale）； 当前 dsh CLI 在路径含空格时转发给 pnpm 的绝对路径不会加引号，会安装失败。

修改插件源码后需要重启 dsh web 才会加载新版本。

卸载

dsh plugin --profile web remove dsh-skin-blue-whale

卸载后重启 Web 服务：背景层、鲸鱼与整套令牌覆盖会全部还原为基础样式。

实现说明

• 这是一个 dsh 插件包（bundle）：package.json 声明 dsh.bundle.patch（cordis.patch.yml 向插件树插入皮肤行）与 dsh.client（浏览器侧客户端模块，platform: web）。
• 浏览器半边通过 window.__ModuleLoader__.load 注册为静态客户端模块， 注入 theme 与 sessions 服务：
  • theme.overrideTokens() 叠加整套 --dsw-alias-* 令牌覆盖层 （每个令牌提供 { light, dark } 两个值）；
  • sessions.list 快照区分空会话/活跃会话，驱动 hero/work 双场景；
  • 运行时通过框架自身的 grid-template-columns 内联样式与 [data-shell-overlay] 锚点测量侧栏宽度与输入框顶边（海平面）， 不依赖任何哈希类名。
• 鲸鱼与场景的颜色全部走 CSS 类上色（而非 SVG 呈现属性里的 var()）， 杜绝呈现属性回退成黑色的兼容性问题。
• 插件卸载时令牌层、DOM、样式、监听器全部自动还原，无残留。

文件

致谢

• 鲸鱼造型：DeepSeek 官方 logo 路径（取自 dsh 内置前端 favicon）；
• 底色渐变：DeepSeek 官网 Hero 区蓝白渐变（#9cc1e7 → rgba(250,250,250,0)）。

License

MIT