components

Theme

Theme provider components. Wrap your app with ThemeProvider to configure the global theme mode, color, and radius.

Source

Show code

Theme modes:

Radius:

Accent color:

For a full guide on usage, configuration, and useTheme, see the Theming page.

API Reference

ThemeProviderProps

Property	Type	Default	Description
`mode`	`union`	ThemeSystem	Default mode. Defaults to `'system'`
`color`	`union`		Default accent color. Defaults to `'neutral'`
`radius`	`union`		Default radius scale. Defaults to `'medium'`
`transitions`	`boolean`	false	Allow CSS transitions during theme changes. Defaults to `false`
`systemTracking`	`boolean`	true	Track OS color-scheme changes in real time. Defaults to `true`
`metaColors`	`{ light: string; dark: string; }`		Override content values for the `<meta name="theme-color">` tag
`storage`	`{ colorKey?: string \| undefined; radiusKey?: string \| undefined; modeKey?: string \| undefined; }`		localStorage keys used to persist each value
`script`	`boolean`	true	Inject the anti-FOUC inline script into `<head>`. Defaults to `true`
`children`	`Snippet`		ThemeProvider content — receives a {@link ThemeRootContext}

ThemeScopeProps

Extends all the standard HTML attributes of the `<div>` element.

Property	Type	Description
`mode`	`union`	Override the mode for this scope. Inherits from parent when omitted
`color`	`union`	Override the accent color for this scope. Inherits from parent when omitted
`radius`	`union`	Override the radius scale for this scope. Inherits from parent when omitted
`hasBackground`	`boolean`	Apply background color token to the scope element. Defaults to `true`
`ref` $bindable	`HTMLDivElement`	Reference to the rendered DOM element
`children`	`Snippet`	ThemeScope content — receives a read-only {@link ThemeContext}

Type Definition

ThemeContext

/**
 * Read-only snapshot of the current theme values. Passed to children snippets.
 */
export type ThemeContext = {
    /**
     * Active mode (system | light | dark)
     */
    readonly mode: Mode;
    /**
     * Resolved theme — never 'system'; always 'light' or 'dark'
     */
    readonly theme: Theme;
    /**
     * Active accent color
     */
    readonly color: Color;
    /**
     * Active border-radius scale
     */
    readonly radius: Radius;
    /**
     * OS-level color scheme detected via `prefers-color-scheme`, or undefined on SSR
     */
    readonly system: Theme | undefined;
};

/**
 * ThemeContext extended with setters — exposed by ThemeProvider only
 */
export type ThemeRootContext = ThemeContext & {
    /**
     * Set the active mode and persist it to storage
     */
    setMode(value: Mode): void;
    /**
     * Set the active accent color and persist it to storage
     */
    setColor(value: Color): void;
    /**
     * Set the active radius and persist it to storage
     */
    setRadius(value: Radius): void;
};