图像主题取色器Carpon39038/dsh-image-theme

DSH 图像主题

一个受 Warp 启发的图像主题插件，适用于 DeepSeek Harness Web 客户端。

上传或拖入一张图片，插件将会：

1. 在 CIE Lab 空间中提取五种主色；
2. 从图像中最暗的颜色派生出半透明的浅色和深色玻璃表面；
3. 让你选择一种提取出的颜色作为 DSH 强调色；
4. 在应用主题令牌之前校正文本和强调色的对比度；
5. 将原始图像用作全窗口背景。

DSH 图像主题预览

功能特性

- 全幅背景图像，可调节深色叠加层、模糊、饱和度和位置。
- 在浏览器中进行确定性的五色 Lab k-means 调色板提取。
- 通过 ctx.theme.overrideTokens() 实时覆盖 DSH 令牌——无需硬编码修改宿主 UI。
- 专门的 设置 → 图像主题 区域，支持拖放上传和调色板控制。
- 浏览器本地隐私保护：图像以 Blob 形式存储在 IndexedDB 中，设置存储在 localStorage 中；不会上传任何内容。
- 可以在不丢失所选图像或设置的情况下禁用插件。
- 响应式设置界面并支持减少动态效果。

安装

该仓库包含预构建的 lib/ 产物，因此 DSH 配置文件可以直接从 GitHub 安装：

dsh plugin --profile  add github:Carpon39038/dsh-image-theme

请将此插件版本与 DSH 0.1.2-rc.1 搭配使用。要升级 CLI：

npm install --global @deepseek-ai/dsh@0.1.2-rc.1
dsh --version

重启或刷新 DSH Web 客户端，然后打开 设置 → 图像主题。使用 dsh web 启动默认 Web 配置文件。

在开发过程中安装本地检出：

pnpm install
pnpm build
dsh plugin --profile  add link:$PWD

随附的 .npmrc 禁用了自动对等依赖安装：DSH 在运行时提供 Cordis、React 和客户端 UI 服务。开发依赖固定了官方 DSH 0.1.2-rc.1 包，以便 TypeScript 检查实际发布的 API。

工作原理

调色板提取

浏览器将图像降采样至最多 96 × 96，最多采样 6,000 个不透明像素，将 RGB 转换为 CIE Lab，并使用最远点播种运行确定性 k-means。五个聚类按数量排序。

这遵循与 Warp 开源主题创建器相同的大致模型，后者使用 Lab 空间中的 Hamerly k-means，k = 5。本实现是为浏览器独立编写的，并使用确定性播种，因此相同的像素始终产生相同的调色板。

主题映射

插件将图像、深色表面颜色、前景色和强调色保留为独立的角色：

image → five-color palette → darkest color → light/dark glass surfaces
↘ selected color → contrast-safe accent

它会覆盖 DSH 的公共别名令牌，包括：

- --dsw-alias-bg-base
- --dsw-alias-bg-layer-1
- --dsw-alias-bg-layer-2
- --dsw-alias-bg-overlay
- --dsw-alias-border-l1 / --dsw-alias-border-l2
- --dsw-alias-brand-primary
- --dsw-alias-label-primary / --dsw-alias-label-secondary
- --dsw-specific-sidebar-fill

每个覆盖项都包含独立的 light 和 dark 值，这是 DSH 主题运行时所要求的。浅色模式使用浅色表面和深色文本；深色模式使用深色表面和浅色文本。系统模式跟随当前宿主调色板。

背景渲染

一个由插件拥有的固定背景层位于 DSH 根节点之后。应用程序令牌保持半透明，使图像能够透出，同时叠加层和表面不透明度保护可读性。卸载或禁用插件会释放令牌层并干净地移除背景。

开发

要求：Node.js 22+ 和 pnpm 10+。

pnpm install
pnpm typecheck
pnpm test

pnpm test 会先重新构建可分发包，然后针对已发布的 DSH ThemeRuntime、LocaleRuntime 和 SlotRegistry 运行调色板测试和集成检查。集成检查会在模拟 DOM 中加载实际的 lib/client.js 包装器，恢复已保存的壁纸，挂载设置组件，并演练区域设置变更、主题更新、禁用/重新启用、设置槽重新挂载以及插件释放。这些检查不会启动 Web 服务器，也不会替代可视化浏览器审查。

交互式设计预览位于 playground/：

cd playground
npm install
npm run dev

该预览导入了真实插件所使用的相同调色板和角色映射模块。其生成的音乐会背景是一个干净的演示资源，并非 Warp UI 的副本。

项目结构

src/client/palette.ts          Lab 转换和确定性 k-means
src/client/theme.ts            DSH 令牌和对比度映射
src/client/controller.ts       生命周期、持久化、背景、令牌释放
src/client/storage.ts          IndexedDB 图像 + localStorage 设置
src/client/ImageThemeSection.tsx
DSH 设置页面
playground/                    可运行的交互式可视化预览

兼容性

插件 0.1.1 面向 DeepSeek Harness 0.1.2-rc.1 和 Cordis 4.0.2。客户端上下文现在来自 @deepseek-ai/cordis，槽位服务来自 @deepseek-ai/dsh-client-ui-renderer；不再请求已移除的 dsh-client-runtime 包。只有带有浏览器插件入口的包才会出现在 dsh.client.inject 中。DSH 仍在快速演进；在进一步升级之前，请验证已发布的客户端 API。

现有的版本 1 图像设置和 IndexedDB 图像会被保留。此前针对浅色模式的对比度修复已包含在内。

该插件仅适用于 Web。图像和偏好设置是每个浏览器配置文件本地的，不会在设备之间同步。

致谢

- DeepSeek Harness 提供了插件、设置槽和主题令牌 API。
- Warp 用于开源主题创建器参考，以及图像、背景、前景、强调色和不透明度角色的分离。

许可证

MIT