components

Theme

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

Show code

Theme strategy:

Radius:

Accent color:

API Reference

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

Property	Type	Default	Description
`defaultColor`	`union`	"neutral"	Default accent color
`colorKey`	`string`		Storage key for accent color
`defaultStrategy`	`union`	ThemeSystem	Default theme strategy
`strategyKey`	`string`		Storage key for theme strategy
`defaultRadius`	`union`	"medium"	Default radius
`radiusKey`	`string`		Storage key for radius
`metaThemeColors`	`MetaThemeColorsType`	MetaThemeColors	Content colors for meta theme-color tag
`hasBackground`	`boolean`	true	Should set the background color
`track`	`boolean`	true	Should track storage change from other tab
`disableTransitions`	`boolean`	true	Should disable css transition when theme change
`disableHeadScriptInjection`	`boolean`	false	Should disable init theme script injection. This script prevent FOUC.
`customThemeColors`	`ColorMap`		Custom theme colors
`ref` $bindable	`HTMLDivElement`		Reference to the rendered DOM element.
`children`	`Snippet`		ThemeRootProvider content to render

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

Property	Type	Description
`color`	`union`	Static Accent color or resolved from ThemeRootProvider.
`strategy`	`union`	Static theme strategy or resolved from ThemeRootProvider.
`radius`	`union`	Static radius or resolved from ThemeRootProvider.
`hasBackground`	`boolean`	Should set the background color
`ref` $bindable	`HTMLDivElement`	Reference to the rendered DOM element.
`children`	`Snippet`	ThemeChildProvider content to render