ThemeSwitcher

Updated: September 15, 2026

Use ThemeSwitcher to provide users with a quick way to toggle between themes. It integrates with ThemeProvider and uses useTheme() under the hood.

ThemeSwitcher

<ThemeSwitcher />

Behavior

Highlights the active theme using the "primary" variant, and exposes it to assistive technology with aria-pressed.
Automatically updates the global theme via useTheme().setTheme.
Renders a row of three icons: system, dark, light.

Collapsed

collapsed shows only the active theme and reveals the rest on hover or focus. Use it where the control has to be reachable from every page but should not spend three slots of a header on itself. It stays a real toggle group. Every option keeps its tab stop, so tabbing into the group opens it; and a device that cannot hover gets all three from the start, because otherwise the only way in would be to tap the visible button — which would have already changed the theme. The width transition is the only motion, and prefers-reduced-motion turns it off.

Collapsed

<ThemeSwitcher collapsed />

Custom layout

Pass any valid Row props to control spacing, padding, layout, etc.

Custom style

<ThemeSwitcher direction="column" padding="4" gap="8" background="surface" border="surface" radius="full" />

API reference

Prop	Type	Default
collapsed	boolean	—
ref	HTMLDivElement	—
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—

ComponentsTag

ComponentsTimeline

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club