Extras

ThemeProvider and toggle

Dark, light or system, remembered, with a toggle in two looks.

import { ThemeProvider, ThemeToggle, useTheme } from '@alea/ui';

Examples

An icon button that flips dark and light, or a segmented control with system.

Picked: dark · showing: dark

Wrap the app once. scope="element" themes one area instead of the page.

This area has its own provider.

Puts the Alea tokens in dark, light or system mode and shares the choice.

Prop	Type	Default	Description
`brand`	`BrandTheme`	-	Brand changes: accent color, radius, density, fonts.
`className`	`string`	-	Class names for the wrapper (scope="element").
`defaultTheme`	`"dark" \| "light" \| "system"`	`'dark'`	Theme to start with when nothing is stored. Defaults to dark.
`navigate`	`((path: string, options?: any) => void)`	-	Your router's navigate function (React Router's useNavigate(), Next's router.push): links in the kit then navigate without a reload.
`onThemeChange`	`((theme: ThemeName) => void)`	-	Called with the new theme when it changes.
`scope`	`"document" \| "element"`	`'document'`	Where data-theme goes: the document root (default) or a wrapper div.
`storageKey`	`string \| null`	`'alea-theme'`	localStorage key to remember the choice; pass null to not store it.
`theme`	`"dark" \| "light" \| "system"`	-	Controlled theme.
`useHref`	`((href: string) => string)`	-	Your router's useHref, for routers with a base path.

Switches the theme (needs ThemeProvider for system and storage).

Prop	Type	Default	Description
`appearance`	`"icon" \| "segmented"`	`'icon'`	icon: one button cycling dark/light; segmented: dark, light, system.
`className`	`string`	-	Extra class names.

Key	Does
`Enter` or `Space`	Switches the theme

Don't