How the Theme Config panel works, and how to make its choices permanent in your own app.
The Theme Config panel in the header changes two things: the accent colour and the typeface. Both are token-level choices, which is why they reach every block, dialog and popover on the site — including this page.
Chakra v3 exposes a virtual palette called colorPalette. Any component that
styles itself with colorPalette.solid, colorPalette.fg or
colorPalette.subtle follows whichever palette is in scope.
Chakra sets html { color-palette: gray } by default. Toro UI overrides that at
the root, keyed off a data-accent attribute:
Because the rule lives on :root, portalled content inherits it too — a
dialog rendered into document.body still picks up your accent.
Calling createSystem again on every change works, but it regenerates the
entire stylesheet for a two-variable change. Repointing CSS variables is a
single style recalculation.
In your own app you do not need the attribute indirection. Pick the palette once in your system config:
To use a palette Chakra does not ship, define the scale and its semantic
tokens, then point colorPalette at it:
Every Toro UI block picks the new palette up without edits.
The font follows the same pattern — a CSS variable the token layer reads:
Swap the variable for one produced by next/font and the whole library
re-typesets.
| Token | Used by |
|---|---|
fonts.heading | Heading, block titles |
fonts.body | Everything else |
fonts.mono | Code, code blocks |