hello-heyongping/dsh-helloai-theme ↗★ 0

@hello-heyongping/dsh-helloai-theme

HelloAI Theme: ten selectable color themes for the DeepSeek Harness web GUI, plus an inline editor to add, reference, edit, rename and delete your own themes, with optional glass styling and token overrides. 适合需要个性化界面配色、护眼主题或想自制主题的用户。需DSH>=0.1.5-rc.1。

패키지
@hello-heyongping/dsh-helloai-theme
호환성
미검증
버전
0.3.0
라이선스
MIT
최근 업데이트
2026. 10. 7.

설치

$npx -p @deepseek-ai/dsh dsh plugin --profile web add github:hello-heyongping/dsh-helloai-theme

HelloAITheme · DeepSeek Harness 主题插件

License: MIT version platform

给 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 名即可(在 /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"]:{ "": "" },负责启动同步路径与多标签页回声;
  • 设置文档 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