Theme Switcher
ProA selector for switching between light, dark, and system colour modes. Can render as a segmented control, a dropdown, or a set of radio buttons. Persists the user's preference in localStorage and respects the OS-level prefers-color-scheme setting when set to "System".
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Toggle | ||
| Segmented | Three-segment control with sun, moon, and monitor icons. | Use in settings pages or headers where all three options should be visible. |
| Dropdown | Compact dropdown showing the current mode with an icon. | Use in navigation bars or footers where space is limited. |
Usage Guidelines
Do
Default to "System" so the app respects the user's OS preference.
Don't
Force a default theme without a system option — respect user OS settings.
Do
Persist the choice in localStorage across sessions.
Don't
Flash the wrong theme on page load — apply the stored preference during SSR or before paint.
Do
Update the theme instantly without a page reload.
Don't
Use icon-only options without accessible labels.
Code
Design Tokens
Accessibility
- Uses role="radiogroup" with individual role="radio" buttons.
- Each option has aria-label — "Light mode", "Dark mode", "System mode".
- Active option uses aria-checked="true".
- Arrow keys navigate between options following the radiogroup pattern.