Kacper/nanobot-voice-interface

kacper 4dfb7ca3cc

CI / Backend Checks (push) Failing after 36s

Details

CI / Frontend Checks (push) Failing after 40s

Details

feat: unify card runtime and event-driven web ui

2026-04-06 15:42:53 -04:00

1.2 KiB

Raw Permalink Blame History

Theming

The app theme is driven by shared CSS custom properties.

Source Of Truth

Theme presets live in frontend/src/theme/themes.ts.
The selected theme is persisted in local storage under nanobot.theme.
The active theme is applied to document.documentElement before the app renders.

How To Change The App Theme

Edit or add a preset in frontend/src/theme/themes.ts:

label
swatch
tokens

The picker in the conversation drawer reads directly from that file, so new presets appear automatically.

Card Theming

Cards inherit the same variables as the app shell.

Prefer these semantic token families:

--theme-card-neutral-*
--theme-card-warm-*
--theme-card-success-*
--card-*
--helper-card-*
--theme-text*
--theme-border*
--theme-accent*
--theme-status-*

Do not hardcode generic shell colors like #ffffff, #111827, or app-background gradients in new cards.

Runtime Access

Dynamic cards can read theme values through the runtime host:

host.getThemeName()
host.getThemeValue("--theme-accent")

For values that should live-update when the theme changes, prefer CSS variables directly:

<div style="color:var(--theme-card-neutral-text)"></div>