Hermes WebUI 主题与皮肤定制指南12 种内置外观 3 条路径打造专属界面【免费下载链接】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 Agent 的时间越长界面那点固定的强调色就越容易让你产生这是模板的感觉。Hermes WebUI 把外观拆成了主题浅色 / 深色 / 系统跟随和皮肤强调色方案两条互不干扰的轨道再配上字体大小调节和一条不改源码的扩展通道让换一套顺眼的界面从改 CSS 的工程活变成了点两下鼠标的事。无论你是想在深夜切到深色护眼、给团队统一一套品牌色还是想造一个全项目独一份的配色这篇都能照着做完。这套外观系统到底能做什么一张表说清楚 Hermes WebUI 外观能力的边界能力说明改动的范围主题ThemeSystem/Dark/Light三档控制背景、文字、面板底色整体明暗模式皮肤Skin内置 12 种default默认金、ares红、mono灰、slate蓝灰、poseidon海洋蓝、sisyphus紫、charizard橙、sienna大地色、catppuccin、nous钢蓝、geist-contrast高对比、zeusOLED 黑仅--accent强调色族字体大小小 / 默认 / 大 / 超大四档消息正文、侧边栏、输入框等关键文本自定义皮肤纯 CSS 即可支持扩展注入或修改源码两种方式强调色变量自定义主题重写整套基础色板变量全局配色工程量大一般用不上设置持久化本地localStorage 服务端settings.jsontheme、skin键换设备、刷新均保留主题管明暗皮肤管点缀两者自由组合比如深色主题 Ares 红、浅色主题 Poseidon 蓝。全部是纯 CSS 实现不涉及任何 Python 后端改动。任务一换外观两分钟搞定最日常的诉求无非是换个顺眼的有两条路按需选。路径 A设置面板点击切换点击界面右上角的齿轮图标进入外观设置区。在主题卡片里点选浅色深色或系统。在皮肤网格里点你喜欢的色卡。预览是即时的——点哪张卡整个界面当场就变色不用刷新不用保存。字体大小选项就紧挨在主题/皮肤下方四档里选一档即可同样即时生效。路径 B斜杠命令一句话切换在聊天输入框直接输入/theme加名称主题名和皮肤名共用这一条命令/theme dark # 切到深色主题 /theme system # 跟随系统明暗 /theme ares # 切到 Ares 红色皮肤 /theme mono # 切到 Mono 灰色皮肤规则很简单命令只动你指定的那一轴。输入皮肤名不会碰主题输入主题名不会碰皮肤。输错或只敲/theme不带参数时界面会提示当前支持的全部取值等于自带帮助文档。提示两套设置的最终效果完全一致区别只是手点还是键盘流。重度用户基本会习惯命令方式因为不打断聊天节奏。任务二自建配色不动后端代码内置 12 种里没有你想要的皮肤本质就是一小段 CSS 变量覆写理解两个前提就够了。先看懂皮肤变量的分工每种皮肤都要成对定义浅色和深色两个变体各自覆写一组强调色变量变量作用--accent主强调色链接、激活态、主按钮--accent-hover鼠标悬停时的颜色--accent-bg浅色强调背景选中行、标签底色--accent-bg-strong更浓的强调背景小徽章、chip 背后--accent-text强调色背景上的文字颜色最小完整示例绿色系皮肤注意成对写两个变体/* 浅色主题下的变体 */ :root[data-skinmy-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-skinmy-skin] { --accent: #66BB6A; --accent-hover: #43A047; --accent-bg: rgba(102,187,106,0.08); --accent-bg-strong: rgba(102,187,106,0.15); --accent-text: #66BB6A; }注意漏写深色变体是最常见的翻车点。只写浅色变体的皮肤一到深色主题下就会退回默认金看起来像皮肤没生效。应用方式一扩展注入推荐不碰源码Hermes WebUI 提供了扩展机制把自写 CSS 作为外部样式表注入head仓库一个字都不用改。准备一个扩展目录把my-skin.css放进去。启动时通过环境变量声明它export HERMES_WEBUI_EXTENSION_DIR~/.hermes/webui-extension export HERMES_WEBUI_EXTENSION_STYLESHEET_URLS/extensions/my-skin.css之后按 docs/EXTENSIONS.md 里的流程启动 WebUI样式即生效。更完整的方式是调用window.registerHermesSkin(descriptor)把皮肤正式注册进去——注册后它会出现在设置 → 外观的原生皮肤网格里和内置皮肤享有同等待遇还可以用scheme声明仅限浅色或仅限深色的皮肤避免两种基础模式下的变量互相串味。提示skin设置在服务端接受任意字符串所以你的自定义皮肤名在 CSS 加载后能直接持久化不需要任何代码适配。应用方式二修改源码想贡献给上游才用适合打算把皮肤做成内置选项的用户三处都要动缺一不可把两段:root[data-skin...]变体追加到 static/style.css 的现有皮肤区块里在 static/index.html 的设置皮肤选择器中注册在 static/commands.js 的cmdTheme()皮肤列表中加入名字否则/theme命令不认识它。顺手的进阶项换字体如果不满意的不是颜色而是字太小/太大外观区下方的字体大小就是全部解法小12px 基准、默认14px、大16px、超大18px。它以data-font-size属性挂在html上同步作用于消息正文、侧边栏会话列表、输入框和文件树跟主题、皮肤一并持久化。想要更彻底的改造比如整体换一套色板情绪那是自定义主题的活要重定义--bg、--surface、--text、--border、--code-bg等基础变量契约定义在 static/style.css 顶部的:root与:root.dark块。变量多、牵动的选择器也多除非确有高对比无障碍或 OLED 纯黑这类刚需优先做皮肤。效果不满意时按这个顺序排查大多数皮肤不对劲都能在三步内定位先切主题验证。浅色下好看、深色下糊掉或反之九成是漏写了某一侧变体。把:root[data-skin]和:root.dark[data-skin]两个选择器都过一遍。查对比度重点位。最容易被忽略的是--accent-text叠在--accent-bg-strong上的小标签和徽章——对比度不够时表现为发灰发糊。建议按 WCAG 2.1 AA 的对比度标准校验浅色深色各测一轮。确认设置真的落地了。主题、皮肤、字号都走双通道持久化浏览器localStorage负责加载时零闪烁head里的内联脚本在样式表之前就读好POST /api/settings负责把theme、skin写进服务端settings.json启动时再经GET /api/settings回灌。如果刷新后设置丢了多半是这一侧断链而不是 CSS 没生效。另有两条省心的事实做皮肤前知道可以少走弯路logo 渐变直接引用--accent换皮肤后它自动跟着变无需单独处理扩展注册皮肤时若声明了schemeWebUI 会自动替你选对基础明暗类不会出现深色皮肤 浅色表格令牌的混搭。动手清单与延伸阅读现在就打开设置面板挑一张内置皮肤点击试试即时预览的效果想要专属配色把上面 15 行 CSS 抄下来改成你的主色走扩展注入这条路全程不碰源码。资源位置主题与皮肤完整文档THEMES.md扩展机制说明样式注入、皮肤注册docs/EXTENSIONS.md全部皮肤与主题的 CSS 定义static/style.css外观设置界面实现static/index.html/theme命令实现static/commands.js需要克隆仓库体验的话使用git clone https://gitcode.com/GitHub_Trending/he/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考