ThemeToggle
Markdown for agentsThe button and its accessible label. The consumer owns persistence and the actual class/attribute switch.
npx @slipstream-ui/cli@latest add theme-toggleControlled toggle
Current theme: light
Custom labels
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| theme | 'light' | 'dark' | — | Current theme. |
| onThemeChange | (theme: 'light' | 'dark') => void | — | Fired with the next theme. |
| labels | { toLight?: string; toDark?: string } | — | Accessible labels for the next action. |
| size | 'sm' | 'md' | 'md' | Control size. |
Accessibility
- aria-label and title describe the next action.
- Native button with Enter/Space activation and a visible focus ring.
- Icons are aria-hidden; the label carries the meaning.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.