Theming
The dark / light / glassmorphic palettes and the semantic color tokens that adapt to them.
Every generated UI is themeable. A single top-level theme prop restyles an entire
component tree, and semantic color tokens let the LLM pick colors by meaning rather
than hard-coding hex — so the same A2UI JSON looks right in any theme. The engine lives in
(A2UIThemeData).
The three themes
| Theme | Feel | Accent |
|---|---|---|
dark | Deep charcoal surfaces, light text | #007AFF |
light | White/grey surfaces, dark text (shell default) | #007AFF |
glassmorphic | Translucent surfaces + blur | #5E5CE6 |
Set it once at the top of a UI:
{ "theme": "glassmorphic", "type": "column", "children": [ … ] }A2UIThemeData.fromName(name) resolves the string, defaulting to light to match the
white/blue shell.
"…and make it glassmorphic" — adding a vibe to any request flips the
theme.
Semantic color tokens
Instead of a hex value, any color prop can use a token that resolves against the active
theme. This is the preferred way to color generated UIs — it stays readable when the theme
changes.
| Token(s) | Role |
|---|---|
primary / textPrimary | Main text |
secondary / textSecondary | Subdued text |
muted / textMuted | Faint text |
accent / accentColor | Brand highlight |
surface / surfaceBg | Surface background |
card / cardBg | Card background |
border / borderColor | Borders |
success | Green success |
error | Red error |
warning | Amber warning |
{ "type": "text", "content": "Saved", "color": "success" }
{ "type": "container", "color": "card", "child": { "type": "text", "content": "Hi", "color": "textPrimary" } }Each A2UIThemeData defines all of these: cardBg, surfaceBg, textPrimary,
textSecondary, textMuted, accentColor, borderColor, successColor, errorColor,
warningColor.
Hex still works
You can always use explicit ARGB hex strings for brand-specific or illustrative colors (diagrams, charts):
{ "type": "gauge", "value": 80, "color": "0xFF9C27B0" }Colors must be strings ("0xFF007AFF"), never bare numbers. On light backgrounds use
dark text (e.g. 0xFF1D1D1F or the textPrimary token) — never white-on-white. The
layout validator won't catch a contrast mistake, but semantic tokens
avoid it automatically.
How it flows
The renderer resolves each token through the active A2UIThemeData as it builds widgets, so
switching theme recolors the whole tree consistently. Theme changes also fire a
theme.changed event on the event bus so other widgets can
react.
Picking a theme globally
Beyond per-UI theme, the Settings app lets you choose the
desktop's default theme (dark / light / glassmorphic), and you can ask for it directly —
"switch to the glassmorphic theme".