ThemeToggle
Light, dark or system. Saves the choice to a cookie through the theme route. The one in the top bar is the same component.
Examples
Sizes
These are live: choosing one changes this page’s theme and saves it, like the toggle in the top bar.
<ThemeToggle action={routes.theme.href()} value={theme} />
<ThemeToggle action={routes.theme.href()} value={theme} size="sm" />Usage
import { ThemeToggle } from '@switchboard/ui'
<ThemeToggle action={routes.theme.href()} value={theme ?? 'system'} size="sm" />Props
Every component also takes mix, for css() and mixins applied after its own style.
ThemeToggle
| Prop | Type | Default | Description |
|---|---|---|---|
| action* | string | – | The app's theme route, e.g. routes.theme.href(). Receives theme=<choice>. |
| value | 'light' | 'dark' | 'system' | 'system' | The saved choice, read from the cookie. |
| size | 'sm' | 'md' | 'md' | Button size: 24 or 28px wide. |
Accessibility
- Without JavaScript each choice is a submit button that posts to action; the route sets the cookie and redirects back.
- Hydrated, it switches <html data-theme> at once and saves in the background, keeping focus on the button.
- The group is labelled "Theme"; each icon button has a hidden text name and aria-pressed for the current choice.
Guidance
Do
- Keep one in a predictable place, the top bar or settings.
- Pass the saved value so the right button is pressed on first paint.
Don’t
- Drop the system option.
- Put it inside another form; it renders its own.