Color Mode Switch

Светлая, тёмная или системная: выбор сохраняется, применяется до первого кадра, синхронизируется между вкладками и сменяется плавно. Бесплатно, MIT · Базовые элементы › Кнопки

Установка

npx valyro-cli@latest add color-mode-switch

npx shadcn@latest add https://valyro.xyz/r/color-mode-switch.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ColorModeSwitch } from 'valyro-ui';

Пропсы

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.

Color Mode Switch

Установка

Пропсы

Похожие компоненты