Hermes Dashboard Light Theme 改造指南

背景

Hermes Agent 的 Web Dashboard 原本采用深青色（dark teal）主题，视觉风格偏向赛博朋克——暗底、琥珀色文字、锯齿化像素字体（Mondwest、RulesCompressed、RulesExpanded、Collapse）。这种风格虽然独特，但在日常使用中存在几个问题：

像素字体可读性差 — Mondwest 等自定义字体在低 DPI 屏幕上锯齿明显，中文环境下尤为突出
暗色主题不适合长时间使用 — 在明亮环境下对比度过高，容易视觉疲劳
与现代 SaaS 工具视觉割裂 — Linear、Vercel、Stripe 等主流工具均已采用亮色设计

![Hermes Dashboard Light Theme 改造指南__assets/image-20260414085354195.png](Hermes Dashboard Light Theme 改造指南__assets/image-20260414085354195.png)

因此我们将其改造为现代亮色主题，以 Inter + JetBrains Mono 为基础字体栈，主色选用紫色（#6d5dfc），整体风格干净克制。

改造概览

设计语言

属性	旧值（Dark Teal）	新值（Light）
背景色	`#041C1C`	`#fafafa`

| 前景色 | #ffe6cb | #0f0f0f |
| 卡片色 | #062424 | #ffffff |
| 主色 | #ffe6cb（琥珀） | #6d5dfc（紫色） |
| 边框色 | 半透明琥珀 | #e4e4e7 |
| 正文字体 | Mondwest | Inter |
| 等宽字体 | Courier Prime | JetBrains Mono |
| 圆角 | 0（方正） | xl（圆润） |
| 阴影 | 无 | shadow-sm |

涉及文件（19 个）

核心设计令牌：

index.css — 全部 CSS 变量、字体栈、全局效果（noise overlay / warm glow）
index.html — 添加 Google Fonts CDN（Inter + JetBrains Mono）

UI 基础组件：

badge.tsx — 圆角药丸样式，浅色背景变体
card.tsx — rounded-xl + shadow-sm + 白底
button.tsx — rounded-lg，紫色主色，focus-visible ring
input.tsx / select.tsx — 白底，ring-2 focus 样式
switch.tsx — 圆角滑块，紫色 checked，白色 thumb
label.tsx — 去掉 uppercase / letter-spacing
tabs.tsx — 去掉 uppercase，紫色 active indicator

页面与布局：

App.tsx — 全新 header：紫色 logo icon + pill 导航栏 + 白底毛玻璃
OAuthLoginModal.tsx — rounded-xl
AutoField.tsx — textarea 白底 + ring-2
Toast.tsx — 白底圆角 + shadow-lg
ConfigPage.tsx / CronPage.tsx — textarea 适配
AnalyticsPage.tsx — 清除所有硬编码暗色（#ffe6cb → text-primary）
SkillsPage.tsx — amber-300 → amber-600
StatusPage.tsx — 去 font-display

Patch 生成与使用

我把我的修改生成了一个patch: https://gist.github.com/smallnest/e2e55b22e305b16daac696f2e3eb1242 , 你可以使用下面的方法应用这个patch:

应用方法

在 hermes-agent 项目根目录下执行：

1 2	git apply hermes-dashboard-light-theme.patch cd web && npx vite build

构建产物会输出到 hermes_cli/web_dist/，重启 Hermes Agent 即可看到新主题。

回滚

1	git apply -R hermes-dashboard-light-theme.patch

效果

![Hermes Dashboard Light Theme 改造指南__assets/image-20260414085544497.png](Hermes Dashboard Light Theme 改造指南__assets/image-20260414085544497.png)

技术细节

字体加载策略

通过 Google Fonts CDN 加载 Inter（400/500/600/700）和 JetBrains Mono（400/500），在 index.html 中使用 <link> 标签配合 font-display: swap 确保首屏文字不闪烁。

CSS 中保留了 font-display、font-expanded、font-compressed、font-courier 等 utility class，但全部映射到 Inter / JetBrains Mono，确保旧组件中残留的 class 引用不会报错。

全局效果适配

原有的 noise overlay 和 warm glow 效果从暗色模式适配为亮色：

Noise overlay: mix-blend-mode 从 color-dodge 改为 overlay，opacity 从 0.10 降至 0.015
Warm glow: 从琥珀色径向渐进改为淡紫色，mix-blend-mode 从 lighten 改为 multiply

这两个效果在亮色主题下非常克制，几乎不可察觉，但保留了品牌视觉的层次感。

Badge 颜色体系

Badge 从暗色半透明改为浅色实底，更符合亮色设计规范：

Variant	旧	新
default	`border-foreground/20 bg-foreground/10`	`border-primary/20 bg-primary/10 text-primary`
destructive	`border-destructive/30 bg-destructive/15`	`border-red-200 bg-red-50 text-red-600`
success	`grain border-emerald-600/30 bg-emerald-950/70`	`border-emerald-200 bg-emerald-50 text-emerald-700`
warning	`border-warning/30 bg-warning/15`	`border-amber-200 bg-amber-50 text-amber-700`