Theming

Pick a built-in theme, hand over your own colors, or override the CSS variables directly.

Themes

tsx

<Toaster theme="light" />
<Toaster theme="system" />   {/* follows the OS */}
<Toaster theme={{ background: "#2b1055", foreground: "#ffffff", success: "#7cffcb" }} />

Switch the island on this page between dark, light, system (follows the OS) and a custom theme. Each button sets the real theme prop. The site theme menu in the header is separate.

Custom theme

CustomTheme keys take any CSS color, and all are optional. Missing keys fall back to the dark theme.

Key	Controls
`background`	Island fill.
`foreground`	Primary text.
`muted`	Secondary text.
`ring`	Hairline around the island.
`button`	Action button fill.
`success` `error` `warning` `info`	State accents.
`loading` `live`	Spinner and live-activity accents.

CSS variables

Everything is a CSS variable, so you can also override styles directly:

css

.dynaura-root {
  --dynaura-font: "Inter", system-ui, sans-serif;
  --dynaura-duration: 500ms; /* morph speed */
  --dynaura-success: #00c853;
}

The default font is Bricolage Grotesque, loaded by an @import on the first line of dynaura/styles.css. To self-host or skip the request, copy the stylesheet without that line and set --dynaura-font.

Themes

Custom theme

CSS variables

Font