前言¶
DeepSeek Harness（DSH）的 Web 界面默认主题相对固定。若你长时间在 Harness 里调试智能体、查看对话轨迹，纯色背景与统一控件样式容易显得单调，也不利于区分侧边栏、对话卡片与输入区等不同区域。
社区里已有不少「换肤」类做法，但多数只能改单一背景图或全局色调，很难精细控制各 UI 部位的透明度与模糊。下面介绍的 dsh-any-background 是 maintainer Tkingxiao 维护的 DSH 外观插件（SkillHub 分类：趣味换装；GitHub 约 16 stars），面向 Web 端，把主题色、壁纸与分部位透明度/模糊度放在同一套设置面板里统一管理。
这是什么¶
dsh-any-background 是一个 DeepSeek Harness 外观插件，当前版本 0.2.1，MIT 许可。它解决的核心问题是：在不改 Harness 源码的前提下，自定义 Web UI 的主题色、背景壁纸（图片或视频），并对主背景、侧边栏、卡片面板、输入框与控件、设置面板等部位分别调节透明度与毛玻璃模糊。
配置写入文件系统 ~/.dsh/.dsh-any-background-data/，不依赖 localStorage；界面支持中英文自动切换。插件还带有主题守护机制，宿主重置主题后会重新激活自定义样式。
核心功能¶
主题色¶
- PS 风格色轮：在色相环上选色，在内嵌方形调节饱和度与明度，实时生成 30+ 个 CSS 设计令牌。
- 精确 HSL / RGB 输入：数值与色轮双向同步。
- 智能取色：一键从壁纸可见区域采样并量化像素，剔除灰色/近黑/近白，选出鲜亮色作为主题色；视频壁纸会自动截帧参与。纯客户端完成。
- 吸管取色：在壁纸上悬停预览，点击即可设为主题色。
背景壁纸¶
- 图片壁纸：上传任意图片，在视口比例的编辑器中拖动平移、滚轮缩放。
- 视频壁纸：静音循环播放，刷新不丢失（落盘持久化 + HTTP 流式播放，支持 Range seek）；自动截帧用于预览、取色与位置编辑。
- 位置编辑器：图片与视频共用拖动/缩放/重置操作，但位置状态各自独立保存。
- 布局模式：适应 / 填充 / 拉伸 / 平铺 / 居中五种，图片与视频通用。
- 动态生成背景：网格渐变、Shader、几何图案，可调节扩散范围、色彩强度并锁定种子。
界面透明度与模糊¶
- 分部位透明度：主背景、侧边栏、卡片面板（含对话框周围的下拉菜单与弹层）、输入框与控件（发送框、Cordis 插件面板）、设置面板与壁纸，各自独立滑块。
- 分部位模糊度：每个部位可设 0–60 px 的
backdrop-filter毛玻璃效果；发送框与 Cordis 面板通过宿主稳定选择器（如[data-composer-card]、[data-cordis-panel]）获得真实背景模糊。 - 对话视图卡片：消息列表自动包裹为半透明卡片；轨迹页可整页调节透明度与模糊，让壁纸从内容后方透出。
配置分享与持久化¶
- 导出 / 导入：一键导出为自包含的
dsh-any-theme.json（配置 + 壁纸，视频以 data URL 内嵌），可在其他环境导入还原。 - 大视频上传：走 HTTP 二进制 POST 流式落盘，不经过 base64 绕行 RPC，避免通道 body 上限。
安装与启用¶
推荐通过 DSH 插件命令安装（来源：GitHub README 与 SkillHub 目录页）：
dsh plugin --profile web add github:Tkingxiao/dsh-any-background
若插件已发布到 npm registry，也可使用：
dsh plugin --profile web add dsh-any-background
安装完成后启动 Web 端：
dsh web
插件会出现在设置面板的 「主题」 分类中。
未全局安装 DSH 时，可用 npx：
npx @deepseek-ai/dsh plugin --profile web add github:Tkingxiao/dsh-any-background
npx @deepseek-ai/dsh web
本地开发构建（lib/ 已提交，一般无需构建；修改 src/ 后需重新 bundle）：
git clone https://github.com/Tkingxiao/dsh-any-background.git
cd dsh-any-background
pnpm install
pnpm run bundle
pnpm dsh plugin --profile web add "dsh-any-background"
pnpm dsh web
典型用法¶
经过上面的安装步骤，打开 dsh web 后进入设置面板 「主题」 即可操作。常见流程如下：
- 设壁纸：上传图片或视频，或在「动态生成背景」里选网格渐变 / Shader / 几何图案；用位置编辑器拖动平移、滚轮缩放，选适应/填充/拉伸/平铺/居中之一。
- 定主题色：用色轮或 HSL/RGB 输入精确设色；也可点「智能取色」从壁纸提取，或用吸管在壁纸上点选。
- 调界面层次：分别拖动主背景、侧边栏、卡片面板、输入框与控件、设置面板等透明度滑块；按需为各部位加 0–60 px 模糊，形成毛玻璃效果。
- 备份与迁移：满意后导出
dsh-any-theme.json；在新环境通过导入还原整套配置（含壁纸与内嵌视频）。
导出文件为自包含 JSON，适合在多台机器或团队成员之间分享同一套视觉方案。
适用场景与注意¶
适合谁
- 长期在 DSH Web 端开发、调试智能体的开发者，希望界面更易区分区域、减少视觉疲劳。
- 需要统一团队 Harness 界面风格、并通过 JSON 导出/导入分享配置的场景。
- 想用视频或动态生成背景，又不想手动改 CSS 的用户。
兼容性
dsh web：完全支持（见 README「兼容性」一节）。- deepseek-harness-desktop：README 注明支持，但 Electron 打包问题可能导致左侧边栏与中心区域透明度显示相反，需等待桌面端更新修复。
安全与权限
DSH 插件以当前 dsh 进程权限运行，可读写本地文件（本插件将数据存于 ~/.dsh/.dsh-any-background-data/）。安装前建议查看 GitHub 源码 与 MIT 许可证，确认符合你的安全策略。
SkillHub（目录页）是社区插件目录，与 DeepSeek / 幻方无官方从属关系；DSH 生态理念是「一切皆插件」，本插件即其中一例。
结尾¶
dsh-any-background 把主题色色轮、图片/视频壁纸、分部位透明度与模糊、配置导出导入收进 Harness Web 设置面板，适合需要精细控制 Web 端外观的 DSH 用户。
