diff --git a/hermes_cli/web_server.py b/hermes_cli/web_server.py index 97ebf9e29d..754dd83443 100644 --- a/hermes_cli/web_server.py +++ b/hermes_cli/web_server.py @@ -3260,8 +3260,9 @@ def mount_spa(application: FastAPI): # Built-in dashboard themes — label + description only. The actual color # definitions live in the frontend (web/src/themes/presets.ts). _BUILTIN_DASHBOARD_THEMES = [ - {"name": "default", "label": "Hermes Teal", "description": "Classic dark teal — the canonical Hermes look"}, - {"name": "midnight", "label": "Midnight", "description": "Deep blue-violet with cool accents"}, + {"name": "default", "label": "Hermes Teal", "description": "Classic dark teal — the canonical Hermes look"}, + {"name": "default-large", "label": "Hermes Teal (Large)", "description": "Hermes Teal with bigger fonts and roomier spacing"}, + {"name": "midnight", "label": "Midnight", "description": "Deep blue-violet with cool accents"}, {"name": "ember", "label": "Ember", "description": "Warm crimson and bronze — forge vibes"}, {"name": "mono", "label": "Mono", "description": "Clean grayscale — minimal and focused"}, {"name": "cyberpunk", "label": "Cyberpunk", "description": "Neon green on black — matrix terminal"}, diff --git a/web/src/themes/presets.ts b/web/src/themes/presets.ts index 956bb68c21..7baf6319db 100644 --- a/web/src/themes/presets.ts +++ b/web/src/themes/presets.ts @@ -183,8 +183,30 @@ export const roseTheme: DashboardTheme = { }, }; +/** + * Same look as ``defaultTheme`` but with a larger root font size, looser + * line-height, and ``spacious`` density so every rem-based size in the + * dashboard scales up. For users who find the default 15px UI too dense. + */ +export const defaultLargeTheme: DashboardTheme = { + name: "default-large", + label: "Hermes Teal (Large)", + description: "Hermes Teal with bigger fonts and roomier spacing", + palette: defaultTheme.palette, + typography: { + ...DEFAULT_TYPOGRAPHY, + baseSize: "18px", + lineHeight: "1.65", + }, + layout: { + ...DEFAULT_LAYOUT, + density: "spacious", + }, +}; + export const BUILTIN_THEMES: Record = { default: defaultTheme, + "default-large": defaultLargeTheme, midnight: midnightTheme, ember: emberTheme, mono: monoTheme, diff --git a/website/docs/user-guide/features/extending-the-dashboard.md b/website/docs/user-guide/features/extending-the-dashboard.md index 6382a51151..2cccb6c581 100644 --- a/website/docs/user-guide/features/extending-the-dashboard.md +++ b/website/docs/user-guide/features/extending-the-dashboard.md @@ -265,6 +265,7 @@ Each built-in ships its own palette, typography, and layout — switching produc | Theme | Palette | Typography | Layout | |-------|---------|------------|--------| | **Hermes Teal** (`default`) | Dark teal + cream | System stack, 15px | 0.5rem radius, comfortable | +| **Hermes Teal (Large)** (`default-large`) | Same as default | System stack, 18px, line-height 1.65 | 0.5rem radius, spacious | | **Midnight** (`midnight`) | Deep blue-violet | Inter + JetBrains Mono, 14px | 0.75rem radius, comfortable | | **Ember** (`ember`) | Warm crimson + bronze | Spectral (serif) + IBM Plex Mono, 15px | 0.25rem radius, comfortable | | **Mono** (`mono`) | Grayscale | IBM Plex Sans + IBM Plex Mono, 13px | 0 radius, compact | diff --git a/website/docs/user-guide/features/web-dashboard.md b/website/docs/user-guide/features/web-dashboard.md index 079dbc80bd..5aa09b1c05 100644 --- a/website/docs/user-guide/features/web-dashboard.md +++ b/website/docs/user-guide/features/web-dashboard.md @@ -334,6 +334,7 @@ Built-in themes: | Theme | Character | |-------|-----------| | **Hermes Teal** (`default`) | Dark teal + cream, system fonts, comfortable spacing | +| **Hermes Teal (Large)** (`default-large`) | Same as default with 18px text and roomier spacing | | **Midnight** (`midnight`) | Deep blue-violet, Inter + JetBrains Mono | | **Ember** (`ember`) | Warm crimson + bronze, Spectral serif + IBM Plex Mono | | **Mono** (`mono`) | Grayscale, IBM Plex, compact |