feat(dashboard): change UI font from the theme picker, independent of theme (#41145)
The dashboard font is now selectable from the UI, not just YAML. A new Font section in the header theme picker overrides the UI font of whatever theme is active; the choice is orthogonal to the theme and survives theme switches. Each theme keeps its own font as the default — picking "Theme default" clears the override. - web/src/themes/fonts.ts: curated font catalog (system + Google Fonts across sans/serif/mono), each with a family stack and optional webfont URL. The catalog is the only injected-font surface — no free-text URL box, so the injected <link> origins stay fixed. - web/src/themes/context.tsx: font-override state (localStorage + server), applied after theme typography so it wins; theme apply re-asserts it, and clearing re-runs theme apply to restore the theme's own font. Mono is left to the theme so code/terminal are untouched. - web/src/components/ThemeSwitcher.tsx: Font section with grouped, self- previewing font rows and a "Theme default" clear option. - hermes_cli/web_server.py: GET/PUT /api/dashboard/font persisting to config.yaml dashboard.font, with a server-side id allow-list (unknown ids coerce to the theme sentinel). - i18n + types, api client methods, tests, and docs. Validation: 6 new backend endpoint tests pass; tsc + vite build clean; live browser test confirmed pick/persist/survive-theme-switch/clear all work.
This commit is contained in:
@@ -131,6 +131,22 @@ typography:
|
||||
letterSpacing: "0.04em"
|
||||
```
|
||||
|
||||
##### Changing the font from the UI (no YAML)
|
||||
|
||||
The theme picker in the dashboard header has a **Font** section below the
|
||||
theme list. Pick any font there and it overrides the body font of whatever
|
||||
theme is active — the choice is independent of the theme and persists across
|
||||
theme switches (stored in `config.yaml` under `dashboard.font`). Choose
|
||||
**Theme default** to clear the override and fall back to the active theme's
|
||||
own `fontSans`.
|
||||
|
||||
The picker offers a curated catalog (system stacks plus a set of Google-Fonts
|
||||
families across sans / serif / mono). It deliberately does **not** accept a
|
||||
free-text font URL — the font's stylesheet is injected as a `<link>`, so the
|
||||
catalog keeps the injected origins fixed. For a fully custom face, set
|
||||
`fontSans` + `fontUrl` in a theme YAML as shown above. The theme's `fontMono`
|
||||
(code blocks, terminal) is always left untouched by the UI override.
|
||||
|
||||
#### Layout
|
||||
|
||||
| Key | Values | Description |
|
||||
|
||||
@@ -1023,6 +1023,8 @@ The dashboard ships with six built-in themes and can be extended with user-defin
|
||||
|
||||
**Switch themes live** from the header bar — click the palette icon next to the language switcher. Selection persists to `config.yaml` under `dashboard.theme` and is restored on page load.
|
||||
|
||||
**Change the font independently** from the same picker — the **Font** section below the theme list overrides the UI font of whatever theme is active. The choice persists across theme switches (`config.yaml` → `dashboard.font`); pick **Theme default** to clear it and return to the active theme's own font.
|
||||
|
||||
Built-in themes:
|
||||
|
||||
| Theme | Character |
|
||||
|
||||
Reference in New Issue
Block a user