Theme Toggle
A segmented control for switching between system, light, and dark.
ThemeToggle is a three-way Segments control — System, Light, Dark — that reads
and writes the theme through useTheme. It has no state of its own, so it must
be rendered inside a ThemeProvider.
<ThemeProvider>
<ThemeToggle />
</ThemeProvider>The active segment reflects the stored choice. Picking System hands control back to the OS preference; Light and Dark pin the theme until changed.
When to use
Use ThemeToggle to let the reader choose System, Light, or Dark.
Use something else when:
- You need a different control, like a single switch in a menu. Build it on
useTheme.
Usage
Do
Offer System as the default. It respects a preference the reader has already set at the OS level, so most people never need to touch the toggle.
Don't
Render it outside a ThemeProvider. useTheme throws without one, and there
is no theme for the toggle to read or change.
Props
ThemeToggle takes no props. It gets the current theme and the setter from
useTheme, which is why it must live inside a ThemeProvider.
Accessibility
ThemeToggle is a Segments control labelled Theme, so it is a keyboard-navigable
radio group: arrow keys move between options and the selected theme is exposed to
assistive technology.