尧图网页设计 
自定义 Hermes WebUI 主题与皮肤11 款内置配色的完整指南【免费下载链接】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晚上 11 点守着定时任务盯着一个刺眼的浅色界面很难熬白天对外演示时又希望配色统一、显专业。Hermes WebUI 把界面外观拆成了两层主题管明暗浅色、深色、跟随系统皮肤管强调色——按钮、链接、选中态那圈颜色。两个维度互不干扰各挑一个就能完成个性化。先花 30 秒把界面调舒服再决定要不要做一块专属皮肤。30 秒换掉整个界面最快的路径不在设置面板里而在输入框。直接打斜杠命令/theme dark # 切深色 /theme light # 切浅色 /theme system # 跟随系统 /theme ares # 换成红色强调 /theme mono # 换成灰色强调这条命令是通吃的填主题名就只动明暗填皮肤名就只动强调色另一个维度保持原样。填错名字会弹出全部可选值照着敲即可。另一条路是右上角齿轮图标进入「外观」主题是一张三选卡片皮肤是一个网格点哪个格子整张界面立刻换装不用刷新。皮肤多、肉眼比对的时候这条路线比敲命令省事得多。主题 × 皮肤为什么改几个变量就能换掉整张脸拆开两个维度意味着你可以换灯不换墙深夜用深色加深沉的海蓝白天用浅色加大地色两边各存各的。机制不复杂。主题落在html的一个 class 上——深色模式挂.dark浅色移除它驱动背景、文字、面板这一大类变量皮肤则是给html挂一个data-skin名字只覆盖--accent家族的取值。而链接、按钮激活态、焦点圈、logo 渐变界面里这些显眼位置全部引用的是同一批变量所以改五个值整张脸跟着重绘。内置皮肤共 11 款按强调色区分Default 经典金、Ares 红、Mono 灰、Slate 蓝灰、Poseidon 海蓝、Sisyphus 紫、Charizard 橙、Sienna 大地色、Catppuccin、Nous 技术蓝、Geist Contrast 高对比。不改源码添加自定义皮肤 皮肤的本质就是一段 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; }落地不用碰仓库代码建一个扩展目录把 CSS 放进去启动时用两个环境变量声明资产目录和要注入的样式表mkdir -p ~/.hermes/webui-extension cp my-skin.css ~/.hermes/webui-extension/ HERMES_WEBUI_EXTENSION_DIR~/.hermes/webui-extension \ HERMES_WEBUI_EXTENSION_STYLESHEET_URLS/extensions/my-skin.css ./start.sh页面启动后会自动注入/extensions/my-skin.css。皮肤名在settings.json里按字符串原样保存所以你给html挂上data-skinmy-skin之后重启、换设备登录同一账号都不会丢。扩展机制还留了window.registerHermesSkin()这个 JS 注册入口支持更精细的声明起步阶段纯 CSS 就够。配色实操选色与自检清单选色先看用途定调性蓝系显专业冷静绿系偏自然舒缓紫系有创意感橙系活泼外放。定好调性之后拿这张清单逐项过自检项关注点深浅双模式深色里跳脱的取值在浅色下可能直接看不清两组变量必须分别验证--accent-text对--accent-bg这组颜色常垫在小标签、徽章后面对比偏弱会看成糊的一片无障碍正文和关键操作尽量达到 WCAG 2.1 AA 的对比度移动端户外亮度下对比要再留余量触控目标别太小大面积模糊等昂贵效果能省则省更进一步从皮肤升级为完整主题皮肤只动强调色。想连背景、文字色、代码块底色一起换心情就要重写基础调色板变量契约就写在static/style.css顶部的:root与:root.dark块里照着抄结构即可:root[data-thememy-theme] { --bg: #FAF9F5; --sidebar: #F0EEE6; --surface: #FFFFFF; --border: #E7E4DB; --text: #1F1E1C; --muted: #6B6A63; }提醒一句多数时候皮肤就够了只有当现有明暗模式都不合身比如想要 OLED 纯黑变体、无障碍高对比主题时才值得动完整主题。字体大小四档可调「外观」里主题、皮肤旁边就是字号共四档小、标准、大、超大。它通过html的data-font-size缩放根字号正文、消息、文件树跟着等比变化设置随主题、皮肤一起持久化。外观设置为什么不会丢、不会闪选择存了两份。浏览器localStorage一份head里一段内联脚本在样式表加载前就把它读出来所以你刷新页面第一眼看到的就是正确外观不会先闪一下浅色再跳深色。服务端一份POST /api/settings把theme、skin两个键写进settings.json启动时再读回来还原。换浏览器、清缓存都不怕登录同一账号外观原样回来。答疑Q装了 CSS界面却没变化A打开开发者工具先看html——data-skin还是旧值说明皮肤没挂上属性对了但颜色没变去查/extensions/下那个请求是不是 200、data-skin名和 CSS 选择器里的名字有没有拼错。Q怎么回退A输入框敲/theme default或在设置面板选回 Default 皮肤和 System 主题。全程只是把设置值写回去没有残留。Q团队能统一配色吗A能。皮肤就是一份纯 CSS 文件大家把同一份放进扩展目录或用配置管理统一下发视觉就统一了皮肤名按字符串存储无需改任何源码。Q皮肤可以只适配深色吗A可以。通过扩展注册时声明scheme: dark选中该皮肤时 WebUI 会自动对齐基础 class防止浅色基础变量混进来打架。从挑皮肤到写十五行 CSSHermes WebUI 外观个性化的门槛很低收益却每次打开页面都在发生眼睛更舒服、项目一眼可辨、团队视觉统一。想深入变量契约或扩展机制翻 THEMES.md 和 static/style.css 里的原始定义机制细节在 docs/EXTENSIONS.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），仅供参考 自定义 Hermes WebUI 主题与皮肤：11 款内置配色的完整指南
自定义 Hermes WebUI 主题与皮肤11 款内置配色的完整指南【免费下载链接】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晚上 11 点守着定时任务盯着一个刺眼的浅色界面很难熬白天对外演示时又希望配色统一、显专业。Hermes WebUI 把界面外观拆成了两层主题管明暗浅色、深色、跟随系统皮肤管强调色——按钮、链接、选中态那圈颜色。两个维度互不干扰各挑一个就能完成个性化。先花 30 秒把界面调舒服再决定要不要做一块专属皮肤。30 秒换掉整个界面最快的路径不在设置面板里而在输入框。直接打斜杠命令/theme dark # 切深色 /theme light # 切浅色 /theme system # 跟随系统 /theme ares # 换成红色强调 /theme mono # 换成灰色强调这条命令是通吃的填主题名就只动明暗填皮肤名就只动强调色另一个维度保持原样。填错名字会弹出全部可选值照着敲即可。另一条路是右上角齿轮图标进入「外观」主题是一张三选卡片皮肤是一个网格点哪个格子整张界面立刻换装不用刷新。皮肤多、肉眼比对的时候这条路线比敲命令省事得多。主题 × 皮肤为什么改几个变量就能换掉整张脸拆开两个维度意味着你可以换灯不换墙深夜用深色加深沉的海蓝白天用浅色加大地色两边各存各的。机制不复杂。主题落在html的一个 class 上——深色模式挂.dark浅色移除它驱动背景、文字、面板这一大类变量皮肤则是给html挂一个data-skin名字只覆盖--accent家族的取值。而链接、按钮激活态、焦点圈、logo 渐变界面里这些显眼位置全部引用的是同一批变量所以改五个值整张脸跟着重绘。内置皮肤共 11 款按强调色区分Default 经典金、Ares 红、Mono 灰、Slate 蓝灰、Poseidon 海蓝、Sisyphus 紫、Charizard 橙、Sienna 大地色、Catppuccin、Nous 技术蓝、Geist Contrast 高对比。不改源码添加自定义皮肤 皮肤的本质就是一段 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; }落地不用碰仓库代码建一个扩展目录把 CSS 放进去启动时用两个环境变量声明资产目录和要注入的样式表mkdir -p ~/.hermes/webui-extension cp my-skin.css ~/.hermes/webui-extension/ HERMES_WEBUI_EXTENSION_DIR~/.hermes/webui-extension \ HERMES_WEBUI_EXTENSION_STYLESHEET_URLS/extensions/my-skin.css ./start.sh页面启动后会自动注入/extensions/my-skin.css。皮肤名在settings.json里按字符串原样保存所以你给html挂上data-skinmy-skin之后重启、换设备登录同一账号都不会丢。扩展机制还留了window.registerHermesSkin()这个 JS 注册入口支持更精细的声明起步阶段纯 CSS 就够。配色实操选色与自检清单选色先看用途定调性蓝系显专业冷静绿系偏自然舒缓紫系有创意感橙系活泼外放。定好调性之后拿这张清单逐项过自检项关注点深浅双模式深色里跳脱的取值在浅色下可能直接看不清两组变量必须分别验证--accent-text对--accent-bg这组颜色常垫在小标签、徽章后面对比偏弱会看成糊的一片无障碍正文和关键操作尽量达到 WCAG 2.1 AA 的对比度移动端户外亮度下对比要再留余量触控目标别太小大面积模糊等昂贵效果能省则省更进一步从皮肤升级为完整主题皮肤只动强调色。想连背景、文字色、代码块底色一起换心情就要重写基础调色板变量契约就写在static/style.css顶部的:root与:root.dark块里照着抄结构即可:root[data-thememy-theme] { --bg: #FAF9F5; --sidebar: #F0EEE6; --surface: #FFFFFF; --border: #E7E4DB; --text: #1F1E1C; --muted: #6B6A63; }提醒一句多数时候皮肤就够了只有当现有明暗模式都不合身比如想要 OLED 纯黑变体、无障碍高对比主题时才值得动完整主题。字体大小四档可调「外观」里主题、皮肤旁边就是字号共四档小、标准、大、超大。它通过html的data-font-size缩放根字号正文、消息、文件树跟着等比变化设置随主题、皮肤一起持久化。外观设置为什么不会丢、不会闪选择存了两份。浏览器localStorage一份head里一段内联脚本在样式表加载前就把它读出来所以你刷新页面第一眼看到的就是正确外观不会先闪一下浅色再跳深色。服务端一份POST /api/settings把theme、skin两个键写进settings.json启动时再读回来还原。换浏览器、清缓存都不怕登录同一账号外观原样回来。答疑Q装了 CSS界面却没变化A打开开发者工具先看html——data-skin还是旧值说明皮肤没挂上属性对了但颜色没变去查/extensions/下那个请求是不是 200、data-skin名和 CSS 选择器里的名字有没有拼错。Q怎么回退A输入框敲/theme default或在设置面板选回 Default 皮肤和 System 主题。全程只是把设置值写回去没有残留。Q团队能统一配色吗A能。皮肤就是一份纯 CSS 文件大家把同一份放进扩展目录或用配置管理统一下发视觉就统一了皮肤名按字符串存储无需改任何源码。Q皮肤可以只适配深色吗A可以。通过扩展注册时声明scheme: dark选中该皮肤时 WebUI 会自动对齐基础 class防止浅色基础变量混进来打架。从挑皮肤到写十五行 CSSHermes WebUI 外观个性化的门槛很低收益却每次打开页面都在发生眼睛更舒服、项目一眼可辨、团队视觉统一。想深入变量契约或扩展机制翻 THEMES.md 和 static/style.css 里的原始定义机制细节在 docs/EXTENSIONS.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），仅供参考