Component
ThemeToggle
A compact icon button that cycles light / dark / system, wired to `createTheme()`.
import { ThemeToggle } from '@loidolt/theme-svelte';
Example
Preference: system / resolved: light / system: light
Notes
- The icon and accessible name show the active preference; each press advances to the next one.
- Keep system in the cycle unless you have a reason not to: it lets the theme continue following the device preference.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
theme required | Theme | — | The store from createTheme(). |
class | string | — | |
darkLabel | string | 'Dark' | |
label | string | 'Colour scheme' | Accessible name for the preference represented by the icon. |
lightLabel | string | 'Light' | |
ref bindable | HTMLButtonElement | null | null | |
showSystem | boolean | true | Include "system" in the cycle. |
size | ControlSize | 'sm' | |
systemLabel | string | 'System' |
Plus the attributes of Omit<HTMLButtonAttributes, 'children' | 'aria-label'>, forwarded to the root element.