前言¶
DSH 的原生界面是一套规整的灰白 / 深灰配色,功能上够用,但要长期对着它写代码、跑会话,界面容易显得「没有自己的工作环境」。如果你想要一层更具体的视觉氛围,但又不想改任何交互逻辑,下面介绍的这个插件可以作为一条低成本路径。
diy 皮肤的做法通常是自己写一份 CSS 覆盖宿主样式,问题在于深浅色切换、WebGL 背景、与宿主原生主题开关同步这些事要单独实现,而且改完还得处理资源释放。dsh-official-skin 把这部分做成了标准 DSH 插件:给 Web 界面换上两层「官网质感」的视觉,深色是深蓝宇宙感(流体极光 + 粒子鲸鱼 + 星座网格),浅色是官网首页 hero 的蓝色渐变加琉璃玻璃面板,并跟随 DSH 自己的外观设置一键切换。
它是非官方社区插件,维护者是 Klein(GitHub 账号 kleinklein0824),当前版本 1.1.6,许可证为 MIT。
这是什么¶
一句话:一个只改视觉、不改行为的 DSH 皮肤插件。
- 维护者:Klein(
kleinklein0824) - 分类:趣味换装
- 当前版本:
1.1.6(README 与package.json中一致) - 许可证:MIT © 2026 Klein
- 平台:DSH Web 与 DSH Desktop,包内声明
dsh.client.platform = "web",桌面端通过应用内嵌的 Web 界面加载同一套客户端实现 - 渲染:WebGL2(极光与鲸鱼);不可用时自动降级为纯 CSS 背景
- 归属:非官方社区插件,与 DeepSeek 官方无隶属或背书关系;DeepSeek 名称、鲸鱼图形及相关品牌素材的权利归各自权利人,不在 MIT 授权范围内,具体见仓库
NOTICE.md
它解决的痛点很具体:DSH 原生配色偏平,缺少层次;自写 CSS 覆盖时深浅色切换和主题同步要自己维护,且容易遗漏 WebGL 上下文的释放。本插件把这些都做进了标准插件结构里。
核心功能¶
深色主题:深蓝宇宙感¶
深色模式由四层叠加:
- 底色:
radial-gradient(165% 115% at 50% -8%, #14385c 0%, #102a45 22%, #0b1a2b 45%, #080f18 70%, #06080c 100%),顶部中深蓝、底部近黑,整屏有纵深。 - 流体极光:WebGL flowmap,思路参考 deepseek.com 首页的流体效果,由本项目重新移植、压暗后适配 DSH 的层级,压到
brightness(0.36)用screen叠加,只留一层缓慢流动的冷蓝 / 琥珀光。 - 粒子鲸鱼:GLSL 粒子构成的 DeepSeek 鲸鱼 logo,白点发光,鼠标移动有视差反应。
- 星座网格:冷白光点加细连线(
rgba(190,214,255),线 0.16 / 点 0.26),像一层很淡的星图。
浅色主题:官网 hero + 琉璃玻璃¶
- 底色:
linear-gradient(180deg, #9cc1e7 0%, rgba(250,250,250,0) 100%), #f9f8f8,官网首页同款蓝色 hero。 - 粒子鲸鱼:白色粒子,
normal混合,不抢文字。 - 玻璃拟态:侧边栏、输入卡片、消息气泡、代码块统一使用
backdrop-filter: blur() saturate()加内侧高光边,做出「一层玻璃」的厚度,而不是一团半透明灰。
共同保证¶
- 不干扰功能面板:对话框、菜单、列表、模态(
[role=dialog|menu|listbox]、[aria-modal])保持原生不透明,不会被背景「穿透」成半透明。 - 切换丝滑:两层底色交叉淡入 300ms,切换瞬间暂停 WebGL 循环 360ms,避免和合成抢主线程。
- 不泄漏资源:每次重载都会调用
WEBGL_lose_context.loseContext()释放旧上下文、停掉旧 RAF、摘掉旧 DOM。 - 不改交互:插件只操作背景层和面板视觉,不改对话框、菜单、列表的任何交互逻辑。
安装与启用¶
环境要求¶
| 项目 | 要求 |
|---|---|
| DSH Web / Desktop | ^0.2.1-rc.5 \|\| ^0.2.2-rc.1 |
| 插件 Node.js | >=20 |
DSH 0.2.2-rc.1 CLI 宿主 |
>=24.9.0 |
| 渲染 | WebGL2(不可用时自动降级) |
低于 0.2.1-rc.5 或进入 0.3.x 的宿主不在声明范围内。兼容范围同时写在 package.json 的 engines.dsh 中。
方式一:DSH Desktop(推荐)¶
打开 DSH Desktop,进入 插件 → 添加插件,输入版本号:
dsh-official-skin@1.1.6
确认安装后,按应用提示启用插件,并完全退出、重新打开 DSH Desktop。桌面端的安装、启用和重启都由应用管理。
如果当前桌面版的 npm 安装不可用,也可以改用 GitHub 目标:
github:kleinklein0824/dsh-official-skin
方式二:DSH Web 直接安装¶
终端执行:
dsh plugin --profile web add "dsh-official-skin@1.1.6"
安装完成后刷新 DSH Web,或重新执行 dsh web。
方式三:通过 dsh-market 插件市场安装¶
先安装并启用 dsh-market(npm 包名 dshmarket):
dsh plugin --profile web add "dshmarket@latest"
然后打开 插件市场 → 发现 或 主题,搜索 dsh-official-skin,安装或更新后按宿主提示重新加载。
两点注意:
- dsh-market 已将本仓库关联到 npm 包
dsh-official-skin,会优先从 npm 安装;仅推送 GitHub 不会更新市场用户安装到的 npm 包。 - 也可继续使用独立的 DSH 皮肤市场插件
dsh-skin-market,两者是不同插件,安装来源和更新方式以各自条目为准。
本地调试(仅开发时用)¶
cd ~/.dsh/profiles/web
pnpm add link:"<本仓库的绝对路径>"
再把包名加进 profile 的 package.json:
{
"dsh": {
"profile": {
"bundles": ["...", "dsh-official-skin"]
}
}
}
重启 DSH 生效。
卸载¶
dsh plugin --profile web remove "dsh-official-skin"
典型用法:跟随 DSH 外观设置切换¶
这个皮肤不自己做主题判断,它跟随 DSH 自己的主题开关。典型流程是:
- 打开 设置 → 通用设置 → 外观,选「深色 / 浅色 / 跟随系统」。
- DSH 把选择写到
<body data-ds-dark-theme>上。 - 插件用
MutationObserver加 2.5s 兜底对账监听这个属性,把背景层、鲸鱼、极光、玻璃全部切到对应那一套。
对应关系如下:
| 你在 DSH 里的操作 | 皮肤的反应 |
|---|---|
| 外观 → 深色 | 深蓝渐变 + 极光 + 鲸鱼 + 星座 |
| 外观 → 浅色 | 蓝色 hero + 白鲸鱼 + 玻璃面板 |
| 外观 → 跟随系统 | 系统切深浅时,皮肤同步切换 |
右上角那颗按钮是同一件事的快捷入口:它调用 DSH 的 theme 服务 setTheme("dark" | "light"),等价于你在设置里点一次。所以按钮切换后,设置页里的「外观」选项也会跟着变——两者是同一个状态,不存在两套开关。
如果在 DSH 底部看到「重新连接中…」,此时客户端拿不到 theme 服务,点按钮不会立刻生效(这是宿主断链,不是按钮坏了),重连完成后会自动应用。
源码结构与调参¶
插件是标准 DSH 结构:package.json 里的 dsh.bundle.patch 让宿主把 cordis.patch.yml 插进 cordis 树,dsh.client.platform = "web" 让 lib/client.js 被 dsh-client-modules 扫出来、编进 window.__DSH_BOOT__,在页面加载时一次性注入。皮肤本体是 lib/client.js,lib/index.js 只做宿主侧的静态审计,不抛错。
背景分层:
#dsh-ds-bg (position:fixed; inset:0; z-index:-1)
├─ #dsh-ds-bg-light 蓝色 hero 渐变 ← opacity 由 .dsh-ds-dark 切换
├─ #dsh-ds-bg-dark 深蓝 radial 渐变 ← opacity 由 .dsh-ds-dark 切换
├─ #dsh-ds-aurora WebGL 流体极光(canvas)
├─ #dsh-ds-constellation 星座网格(canvas)
└─ #dsh-ds-whale 粒子鲸鱼(canvas, screen 混合)
主题切换只改两层 opacity 和三个 canvas 的显示状态,不重建 DOM、不重新编译着色器。
想改视觉不用读完整份代码,参数都集中在 lib/client.js:
以下为 README 提供的默认值对照,改之前先核对当前版本的
client.js。
| 想改什么 | 搜什么 | 默认值 |
|---|---|---|
| 深色底色 | dsh-ds-bg-dark 的 radial-gradient |
#14385c → #06080c |
| 极光强度 | #dsh-ds-aurora 的 filter |
brightness(0.36) saturate(1.45)(>0.4 会发灰) |
| 星座亮度 | DARK_CONSTELLATION / LIGHT_CONSTELLATION |
线 0.16 / 点 0.26 |
| 鲸鱼透明度 | whaleLayer.style.opacity |
深色 1、浅色 0.72 |
| 切换速度 | transition: opacity .3s(四处)、dsAnimPauseUntil |
300ms / 360ms |
| 玻璃强度 | body:not([data-ds-dark-theme]) 下的 rgba(255,255,255,…) |
0.18 ~ 0.20 |
改完 lib/client.js 后必须重启 DSH 应用(关闭后重新打开):客户端代码是页面加载时注入的,桌面端按 Ctrl+R / F5 不会重新 import(README 注明实测无效),set_plugin 启停同样不会重新 import。
兼容性与注意事项¶
已验证范围¶
- 声明范围:DSH Web / Desktop
^0.2.1-rc.5 || ^0.2.2-rc.1。0.2.1-rc.5已有实机验证,Desktop 使用同一套内嵌 Web 客户端。 0.2.2-rc.1:已核对宿主兼容检查、模块加载器、主题服务、主题属性和按钮插槽;并在 Chromium 夹具中检查加载、深浅色切换和重复加载。这不等同于完整 DSH Web / Desktop 场景回归,升级后仍应检查会话切换、输入框与其他插件面板。- 具体证据见仓库
docs/compatibility.md。
WebGL2 降级¶
极光与鲸鱼依赖 WebGL2;不可用时自动降级为纯 CSS 背景,界面仍可用。
宿主升级风险¶
主题判断与主要定位优先使用 [data-ds-dark-theme]、[data-slot] 等属性;部分视觉修补仍使用宿主的哈希类名,因此宿主升级后仍需检查实际显示效果。
常见问题¶
- 点了右上角按钮没反应:底部出现「重新连接中…」时,客户端拿不到
theme服务,点击会被静默丢弃;等连接恢复后再点即可。 - 改了
client.js但界面没变:客户端 bundle 是页面加载时注入的,必须重载页面或重启应用。 - 控制台报
Too many active WebGL contexts:Chromium 对同时存在的 WebGL 上下文有上限。本插件已在重载时主动释放旧上下文;若仍出现,通常是别的插件也在开 GL 上下文。
性能与稳定性¶
- 切换会话和工作区时优先保证首帧显示,避免不透明底板短暂盖住背景。
- 深度界面扫描分帧执行,聊天流式输出时不会因反复全量扫描而明显卡顿。
- 弹窗打开时暂停背景动画,关闭后自动恢复。
- 输入框玻璃模糊移到独立图层,鼠标停在发送键上时不再持续闪烁。
- 插件重载时会清理旧实例,避免动画叠层和资源泄漏。
适用场景与注意¶
适合谁:
- 长期在 DSH Web / Desktop 里工作的开发者,想把默认灰白界面换成有层次、有氛围的视觉,又不想动交互。
- 希望皮肤跟随 DSH 原生外观开关(含「跟随系统」)、而不是自己维护一套独立主题逻辑的人。
- 想看一份结构清晰的皮肤实现源码,学习
dsh.bundle.patch+dsh-client-modules注入方式的人。
注意事项:
- 权限与来源:插件以当前 dsh 进程权限运行,属于社区第三方项目,安装前应先读一遍源码(重点是
lib/client.js与lib/index.js),确认许可证为 MIT,并检查其对页面 DOM 的实际影响。 - 兼容性:仅在声明的宿主版本范围内使用;
0.2.2-rc.1的验证是夹具层面的,升级宿主后请自行回归会话切换、输入框和其他插件面板。 - 资源占用:极光、鲸鱼、星座是 WebGL2 渲染,低端设备或多插件同时开 GL 上下文时需留意显存,必要时在
lib/client.js里调低极光强度或关闭某些层。 - 非官方身份:这是非官方社区插件,与 DeepSeek / 幻方无官方从属关系;社区目录站点同样不是官方应用商店。
结尾¶
这个插件的价值在于把「官网质感皮肤」这件事做成了标准 DSH 插件:视觉分成背景层与玻璃面板两层,主题切换只改 opacity 和 canvas 显示状态,并跟随 DSH 原生外观开关,避免了自写 CSS 覆盖时常见的深浅色同步和资源泄漏问题。
相关链接:
- 社区目录页:https://www.skillhub.cn/plugins/kleinklein0824/dsh-official-skin
- GitHub 仓库:https://github.com/kleinklein0824/dsh-official-skin