ThemeToggle
Switches the nearest ThemeProvider between light and dark mode.
Props
ThemeToggle extends HTMLAttributes<HTMLButtonElement> (excluding onChange). It must be rendered inside a ThemeProvider; it drives the provider's mode, which regenerates the entire --m-* CSS variable set.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "icon" | "segmented" | "icon" | Icon-only toggle or segmented light/dark pair. |
size | "sm" | "md" | "md" | Control size. |
showLabel | boolean | — | Shows 'Light'/'Dark' text beside the icon (icon variant only). |
Examples
Icon variant
Segmented variant
With label
import { ThemeToggle } from "@solarius/onset";
// Must be inside a ThemeProvider
<ThemeToggle />
<ThemeToggle variant="segmented" size="sm" />
<ThemeToggle showLabel />