3步搞定 Hermes WebUI 主题与皮肤定制：从内置选项到专属皮肤指南

3步搞定 Hermes WebUI 主题与皮肤定制：从内置选项到专属皮肤指南

【免费下载链接】hermes-webuiHermes WebUI: The best way to use Hermes Agent from the web or from your phone!项目地址: https://gitcode.com/GitHub_Trending/he/hermes-webui

白天亮色清爽，深夜又被刺眼白屏晃得头疼——在 Hermes WebUI 里可以一次调好：设置里挑主题模式，挑皮肤色系，再写一小段 CSS 做出专属强调色。

先搞清楚：主题与皮肤到底是什么

主题是"亮不亮"，皮肤是"什么色"。主题只有系统、深色、浅色三档，管背景、文本和表面颜色；皮肤只换强调色一族，管链接、按钮、焦点框这些激活状态。两者互相独立、自由组合——切到深色后，你喜欢的金色强调色原样保留。整套机制是纯 CSS 变量，不碰任何 Python 代码。

两条路都能到：官方内置主题与皮肤怎么换

内置选项零配置，两条路都是秒级生效。

界面操作

点右上角齿轮图标 → 外观，路径就是最短的：

• 主题卡片：浅色、深色、系统三选一，背景立刻切换对应明暗基调；
• 皮肤网格：12 套内置强调色系，从经典金到 Catppuccin、Ares 红，点一下即时预览；
• 下面还有字体大小（小 / 中 / 大），可读性差就顺手调大。

斜杠命令

输入框里敲/theme <名称>，主题和皮肤名字都认，不想开面板时更快：

/theme light # 浅色主题 /theme dark # 深色主题 /theme system # 跟随系统设置 /theme catppuccin # 切到 Catppuccin 皮肤

命令只动对应的轴，另一项保持不动。

改出专属色：自定义皮肤怎么加

自定义皮肤就是一小段覆盖五个强调色变量的 CSS，三步走完。

第一步，看懂结构：一个皮肤由两组选择器组成——浅色模式:root[data-skin="名称"]和深色模式:root.dark[data-skin="名称"]，各定义--accent、--accent-hover、--accent-bg、--accent-bg-strong、--accent-text五个变量。照着 static/style.css 里现成的皮肤抄结构就行。

第二步，编写代码：一个绿色系示例，深色变体记得换更亮的颜色：

/* 浅色模式变体 */ :root[data-skin="my-skin"] { --accent: #2E7D32; /* 主强调色 */ --accent-hover: #1B5E20; /* 悬停色 */ --accent-bg: rgba(46,125,50,0.08); --accent-bg-strong: rgba(46,125,50,0.15); --accent-text: #1B5E20; } /* 深色模式变体，颜色通常调亮一档 */ :root.dark[data-skin="my-skin"] { --accent: #66BB6A; /* 其余四个变量同理，换成更亮取值 */ }

第三步，应用生效：推荐走扩展机制，源码一行不用改。把 CSS 放进扩展目录，启动时声明样式表地址：

HERMES_WEBUI_EXTENSION_DIR=~/.hermes/webui-extension \ HERMES_WEBUI_EXTENSION_STYLESHEET_URLS=/extensions/my-skin.css \ ./start.sh

扩展机制细节见 docs/EXTENSIONS.md。熟悉源码的话，也可以直接把变量块写进 static/style.css，再到 static/index.html 的皮肤选择器和 static/commands.js 的命令列表里注册它。

好看又耐看：设计要点与避坑

配色是测出来的，不是猜出来的。

• 双模式都测：深色下好看、浅色下看不清的皮肤很常见，两组变量必须都过一遍；
• 盯住对比度：--accent-text压在--accent-bg-strong上，小标签和 chip 最容易糊，建议对照 WCAG 2.1 AA 达标；
• 手机户外场景：阳光下屏幕发暗，对比度要比桌面端再高一档；
• 性能别拖后腿：大面积半透明阴影、复杂动画会拖慢低端手机，用变量改色就好，别堆特效；
• 别贪多：皮肤只管强调色。真要整体换气质那是完整主题，要重写的变量多一个量级。

常见疑问速答

主题与皮肤设置存在哪？

双重持久化：浏览器localStorage保证刷新无闪烁，POST /api/settings同步到服务端，落在settings.json的theme和skin两个键里。换设备、换浏览器都能带过去。

改坏了怎么还原？

回 设置 → 外观 点默认项即可，或输入/theme system、/theme default。自定义皮肤出问题就删掉那份 CSS、去掉对应环境变量，服务一重启恢复原样。

团队如何统一配置？

把同一份扩展目录发给每人，各自用相同两个环境变量启动，全团队外观立刻一致；内置选项则靠settings.json里的同一组键值对齐。

从 12 套内置皮肤里挑一个顺眼的开始，不满意时再花十分钟写一段 CSS，专属界面就是你的了。

相关资源

• 官方文档：THEMES.md —— 主题与皮肤完整说明
• 扩展机制：docs/EXTENSIONS.md —— 样式表与脚本加载方式
• 变量定义：static/style.css —— 全部内置皮肤的 CSS 源码
• 命令实现：static/commands.js ——/theme命令逻辑

【免费下载链接】hermes-webuiHermes WebUI: The best way to use Hermes Agent from the web or from your phone!项目地址: https://gitcode.com/GitHub_Trending/he/hermes-webui