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深夜跑 Agent 任务时Hermes WebUI 的亮色界面格外刺眼或者团队演示时你希望每个人的屏幕都统一成同一套配色。这篇指南带你从零改 Hermes WebUI 的主题、皮肤和字号点几下就能换外观想要专属配色还能自己写一套皮肤。 能力一览一分钟看懂外观三维度Hermes WebUI 把界面外观拆成三个独立开关互不干扰、可自由组合维度管什么可选值主题明暗基调背景、文字、面板颜色浅色 / 深色 / 跟随系统皮肤强调色按钮、链接、选中态的颜色内置 21 款如 default 金、ares 红、catppuccin字号全文阅读大小小 / 默认 / 大 / 超大组合逻辑很直白主题决定亮还是暗皮肤只换强调色字号只影响阅读密度。皮肤按data-skin属性作用在页面上纯 CSS 生效不需要动任何后端逻辑。⚡ 上手切换外观的三条路径在设置面板里点选切换想达到什么把刺眼的亮色界面立刻换成深色。 点哪里右上角齿轮图标 → 外观卡片。主题区三选一浅色 / 深色 / 系统想换强调色就顺手在旁边的皮肤网格里挑一款。 看到什么界面当场变化不用刷新页面。字号小 / 默认 / 大 / 超大就在同一面板下方选中即生效。输入框里一条命令切换想达到什么不离开对话区就换外观。 输什么在输入框里直接敲/theme dark、/theme light或/theme system切明暗敲/theme ares、/theme mono这类皮肤名则只换强调色。 看到什么命令同时认识主题名和皮肤名命中哪个就改哪一维另一维保持原样右下角弹一条确认提示。设置是如何被保存下来的选择先写进浏览器localStorage——可以理解为浏览器自带的本地小本本。页面加载时有一段内联脚本在样式应用前就读它所以打开页面时外观是零闪烁直接呈现的。随后通过POST /api/settings同步到服务器存为settings.json里的theme、skin键值。刷新、开新标签页、换设备登录同一套外观都会自动还原不用重复配置。 打造自己的皮肤两段 CSS 加一个扩展目录皮肤的本质是一小段 CSS。先解释一下 CSS 变量它是页面上预留给样式的命名颜色槽位界面各处取色都从槽位读值换掉槽位里的颜色等于全局换色。一份最小皮肤需要两段/* 浅色主题下的变量块 */ :root[data-skinmy-skin]{ --accent:#2E7D32; --accent-hover:#1B5E20; --accent-bg:rgba(46,125,50,.08); --accent-bg-strong:rgba(46,125,50,.15); --accent-text:#1B5E20; }/* 深色主题下的变量块颜色通常更亮一些 */ :root.dark[data-skinmy-skin]{ --accent:#66BB6A; --accent-hover:#43A047; --accent-bg:rgba(102,187,106,.08); --accent-bg-strong:rgba(102,187,106,.15); --accent-text:#66BB6A; }五个变量的分工--accent是主强调色链接、按钮、选中态都取它--accent-hover是鼠标悬停时的颜色两个--accent-bg是浅色和更强的强调底色小徽章、标签就铺在它上面--accent-text则是这些底色上文字该用的颜色。方式一扩展目录推荐零改码mkdir -p ~/.hermes/webui-extension cp my-skin.css ~/.hermes/webui-extension/启动时加两个环境变量声明把这份 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。风险提示三处漏一处皮肤就不会出现在选择器里之后拉取上游更新时还得手动同步维护成本不低非必要别走这条路。️ 配色经验与避坑四个现象 → 原因 → 做法现象浅色下很好看一切实深色强调色就隐形了。原因只写了浅色变量块深色模式回落到默认值。 做法皮肤永远成对定义:root[data-skin]和:root.dark[data-skin]两段一起写深色值通常要更亮、更饱和。现象强调底色上的小标签、徽章发虚凑近才看得清。原因--accent-text和--accent-bg对比度不足。 做法拿--accent-bg-strong当测试背景用在线对比度工具核对到 4.5:1 左右再定稿。现象配色靠感觉办公室用着舒服演示场景又显得没精神。原因没把使用场景纳入选色依据。 做法先定场景再选色——办公协作偏冷静蓝、灰更稳演示、创意场景可以上橙、紫这类高饱和色。工具方面Coolors 和 Color Hunt 能快速给出成套方案。现象手机上白天使用界面发白、文字发飘。原因户外阳光环境需要更高对比度浅底配浅字撑不住。 做法移动场景优先浅色主题搭配深色文字或者直接选内置的 geist-contrast 这类高对比皮肤兜底。选完一套界面就是你的了。想看全部主题与皮肤的完整清单、皮肤的底层生效机制以及怎么写一套自定义完整主题直接翻仓库里的 THEMES.md。【免费下载链接】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），仅供参考