ManuSpurs/dsh-skin20260814

dsh-skin

DeepSeek Harness 的皮肤切换器 + 自定义壁纸——一个秉承 Codex 主题精神的“换肤”功能。它把一组精选的调色板注册到 DSH 内置的主题运行时中，并在设置 → 通用中新增两行（位于内置的“外观”行下方）：

- 皮肤 / Skins——从 7 款精选调色板中选择一款（或选择默认 / Default 以跟随内置外观）。
- 背景图片 / Wallpaper——设置你自己的背景图片，并可控制透明度和模糊。

两项选择在重新加载后都会保留（localStorage）。

工作原理

DSH 的主题系统基于 token：Web 外壳提供 --dsw- 设计 token，而 ThemeRuntime 允许第三方插件注册主题，按配色方案覆盖别名层（--dsw-alias-）。本包是一个常规的双面插件：

- 宿主端（lib/index.js）——一个 dsh.bundle 补丁层，插入一个加载器条目（skin）；一个空操作的 apply，与随附的 ui-* 包完全一致。
- 浏览器端（lib/client.js）——一个 dsh.client 包（通过 /plugins/dsh-skin/client.js 提供），它会：
1. 通过 ctx.theme.register(...) 注册 7 款精选皮肤；
2. 恢复已保存的皮肤 id，并通过 ctx.theme.setTheme(...) 应用它；
3. 将壁纸渲染为固定的背景层（z-index: -1），并叠加一个 token 覆盖（ctx.theme.overrideTokens），使主画布（--dsw-alias-bg-base）和侧边栏（--dsw-specific-sidebar-fill）变为半透明，从而让图片透出，同时内部表面（卡片、输入框、气泡）保持不透明且可读；
4. 使插槽存储与 theme/change 保持同步（并在当前皮肤或浅色/深色方案变化时重新调整壁纸色调）；
5. 将两行挂载到 settings.general.item 中。

每款皮肤都会设置其 colorScheme（light/dark），它驱动 body[data-ds-dark-theme]，此外还有由 ui-layout 的 ThemePresenter 作为内联自定义属性应用到  上的别名 token 覆盖。

皮肤

| id        | 方案   | 风格                              |
|-----------|--------|-----------------------------------|
| ocean   | 深色   | DeepSeek 蓝深海                   |
| graphite| 深色   | 中性单色                          |
| forest  | 深色   | 绿色宁静                          |
| sunset  | 深色   | 暖紫色                            |
| midnight| 深色   | 纯黑 OLED                         |
| paper   | 浅色   | 暖色纸张                          |
| sakura  | 浅色   | 粉色点缀                          |

选择默认 / Default 会恢复为内置外观（跟随系统）并清除已保存的皮肤。

壁纸

在设置 → 通用 → 背景图片 / Wallpaper中：

- 选择图片 / Choose image——选择一张本地图片；原始文件按原样存储（IndexedDB，不重新压缩）并以完整质量显示，仅保存在此浏览器中。
- 透明度 / Opacity 和 模糊 / Blur 滑块用于调整图片在 UI 背后的呈现方式。
- 移除图片 / Remove 会清除它。
壁纸位于 z-index: -1 的固定层上，因此只能透过半透明的主画布和侧边栏看到；消息界面保持其不透明背景以确保可读性。它还会跟随你当前皮肤色调（切换皮肤会重新调整半透明表面的色调）。

持久化

壁纸图片以原始质量存储在 IndexedDB 中（原始 Blob——浏览器的 localStorage 配额无法容纳全尺寸图片）；滑块值和皮肤选择保存在 localStorage 中
（dsh-skin:skin、dsh-skin:wallpaper-opacity、dsh-skin:wallpaper-blur）。
DSH 的 Host 设置接线仅向浏览器客户端暴露一组白名单命名空间（dsh-host-apiproxy 中的 WEB_SETTINGS_NAMESPACES），因此第三方命名空间会返回 settings-not-exposed；产品本身将远程浏览器偏好保持为进程本地，而 localStorage 与这一边界一致，适用于视觉偏好，同时在同一源上重新加载后仍然保留。

安装

从任意位置将包添加到 web 配置文件：

dsh plugin --profile web add -w /path/to/dsh-skin

-w 标志是必需的：每个配置文件都附带一个 pnpm-workspace.yaml，因此
pnpm 9 会将配置文件目录视为工作区根目录，并拒绝裸 add，报错
ERR_PNPM_ADDING_TO_ROOT。

这会在 ~/.dsh/profiles/web 中运行 pnpm，安装该包，并将其追加到
dsh.profile.bundles（其补丁层会插入 skin 加载器条目）。
必须重启正在运行的 Web 服务器以加载新的 bundle 层：

停止正在运行的实例，然后：
dsh web

打开 Settings → General 以使用这两项功能。

发布（npm）

DSH（rc.6）没有单独的插件市场——插件分发渠道就是 npm 注册表。一个声明了 dsh.bundle（宿主补丁层）和 dsh.client（浏览器 bundle）的包，正是 dsh plugin
--profile  add  所安装的内容，因此将此包发布到 npm 就是当今“上架”的含义：

1. 选择一个唯一的名称（带作用域的名称更安全，例如 @yourscope/dsh-skin），并
填写 author、repository、keywords 和 CHANGELOG。
2. 确保 files 包含 lib/index.js、lib/client.js、lib/types、
cordis.patch.yml（已配置）。
3. 发布到官方 npm 注册表（本机的默认注册表是
镜像——发布到镜像不会到达 npmjs）：
npm publish --registry https://registry.npmjs.org

4. 用户使用以下命令安装：
dsh plugin --profile web add -w @yourscope/dsh-skin

然后重启 dsh web。

需要向用户说明的已知平台边界：浏览器端偏好存储在 localStorage 中（第三方设置命名空间尚未通过网络暴露），并且客户端 bundle 只能 require 模块表实体（平台种子 + 已注册的客户端 bundle）。

开发

客户端 bundle 直接以 __ModuleLoader__ bundle 格式编写
（与 tsdown 为已发布的 ui-* 包生成的形态相同），因此无需构建步骤。lib/client.js 只能 require 模块表中的实体：平台种子词（react、react/jsx-runtime、……）以及已注册的客户端 bundle（@deepseek-ai/dsh-client-runtime/client、@deepseek-ai/dsh-client-ui-theme/client、……）。编辑后，重启 Web 服务器（bundle 内容会重新哈希，并以新的 rev 提供；loader 条目会在启动时重新扫描）。