主题工坊 hello-heyongping/dsh-helloai-theme

HelloAITheme · DeepSeek Harness 主题插件

给 DeepSeek Harness 换配色：十款内置主题一点即换，还能自己添加、引用、编辑、改名、删除主题，可选玻璃质感与逐 token 覆盖。全部交互都在设置页那一行里就地展开，不弹新窗口。

HelloAITheme 主题行与展开的编辑器

设置 → 通用 → HelloAITheme 主题：上排十款内置配色，下面是自建的两款主题与「＋ 添加主题」；点开后编辑器就地展开。

它能做什么

- 十款内置配色：两套浅色（清晨、森绿）+ 八套低对比度深色，全部按护眼低对比设计，不是简单反色。
- 自定义主题：新建主题时可以「基于」任意一款内置配色，只改你想改的槽位。
- 13 个可调槽位：底色 6 项、文字 3 项、强调与状态 4 项，用系统取色器或直接填 hex，没有任何颜色限制。
- 改一处，整族跟着走：改强调色时，按钮、悬停、淡色底、深色底、color-mix 派生档一起重算，不会出现"主色变了、按钮还是旧色"。
- 内置主题升级能传导：你自建的主题只存「差异」，所以插件日后修正内置配色，你的主题会一起受益。
- 玻璃质感、代码高亮风格、逐 token 覆盖等既有能力照常可用。
- 可选：首页动效（whale / dragon / leap / cat / school），独立开关，不影响主题本身。

点击看首页动效预览

首页动效 · dragon 首页动效 · whale

安装

需要 DeepSeek Harness ≥ 0.1.5-rc.1，web profile（桌面版与网页版都属于 web）。

方式一：直接从 GitHub 装（不用先 clone）

dsh plugin --profile desktop add github:hello-heyongping/dsh-helloai-theme

方式二：clone 到本地再装（想改代码就用这个）

git clone https://github.com/hello-heyongping/dsh-helloai-theme.git
cd dsh-helloai-theme
dsh plugin --profile desktop add .

把 desktop 换成你自己的 profile 名即可（在 <DSH_HOME>/profiles/ 下能看到有哪些）。
仓库里已经带上构建好的 lib/，所以两种方式都不需要你先 npm install。

装完刷新页面就会出现「HelloAITheme 主题」这一行。如果没看到，确认装的是 web / desktop profile，然后在插件管理里点一次「立即重启」。

快速上手

1. 打开 设置 → 通用，找到 HelloAITheme 主题；
2. 点任意内置主题按钮 → 立即切换并自动保存；
3. 点 ＋ 添加主题 → 编辑器在下方展开；
4. 填名称（最多 4 个字）→ 选「基于」哪款主题 → 调色 → 保存；
5. 想改已有主题：点主题按钮右上角的 ✎。

用户主题上限 24 个，数据存在设置文档的 customThemes 字段里（同时镜像一份到 localStorage，多标签页即时同步）。

常见问题

换了主题，但有些界面没变？ 先确认改的是哪个槽位。"面板/浮层"和"强调色"这两个槽位各自覆盖一整族 token，所以正常情况下改一次就够。

想恢复官方原样？ 删掉自建主题即可；内置主题只是覆盖 token，不影响 DSH 自身文件。

主题按钮为什么不让我起长名字？ 按钮是固定尺寸的，名称限 4 个字，避免把那一行排版撑坏。输入时会实时截断并显示 n/4。

TUI 的主题在哪儿？ themes/.json 由 dsh-helloai-theme/tui-themes 半块同步到 ~/.dsh-tui/themes/，与本编辑器相互独立。

下面是完整的设计与实现说明，写给想改代码、或想搞清"为什么这么设计"的人。

设置 → 通用 → HelloAITheme 主题 一行即为全部入口，全部交互都在这一行内就地展开，不弹新窗口。

设置 → 通用 → HelloAITheme 主题 一行即为全部入口，全部交互都在这一行内就地展开，不弹新窗口。

一、主题行

[清晨] [森绿] [雾问] [芷魅] [蓝晶]
[寒夜] [赤焰] [松绿] [天蓝] [紫烟]
[你的主题] [你的主题] … [+ 添加主题]

- 内置十款：两套浅色（清晨、森绿）+ 八套低对比度深色。
- 点击任意主题按钮 = 立即切换并自动保存。
- 用户主题排在十款之后，与内置同尺寸；右上角 ✎ 打开该主题进行编辑/改名。
- ＋ 添加主题 与主题按钮同尺寸同行顺位，点击在下方展开编辑器（再次点击收起）。

二、编辑器（就地展开）

| 区域 | 说明 |
| 主题名称 | 最多 4 个字（主题按钮固定尺寸，避免撑坏排版），输入时实时截断并显示 n/4 |
| 基于 | 当前引用的主题；编辑状态下点击上方任意主题按钮即可引用它的全部配色参数 |
| 预览 | 按当前名称 + 强调色实时渲染一个主题按钮，所见即所得 |
| 底色 | 最深背景·侧栏/代码、次级背景·登录/页签、主背景·会话区、面板/卡片、浮层/悬停、重点内容底色·行内代码（6 项） |
| 文字 | 主要文字、次要文字、弱化文字（3 项） |
| 强调与状态 | 强调色、成功、警告、错误（4 项） |
| 底部 | 保存 / 取消；编辑已有主题时多一个「删除主题」，删除需内联二次确认（不弹窗） |
配色一律用系统取色器 + hex 输入框，不做任何颜色限制——想怎么改就怎么改。保存后立即生效、立即持久化；新建的主题会自动切过去。

三、数据模型与持久化

用户主题是小记录，不是整份调色板：

{
"name": "极夜", // ≤ 4 字 "base": "helloai-theme-pink", // 基于哪款内置主题 "colorScheme": "dark",
"colors": { "bgDeep": "#0e0f17", "bgBase": "#161721", "accent": "#8fb8ff", / …12 个槽位… / }
}

运行时调色板按需派生：取 base 主题的 tokens → 覆盖槽位对应的 token（别名 token 引用它们，因此所有派生表面一起变）→ 把 color-mix() 里引用旧页面色/最深色的混色底一并换成新值，保证状态色不会和底色脱节。两条规则保证预期：

- 没动的槽位 = 与基点完全一致（该槽位不拥有的次级色不动），所以"基于寒夜新建一个主题、什么都不改"和你现在的样子逐色相同；
- 动了的槽位 = 整族一起走（字面色、别名、以及由旧色派生的 color-mix 一起重算），不会出现"主色变了、浅色还留着旧色"。

这样用户主题体积极小，且插件日后修正内置配色时会同时传导到用户主题。

两处存储、一种形状（与 overrides 同一套约定）：

- localStorage["dsh.helloaiTheme.customThemes"]：{ "<主题 id>": "<JSON 记录>" }，负责启动同步路径与多标签页回声；
- 设置文档 customThemes 字段（Schema.dict(Schema.string())）：机器级持久化，一旦有用户层就由它胜出。

两侧都有一份逐字一致的规范化实现（lib/client.js 与 lib/index.js），保证两份存储按字符串比较即可判等——改动其中一份必须同步另一份。

上限：24 个用户主题；id 命名空间 helloai-theme-custom-。

四、开发与验证

node scripts/harness-client.mjs # 端到端：注册/切换/新增/引用/改名/删除 + 宿主 schema + 7 语言键集
node scripts/preview-theme-editor.mjs # 真实组件树 + 真实 token 渲染成 HTML，并用无头 Chrome 截图
node --check lib/client.js && node --check lib/index.js

新增一个可编辑色板槽位时，三处必须同时改：HELLOAI_THEME_COLOR_SLOTS（客户端，含 label 与目标 token）、HELLOAI_THEME_SLOT_IDS（宿主，用于丢弃未知槽位）、以及 7 份语言字典里的 editor.color. 文案（键集必须与 zh 完全一致）。

五、其它

聊天区两类"文件卡片"与上游共用的是别的 token，插件用两条类名后缀桥接规则把它们接到"重点内容底色"上，因此它们和行内高亮始终同色、并随该槽位一起变：

| 卡片 | 上游 token | 桥接选择器 |
| 消息里的用户附件卡片（ui-chat MessageItem.fileCard） | --dsw-specific-input-major | [class="_fileCard"] |
| 交付物文件行（ui-deliverables .file，2 列网格那种） | --deliverable-fill → --dsw-static-neutral-850 | [class="_presented"] [class$="_file"] |

选择器只依赖 DSH CSS 模块里稳定的类名后缀，上游改名则该规则静默失效（回到官方样式），不会误染其它元素。想恢复官方原样就把这两条规则从 lib/client.js 的 css$2 里删掉。输入框里的草稿附件 chip 与输入框本身仍共用 --dsw-specific-input-major（上游设计如此，未改）。

另外：编辑器的"面板/浮层"槽位同时覆盖 --dsw-static-neutral-850 / 800 / 700——十套内置主题里这几个 neutral- 与对应的 bluish- 逐色相同，但组件会直接引用它们（交付物卡片、卡片 hover、多选底、滚动条），只改 bluish- 会让这些表面留在基点色上。harness 会为十套主题各建一个未改动的克隆并断言逐色一致。

"强调色"槽位同理覆盖整条强调色家族（--dsw-static-blue- 与 --dsw-static-deepseek- 的全部档位，含 color-mix 派生档）：组件会直接拿派生档当前景/填充——输入框的发送按钮就是 --dsw-alias-button-info-fill → --dsw-static-deepseek-400 → color-mix(强调色 66%, 页面色)。只列 -500 一档时，改强调色只有链接跟着变、发送按钮留在旧色上；现在改一次强调色，整族（按钮、hover、淡色底、深色底）一起重算。

- 玻璃质感、代码高亮风格、token 覆盖等既有能力不受影响。
- TUI：themes/.json 由 dsh-helloai-theme/tui-themes 半块同步到 ~/.dsh-tui/themes/，与本编辑器相互独立。

MIT