ThemeProvider

Light and dark theme for the whole app.

<ThemeProvider storageKey="my-app-theme" favicon allowSystem>…</ThemeProvider>

Wrap the app once. It follows the operating system theme until the user toggles, or with allowSystem offers "follow the device" as a third, default choice; it remembers the choice in localStorage (under storageKey), mirrors the active theme to <html data-theme="light|dark">, and can set a theme-colored favicon. Tailwind's dark: variant is wired to the same attribute by the preset. See also Foundations: Theme.

import { ThemeProvider } from 'xedonium'

createRoot(document.getElementById('root')).render(
	<ThemeProvider storageKey="my-app-theme" favicon faviconTitle="My App">
		<App />
	</ThemeProvider>
)

API

storageKeystring
Default: 'xedonium-theme-override'
Where the user's choice is stored.
faviconboolean
Default: false
Set the fan favicon for the active theme (adds a <link rel="icon"> if the page has none).
faviconTitlestring
Default: ''
Title embedded in the favicon SVG.
allowSystemboolean
Default: false
Offer a third system mode that follows the device theme. toggleTheme and ThemeToggle then cycle through the three modes.
defaultTheme'light' | 'dark' | 'system'
Default: 'system'
The theme used until the user chooses one. system follows the device. It is not stored; only a different choice is.
childrenReactNode
Your app.

Props props
Prop	Type	Default	Description
`storageKey`	string	`'xedonium-theme-override'`	Where the user's choice is stored.
`favicon`	boolean	`false`	Set the fan favicon for the active theme (adds a <link rel="icon"> if the page has none).
`faviconTitle`	string	`''`	Title embedded in the favicon SVG.
`allowSystem`	boolean	`false`	Offer a third `system` mode that follows the device theme. `toggleTheme` and `ThemeToggle` then cycle through the three modes.
`defaultTheme`	'light' \| 'dark' \| 'system'	`'system'`	The theme used until the user chooses one. `system` follows the device. It is not stored; only a different choice is.
`children`	ReactNode	–	Your app.