快速定制 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 实现不碰一行后端代码。本文按五分钟切换 → 写一个专属皮肤 → 重写整个主题架构三个层次推进看完你就能把 AI 助手界面调成自己的样子。第一层5 分钟换好明暗模式外观由两个独立控件决定。先说主题Theme它只有三档系统跟随操作系统的深色/浅色偏好实时响应默认档深色深色表面长时间盯屏幕不刺眼浅色亮底黑字白天高对比度环境更清楚切换有两条路看手顺哪个路径一设置面板。点右上角齿轮图标进入外观Appearance页面主题卡片里点浅色 / 深色 / 系统点哪档立刻生效所见即所得。路径二斜杠命令。在输入框直接敲命令比点鼠标更快/theme light # 切到浅色 /theme dark # 切到深色 /theme system # 跟随系统 /theme ares # 顺手把皮肤也切成 Ares /theme mono # 或者切成灰阶 Mono/theme一个命令同时认主题名和皮肤名输入主题名就只动明暗输入皮肤名就只动强调色另一条轴保持不变。想改字体也在这个页面主题和皮肤选择器正下方小、默认、大、超大四档改完和主题、皮肤一起持久化。小适合高分屏超大适合演示或视力不佳另外 Hermes WebUI 支持手机访问移动端户外光线下对比度要求更高选皮肤时顺手把这点考虑进去。第二层认识 12 款内置皮肤 皮肤Skin只负责强调色系——链接、按钮、激活状态、焦点环这些点睛位置用什么颜色。内置 12 款各带浅色 深色两套变体在任一主题下都能正常显示皮肤一句话风格Default经典 Hermes 金温暖低调Ares烈焰红高能量、有攻击性Mono中性灰阶零干扰适合深度专注Slate板岩蓝灰沉稳克制Poseidon海洋蓝长时间会话的冷静之选Sisyphus鲜明紫有辨识度但不吵Charizard暖橙活泼且护眼Sienna陶土与沙色的大地色调柔和自然CatppuccinCatppuccin Latte/Mocha 配色Mauve 强调色Nous钢蓝强调色带虚线技术感表面Geist ContrastGeist 风格单色表面暗色模式下#FFF175强调色ZeusOLED 级近黑表面保留默认金强调色偏深色专用选皮肤用外观页的皮肤网格点选或者敲/theme 皮肤名例如/theme catppuccin、/theme zeus。主题和皮肤到底差在哪用 CSS 变量浏览器原生的可配置变量来理解最直观主题定义的是底色盘——背景、文字、表面、边框这一整套皮肤覆盖的只是其中--accent开头的一组强调色变量。皮肤以data-skin名称属性挂在html元素上生效主题则是.dark类的有无。两个轴正交所以 3 种主题 × 12 款皮肤能拼出 36 种界面换强调色不用重新选明暗换明暗也不用重新选颜色。用 5 个 CSS 变量写出专属皮肤嫌 12 款都不对味一个皮肤就是一小段 CSS核心只需 5 个变量--accent主强调色按钮、链接、激活态--accent-hover悬停时的强调色--accent-bg/--accent-bg-strong浅淡与加深的强调色背景--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; }写好后怎么生效两条路推荐第一条。方式一扩展目录推荐不动源码把 CSS 放进扩展目录启动时用两个环境变量告诉 WebUI 从哪加载export HERMES_WEBUI_EXTENSION_DIR~/.hermes/webui-extension export HERMES_WEBUI_EXTENSION_STYLESHEET_URLS/extensions/my-skin.css ./start.sh执行后样式表会被注入页面你的皮肤即刻可用。详细规则见 扩展指南。注意别把扩展目录指到共享主机上人人可写的路径扩展 JS 持有完整会话权限只加载自己信任的代码。方式二改源码高级用户把 CSS 块加进 样式文件再在static/index.html的皮肤选择器和static/commands.js的cmdTheme()命令列表里注册名称走 PR 提交。适合想让它成为内置选项的场景。配色三个实用建议对比度先行--accent-text放在--accent-bg上必须读得清加深的--accent-bg-strong常垫在小标签和芯片背后对比不足会糊成一团。目标是 WCAG 2.1 AA 标准。色彩心理学速查蓝色系显专业可信适合工作场景绿色系自然平衡适合创作紫色系有创意和神秘感适合设计橙色系活力友好适合协作。工具兜底Coolors 快速出方案、Adobe Color 按色彩理论推、Color Hunt 直接抄现成组合。第三层重写完整主题 设置如何持久化皮肤只换点睛完整主题换的是整套基因。大多数时候你真需要的只是皮肤只有当现有明暗模式都不合身比如要做高对比无障碍主题或 OLED 纯黑变体才值得动主题层。主题要重定义的是核心底色盘变量范围比皮肤大得多:root[data-thememy-theme] { --bg: #FAF9F5; /* 背景 */ --sidebar: #F0EEE6; /* 侧边栏 */ --surface: #FFFFFF; /* 表面 */ --border: #E7E4DB; /* 边框 */ --text: #1F1E1C; /* 正文 */ --muted: #6B6A63; /* 次要文字 */ --code-bg: #F5F3EC; /* 代码块背景 */ } :root.dark[data-thememy-theme] { --bg: #1F1E1C; --sidebar: #262522; --surface: #2C2B28; --border: #3A3935; --text: #EDEBE3; --muted: #A3A197; --code-bg: #2A2926; }变量契约以 样式文件 顶部:root和:root.dark两个块为准照抄那份清单逐项覆盖即可。最后说说这套设置为什么刷新不丢、不闪。链路是这样的你的选择先存进浏览器localStorage页面head里一段内联脚本在样式表加载前就读到它所以首帧渲染就是对的配色无闪烁同时通过POST /api/settings同步到服务器落在settings.json的theme和skin键下启动时再经GET /api/settings拉回来。换浏览器、换设备服务器端的偏好也能接上。顺带一提skin键接受任意字符串所以自定义皮肤名只要 CSS 加载了名字照样能存住。三条避坑经验从现有皮肤抄起步。打开static/style.css找一段现成的data-skin块照着改比对着空白写快得多变量命名和结构都不用猜。浅色深色都要过一遍。在深色下很跳的皮肤浅色下可能糊到没法读:root[data-skin]和:root.dark[data-skin]两段都得测桌面和手机都看一眼。能用变量就别硬编码。整个界面就是一套 CSS 变量驱动的改变量影响全局直接写死选择器级的颜色是给自己挖坑。想先把内置的 36 种组合挨个点开试试再从里面挑一个最接近的往下改是上手最快的一条路。相关资源完整主题文档主题、皮肤、字体与内部机制的权威说明样式文件全部主题与皮肤的 CSS 变量定义扩展指南扩展目录、样式表注入与信任模型的详细说明设置界面外观选择器的界面实现与/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考