自定义主题工坊 km5473/dsh-customizable-theme

dsh-customizable-theme · 外观全项自定义·AI 生成配色方案🎨

Listed on dsh-plugin.org

为 DeepSeek Harness Web / Desktop 制作的独立可自定义主题插件。出厂外观延续原项目（Mahiru0427/dsh-vesna-theme）的青蓝与奶白明暗双色，配一整张角色壁纸和六个卡通表情；这套外观的每一项都能改成你自己的。

壁纸、明暗两套配色、欢迎语、主题名称与描述、浅色/深色的名字、六个表情与它们的名字全部可以自定义，还能导出／导入配置文件。另带一个 AI 生成配色弹窗：导入角色立绘、预填提示词到聊天框（可追加自己的补充指导）、粘贴模型回复自动填色；不想消耗 Token 时也可以下载提示词交给豆包 / 千问。

🪄 0.2.0 新功能 · AI 生成配色

上传一张角色立绘，提示词自动填进 DSH 聊天框；模型回复一贴，自动填好 19 个颜色。

🖼️ 传立绘 → ✨ 填提示词 → 💬 发给模型 → 📋 粘回 JSON → 🎨 应用

能自定义什么

设置 → 通用 → 卡片下方有三个折叠区：

| 折叠区 | 可改内容 |
| 配色自定义 | 浅色与深色各 19 个颜色项，用十六进制色值（#rrggbb）直接改，左边色块实时预览，右边是这一项的名字。最后三项是三个辅助色（辅助色1 / 辅助色2 / 辅助色3，出厂值分别是珊瑚粉、淡金、淡紫）。改过的项会高亮，可单项清除，也可整组恢复。 |
| 文案与名称 | 主题名称、主题描述、欢迎语（默认「找我什么事呀，亲爱的朋友~」）、浅色名称（默认「春日浅色」）与深色名称（默认「夜宴深色」）。留空即回到内置文案。 |
| 图片与表情 | 全窗口壁纸，以及六个表情槽位（比耶→新会话、思考→欢迎区、读书→文件入口、疑惑→负面评价、点赞→正面评价、爱心→发送）。每个槽位可单独选图、单独改名字、单独恢复默认。 |

卡片底部：导出配置 / 导入配置 / AI 生成配色 ✨ / 恢复默认配置。自定义的名称会同时出现在配色分组的标题、明暗切换按钮和表情图库上。

✨ AI 生成配色 🎨

这是 0.2.0 的主打功能：不用懂色值，也不用在取色器里试半天。选一张立绘，让模型看图给一套能直接用的明暗配色。

- 🖼️ 看图取色：模型抓图片的第一印象色，不是简单的取平均；
- 🎛️ 生成后可调：19 个颜色逐项可点色块改，满意再应用；
- 🪶 不花 Token 也行：下载提示词交给豆包 / 千问，结果粘回来一样能用。

卡片底部的 AI 生成配色 会打开一个弹窗：
1. 🖼️ 导入一张角色立绘（只用于这次生成，不会保存成壁纸）；
2. 📝 提示词已预填，可追加自己的「补充指导」（例如：主色用粉色、不要紫色、更活泼）；
3. 💬 点 填入聊天框：提示词会写进 DSH 输入框并尝试带上立绘，关闭设置后发送；
4. 📋 把模型返回的 JSON 粘回弹窗，点 解析并填入，19 个颜色自动填好，可逐个点色块修改；
5. 🎨 看下方的简易效果图，满意后点 应用配色。
💡 先新建一个对话再填入，旧上下文不会干扰配色。

不想消耗 Token 时，弹窗底部可下载 .md 提示词，交给豆包 / 千问等助手生成，再把 JSON 粘回来即可。

聊天框效果

勾选「全窗口壁纸」后，卡片上多一个聊天框效果开关：

- 高斯模糊：用户气泡与模型回答换成静态模糊的玻璃面板，关掉开关恢复宿主原生面板。
- 高级模糊：给每条消息卡片套一圈 2px 的高斯模糊边框——环里的模糊半径（10px）比卡片内部（3px）更大，所以卡片边缘会多出一层更柔的毛玻璃边，以实现接近于液态玻璃的显示效果。
- 发送框：输入卡保留 92%／95% 的近实色底，不加背景模糊——加了以后悬停发送／停止按钮会让整块输入区重绘闪烁（Windows/Electron）。
- 信息栏胶囊：「N 轮 M 步 · x tok/s · 缓存命中 x%」那一行套上侧栏同色的胶囊底，以提升可读性。

关掉「全窗口壁纸」，或点「默认配色」，上述效果一起撤下，原生界面完全回来；系统关闭透明效果时会自动调整。

十六进制配色

配色输入框接受 #a1b2c3 也接受 a1b2c3：

- 输入到第六位合法数字时立即生效，色块同步更新；
- 还没打完的中间状态会标出来，但不会写进设置；
- 失焦或回车时若仍不合法，就退回原来的颜色——所以打错字不会把颜色改坏。

配置文件

导出得到 dsh-custom-theme-<时间>.json：

{
"format": "dsh-custom-theme",
"version": 1,
"palette": { "light": { "accent": "#227c89" }, "dark": {} },
"title": "", "description": "", "greeting": "找我什么事呀，亲爱的朋友~",
"modeNames": { "light": "春日浅色", "dark": "夜宴深色" },
"stickerNames": ["比耶", "", "", "", "", ""],
"images": { "wallpaper": "data:image/webp;base64,...", "stickers": ["data:...", null, null, null, null, null] }
}

- 只写自定义项：图片是内嵌 data URL，所以一个文件就是一整套外观，换机器直接导入即可。
- 导入是全量替换：文件里没有的图片会被清空。
- 校验失败（格式不对、版本不符、颜色非法、图片过大或不是图片）会拒绝整份文件并提示，不会改坏现有配置。

数据存放

| 内容 | 位置 |
| 启用开关、壁纸／表情开关、聊天框效果 | localStorage 键 dsh-custom-theme.preference.v1 |
| 配色、文案与名称 | localStorage 键 dsh-custom-theme.custom.v1 |
| 壁纸与表情图片 | IndexedDB 数据库 dsh-custom-theme，对象仓库 assets |

上传的图片会先在 canvas 里缩放并重新编码（壁纸最长边 2560，表情最长边 320，优先 WebP 以保留透明通道），再存入 IndexedDB。图片不会上传到任何服务器。

安装

方式一：DSH CLI

dsh plugin --profile web add github:km5473/dsh-customizable-theme

发布到 NPM 之后也可以直接按包名安装（插件中心收录的是这种形式）：

dsh plugin --profile web add dsh-customizable-theme

方式二：本地安装包

1. 从 Releases 下载最新安装包（当前构建为 dsh-customizable-theme-0.2.1.tar.gz），你也可以复制项目主页让dsh帮你装。
2. 设置 → 插件 → 添加插件，选择该安装包，然后「立即启用」。
3. 重启 DSH：插件清单是在启动时按包名组装的，改名必须重启才生效。
4. 重启后到 设置 → 通用设置 找到这张卡片。

从旧名字的版本升级的话：先在旧版里导出配置，装好新包、重启，确认外观无误后再把旧插件移除，然后导入配置文件。启用开关与明暗偏好归 DSH 自己保存，重启后仍然保留。

卸载与恢复

- 临时恢复：卡片里点「默认配色」，撤下插件配色与壁纸、隐藏表情，原生明暗模式保留。
- 清除自定义：点「恢复默认配置」，配色、文案、名称、图片回到默认状态，但主题仍是启用状态。
- 卸载：先「默认配色」，再到插件页禁用或移除 dsh-customizable-theme，然后重新打开窗口。自定义记录留在本机，重新安装会沿用。

原理与边界

- 配色通过官方 ThemeRuntime.overrideTokens(source, { light, dark }) 覆盖 --dsw-alias-* 令牌，插件不替换程序文件、不改 DOM 结构。
- 卡片用 useSyncExternalStore 读控制器的不可变快照，所有状态只有一份。
- 图片以 Blob URL 喂给 CSS，样式表里只出现短 URL，不会把几 MB 的 base64 反复写进 CSS。
- 欢迎语只改主页那一个已验证的标题文本节点，禁用或卸载时还原。
- 表情挂在原有按钮的伪元素上，按钮的文字、快捷键、禁用状态与事件处理都会保留。
- 错误、警告、成功与差异配色不参与覆盖，保留平台语义。
- 停止与插话按钮全部用强调色：修正原有项目中停止按钮不够醒目的问题。回合运行中，输入区那颗按钮会从「发送」变成「停止生成」——同一个元素，只换了标签。主题的令牌把它的填充色定成偏淡的 raised，所以运行中看着发灰；这条规则单独把该状态指到强调色（悬停用强调悬停色，图形用强调前景色）。它挂在 body[data-dct-theme] 上，跟着主题开关走，选「默认配色」时一切还原。

开发

node scripts/build.mjs # 生成 lib/client.js（内嵌素材，无运行时依赖）
node tests/controller.test.mjs # 状态、持久化与配置校验
node tests/plugin.smoke.mjs # 打包产物：真实渲染设置卡片
node scripts/verify-served-bundle.mjs <已安装的 lib/client.js> [origin] [entry-id]

plugin.smoke.mjs 会用一个假的模块加载器把 lib/client.js 真正跑起来：解码内嵌素材、装配插件、渲染设置卡片的各种状态、检查卡片用到的每个文案键都存在于词典里，还要求卡片渲染出的每个 class 在 card.css 里都有规则（否则界面会静默掉样式）。部署前请让它先通过。

verify-served-bundle.mjs 复算宿主用来做缓存版本号的那串 sha1，再比对宿主实际返回的字节，因此「旧文件被当成新版」不可能蒙混过关。DSH 的网页服务需要启动时打印的带 token 链接才能打开首页，但插件包本身的路由不受影响，所以这个脚本不需要 token。

node scripts/build.mjs <模块 id> <输出路径> 可以把同一份代码构建成另一个模块 id，用于在过渡期让已启动的会话继续拿到新功能。

源码在 src，预构建产物在 lib，无新增 npm 依赖：

| 文件 | 职责 |
| src/palette.js | 出厂配色、颜色校验、令牌层构建 |
| src/config.js | 配置文件的构建与校验（纯函数，可测） |
| src/controller.js | 状态、持久化、图片、覆盖层 |
| src/image-store.js | IndexedDB 存取、上传图片处理 |
| src/art.js | 壁纸／表情 CSS、按钮预览、欢迎语替换 |
| src/glass.js | 聊天框高斯模糊（含开关标记与标记扫描）、高级模糊环、信息栏胶囊 |
| src/ai-palette.js | AI 生成配色的两版提示词、回复 JSON 解析 |
| src/client.js | 设置卡片与插件装配 |

更新记录

0.2.1 · 2026-10-27

- 修复宽表格顶出聊天框：4 列以上的 Markdown 表格不再突破消息卡片宽度，放不下时在表格内部横向滚动。
- 思考框统一成卡片：思考过程现在和有实线边、磨砂底，以区分对话框；修复思考框模糊不稳定的bug。
- AI 生成配色弹窗界面优化：「不消耗 Token？下载提示词」移到「填入聊天框」旁边，「提示词已下载」的提示也一并挪到该按钮右侧，更符合实际工作流程。

0.2.0 · 2026-10-25 ✨

- AI 生成配色：新增弹窗，支持角色立绘、预填提示词到 DSH 聊天框（可追加补充指导）、粘贴模型回复解析 19 色、浅/深双列取色、简易效果图与提示词 .md 下载。

0.1.3 · 2026-10-24

- 适配 DSH 0.2.1：宿主删掉了旧的 data-composer-stats 标记，统计信息改成 _pill 胶囊。信息栏胶囊改挂宿主的 data-composer-dock，并要求 dock 里真有统计胶囊才绘制，空 dock 不会出现空胶囊；旧宿主的标记保留兜底。

0.1.2 · 2026-10-18

- 上传npm

0.1.1 · 2026-10-18

- 修复悬停闪烁：开启全窗口壁纸时，鼠标悬停发送／停止按钮会让输入区整块重绘闪烁（Windows/Electron）。输入卡不再叠背景模糊，只保留 92%／95% 的近实色底。
- 包名改为 dsh-customizable-theme：npm 上 dsh-custom-theme 已被其他项目占用；本地存储键与导出格式沿用旧名，已调好的外观不会丢。

版权与来源

- 作者：@km5473
- 项目主页：km5473/dsh-customizable-theme
- 许可：MIT — © 2026 km5473
- 基于：Mahiru0427/dsh-vesna-theme（原项目主页），© 2026 dsh-vesna-theme contributors

原作者B站主页Cyrefirefly 本项目由上游主题改名而来，并在基础上扩展了配色与文案自定义、表情命名、配置导入导出；原项目的版权归原作者所有，MIT 许可的完整条款见 LICENSE。

这是非官方主题。MIT 许可仅适用于本插件代码，不包含角色名称与角色图像的权利。