极光鲸鱼背景Alphauni-x/dsh-ds-home-bg

dsh-ds-home-bg

一个用于 DeepSeek Harness Web UI 的深海军蓝极光背景主题：分层径向辉光、细网格，以及一只漂移的半色调鲸鱼。配色会自动跟随宿主 Appearance 设置——没有单独的主题选择器，因此它永远不会与你的浅色/深色选择相冲突。

你将获得

深色调色板

- 基底 #0B1120 深海军蓝黑，仅应用于对话视图
- 表面保持中性——输入框、卡片、菜单、侧边栏和对话框保留宿主自身的深灰色（#232324 / #2c2c2e / #353638），因此该主题绝不会让 UI 的一部分染上蓝色而其余部分看起来仍是原版
- 三层辉光 左侧 #1A3870，中央 #4A8AC4 → #2D5F9E，右侧 #2D5F9E → #1A3870，以不同周期缓慢呼吸
- 网格 44 px × 44 px，淡蓝色（rgba(74,138,196,0.06)），在中央 90% 区域可见
- 半色调鲸鱼 一个方点鲸鱼图案，藏于右上角辉光之中，漂浮着

浅色调色板

- 基底 #EEF3FA 带蓝色调的白色，仅应用于对话视图
- 表面保持中性——输入框、卡片和菜单保留宿主默认的 #ffffff
- 更柔和的辉光 #A9C8F0 / #D7E6F9 / #8FB8E8
- 半色调鲸鱼 深蓝色圆点，若隐若现

设置开关

该开关位于 Settings → General 中，一个 Background skin 分组内，紧跟在系统 Appearance 分组之后。

- 调色板始终跟随 Appearance——选择 Dark 即获得深海外观，选择 Light 即获得浅海外观，选择 System 则实时跟随 prefers-color-scheme。该皮肤按设计没有自己的主题选择。
- Background skin 开关——关闭它会隐藏所有装饰（辉光 / 网格 / 鲸鱼）并立即恢复原版背景；重新打开则恢复该皮肤。

状态持久化在浏览器 localStorage 中：

| 键 | 值 | 用途 |
|-----|-------|---------|
| dsh-ds-home-bg-enabled | 'true' / 'false' | 主开关 |
| dsh-ds-home-bg-syspref | 'light' / 'dark' / 'system' | 宿主 Appearance 选择的镜像，用于在皮肤关闭时将 data-ds-dark-theme 交还给宿主 |
| dsh-ds-home-bg-mode | 已弃用 | v7.6 之前的键；在启动时清理 |

安装

一条命令，从 GitHub 安装

dsh plugin --profile web add github:Alphauni-x/dsh-ds-home-bg

重启 dsh web。已在 dsh 0.1.1-rc.2 上完成端到端验证：包被安装，dsh 自动协调 dsh.profile.bundles，并且插件的 cordis.patch.yml 插入项以 - id: ds-home-bg 落地。无需手动编辑 package.json，也无需 allowBuilds 条目——此包以纯 ESM 形式发布，没有构建步骤，因此 pnpm 的 blocked-build-scripts 策略永远不会生效。

如果你想要稳定安装，可以固定一个发布版本：

dsh plugin --profile web add github:Alphauni-x/dsh-ds-home-bg#v0.1.0
github: 规格在安装时解析为某个提交，并且不会被插件市场自动更新（裸的 owner/repo 没有指定任何可供比较的提交）。若要进行原地更新，请发布到 npm，或将预构建的 tarball 附加到 GitHub Release。

如果命令因 git 访问错误而失败，在认定它已损坏之前请先重试——对 github.com 的瞬时 TLS 故障是常见原因，而 dsh 会向任何 pnpm 失败追加一条通用的 allowBuilds 提示，在这种情况下会产生误导。

从本地检出安装

git clone https://github.com/Alphauni-x/dsh-ds-home-bg.git
dsh plugin --profile web add ./dsh-ds-home-bg

当你还想调整调色板时很有用。dsh plugin add 会同时写入依赖项和 dsh.profile.bundles 条目。

卸载

dsh plugin --profile web remove dsh-ds-home-bg
pkill -f "dsh web" && sleep 2 && dsh web

如果命令失败，请手动移除：删除 ~/.dsh/profiles/web/node_modules/dsh-ds-home-bg/，从 ~/.dsh/profiles/web/package.json 的 dependencies 和 dsh.profile.bundles 中删除该条目，然后重启 dsh web。如果 dsh.profile.bundles 中保留了一个名称而其包已不存在，会导致整个配置文件启动失败，并报错 cannot resolve profile bundle。

上架插件市场

应用内市场读取的是一个精选目录，而非直接读取 GitHub。请向 awesome-dsh-plugin 注册表提交一个 PR，为你的包添加一条条目；网站和市场会自动收录它，通常一天之内即可完成。那里的安装优先使用 npm 包，其次是预构建的 GitHub Release tarball，最后才是完整的 GitHub 仓库源码。

配置

追加到 ~/.dsh/profiles/web/cordis.patch.yml：

- id: ds-home-bg
config:
base: "#0B1120"     # background base colour
glow1: "#1A3870"    # lower-left glow
glow2: "#4A8AC4"    # upper-centre glow
glow3: "#2D5F9E"    # lower-right glow
grid: "rgba(74, 138, 196, 0.06)"   # grid line colour
blur: 140           # glow blur radius, px
opacity: 0.45       # overall glow strength
animation: true     # enable breathing animation

配置更改会热重载——保存文件后加载器会重新应用，无需重启。

重启要求

webserver/index-inject 在启动时触发一次，而 Cordis HMR 不会重新注入  行。编辑 index.js 后必须重启：

pkill -f "dsh web" && sleep 2 && dsh web

只有 config: 值会热重载；代码不会。

工作原理

该插件监听 webserver/index-inject，并向索引表推送四行：

| kind | 放置位置 | 字段 | 用途 |
|--------|-----------|-------|---------|
| style |  末尾 | text | 将两套调色板作为 CSS 自定义属性、装饰层样式、开关样式 |
| script（引导） |  末尾 | text | 解析宿主外观意图，守护 data-ds-dark-theme，暴露 window.__dsBgSettings，监听 ds-bg-syspref |
| script（设置） |  末尾 | text | 将背景皮肤分组注入设置对话框；在捕获阶段镜像外观选择 |
| html |  末尾 | html | 辉光装饰  以及半调鲸鱼 SVG |

主题解析（v7.6+）：

- 调色板由 html[data-ds-bg-mode="dark"|"light"] 驱动。该属性是插件的渲染状态，而非用户设置。
- 引导脚本仅读取宿主意图：若存在镜像的外观立方体选择则使用之，否则使用 prefers-color-scheme。
- 当皮肤处于激活状态且需要深色时，data-ds-dark-theme 会被写入  和 ，并由 MutationObserver 守护。当皮肤关闭时，该属性会根据宿主意图交还——插件只清除自己写入的内容。
- 关闭 → html[data-ds-bg-disabled] → 装饰层 display: none。
- 设置注入使用针对对话框的 MutationObserver，因此标签页切换和 React 重新渲染会自动重新注入。

层叠模型（v7.6.5）

这是之前出问题的部分，因此特意记录在案。

- 装饰层位于 z-index: 10。对照当前宿主 UI 实测：内容层为 1 / 2，对话框容器（_overlayLayer）为 20。因此 10 渲染在内容之上、所有弹窗之下——皮肤完全可见，且绝不会遮挡对话框。
- #root { z-index: auto !important } 是必需的：#root 原生为 relative + z-index: 0，这会将覆盖层的 20 困在它自己的层叠上下文中。
- 不要将装饰层重新提升到 99998。任何高于弹窗的值都会迫使你重新提升对话框，而一刀切的 [role="dialog"] { z-index: … !important } 会将设置面板和渲染在其内部的确认对话框折叠为同一值——确认对话框随后会绘制在面板下方，看起来就像一个失效的按钮。
- 不要将其降低到 -1。多个宿主容器会绘制不透明背景（_frame、对话根节点），这会完全遮住装饰层。
- 开关的状态颜色以 .ds-bg-switch[aria-checked="…"] 配合 !important 写入。宽泛的 [class="bg-"] 面板规则会通过子串匹配到 ds-bg-switch，因此需要属性选择器来赢得层叠；源码中也添加了 :not(.ds-bg-switch)。

其他 UI 细节

- 不透明弹窗——对话框为实心（深色 rgba(20,32,60,0.92)，浅色 rgba(249,251,254,0.99)），因此下方内容绝不会透出。
- 弹出菜单（v7.6.3）——宿主为下拉/弹出容器提供了半透明玻璃填充，这会导致深色模式下菜单文字与其后方内容重叠。所有 [role="menu"] 表面均以 8 px 背景模糊处理为不透明。
- 流式状态微光（v7.6.4）—— “Deep diving…” 思考指示器设置了 background-clip: text 并使用透明文字填充，但从未提供 background-image，因此该标签永久不可见。MutationObserver 检测到该元素，并通过内联 !important 注入品牌蓝色渐变以及 ds-bg-shimmer 关键帧，这是唯一能脱离动画上下文的优先级级别。

兼容性

基于 2026-09 的 dsh web 构建进行构建并验证。该插件依赖少量宿主 UI 结构；选择器使用稳定的语义后缀（例如 [class="_themeCube"]），而非每次构建都会变化的 CSS-Module 哈希前缀。

如果未来的 dsh 版本隐藏了皮肤切换开关或错放了装饰层，请首先检查宿主 UI 结构是否发生变化——上述层叠模型通常是罪魁祸首。

这是一个独立的社区主题插件。它不隶属于 DeepSeek，也未获得其认可。

参考资料

- @deepseek-ai/dsh-client-ui-theme —— 捆绑的主题包，webserver/index-inject 的参考实现
- dsh-host-webserver/lib/types/injections.d.ts —— 注入行 schema
- dsh-host-webserver/lib/index.js —— renderRow()，每一行实际是如何发出的

许可证

MIT