Color Mode Switch
Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded. Free, MIT · Basics › Buttons
Light / Dark / System as a segmented control. Without value it is the page's switch: it shows the saved choice and changes it through useColorMode — saved, applied by ThemeProvider (with its cross-fade) and synced across tabs. Before hydration the choice is unknown, so no segment is selected rather than a wrong one.
Installation
npx valyro-cli@latest add color-mode-switchnpx shadcn@latest add https://valyro.xyz/r/color-mode-switch.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { ColorModeSwitch } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
value | ColorModeChoice | The chosen mode (controlled). Leave value and defaultValue out to switch the page's mode: the switch then reads and sets useColorMode (the nearest ThemeProvider saves and paints it). | |
defaultValue | ColorModeChoice | Starts a switch that keeps its own value instead of the page's mode. | |
onValueChange | (mode: ColorModeChoice) => void | Called with the new value when it changes. | |
modes | readonly ColorModeChoice[] | DEFAULT_MODES | Modes offered, in order. Default light, dark, system. |
iconOnly | boolean | false | Icons only; the names stay as accessible names and tooltips. |
labels | Partial<ColorModeSwitchLabels> | Overrides for the built-in English text; keys left out keep their defaults. | |
size | 'sm' | 'md' | 'lg' | 'sm' | Control height and text size. |
fullWidth | boolean | Stretch to the container width with equal segments (a label wider than its share keeps its width). Either way, segments that don't fit scroll sideways with faded edges instead of truncating. | |
invalid | boolean | Error state, e.g. from a FormField: aria-invalid on the group (an explicit aria-invalid wins). | |
disabled | boolean | Disables every segment, like RadioGroup's disabled. | |
animation | 'default' | 'spring' | spring: the thumb springs to the chosen segment with a slight overshoot. default: the theme's curve. |
Related components
- Button — Buttons in every variant
- Icon Button — Icon-only button
- Button Group — Grouped buttons
- Copy to Clipboard — Copy with confirmation
- Badge — Status labels and tags
- Tag — Removable and clickable tags, groups with +N
- Avatar — User avatars
- Tooltip — Hover and focus hints
- Separator — Dividers
- Icon — Any icon on the kit’s rules: size from the text, the theme’s stroke, RTL mirroring, an accessible name; createIcon and a gallery of 111 icons
- Kbd — Keyboard keys and shortcuts: one "mod+k" string shows ⌘K on a Mac and Ctrl+K elsewhere, read aloud as words
- Highlight — Search hits marked in text: case and accents ignored, several terms in their own tones, ready-made ranges, the current hit
Previous: Icon Button · Next: Button Group · All Basics