Navigation
ThemeToggle
The theme control: Auto, Light and Dark as a pill of icon buttons (contrast, sun, moon).
Preview
Props
| Prop | Type | Description |
|---|---|---|
valueRequired | 'auto' | 'light' | 'dark' | |
onChange | (theme: 'auto' | 'light' | 'dark') => void | |
orientation | 'horizontal' | 'vertical' | |
variant | 'segmented' | 'swatches' | swatches: big previews of each theme, the same shape as BackdropPicker. Default: the compact segmented row. |
label | string | |
className | string |
Guidelines
The theme control: Auto, Light and Dark as a pill of icon buttons (contrast, sun, moon). Auto follows the device's light or dark setting and keeps following it as it changes.
Provide: value (auto, light or dark), onChange, and optionally orientation (vertical for a collapsed side navigation) and label (default "Theme").
- It is a radio group: one tab stop, arrow keys move the choice, each button has its name for screen readers and as a tooltip.
- The chosen option is a raised circle on the gray pill; the others are quiet icons.
- It lives in Profile, under Look. Every copy on a page stays in step.
- Theme is still set with
data-themeon<html>; the app resolves Auto to light or dark before first paint.
- It is shaped like SegmentedControl (a gray track, rounded segments) and stretches to the width of the side navigation; the chosen option is the raised selected thumb.
- Its track is recessed glass (
glass-track,glass-track-edge): see-through with a hairline and a soft inner shadow, so it belongs on the glass side navigation instead of a flat gray bar.
variant: swatchesshows each theme as a big preview (a little page and card drawn in that theme's own tokens, half and half for Auto), the same shape and size as BackdropPicker. Settings, Appearance uses it; the compact segmented row stays for tight spaces.