Theme Toggler

Смена светлой и тёмной темы с раскрытием через View Transitions. Pro · Анимированные компоненты › Кнопки

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add theme-toggler

npm install valyro-ui-pro

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

Пропсы

Prop	Type	Default
`mode`	`'light' \| 'dark' \| 'system'`		The chosen mode. Applying it (ThemeProvider, a class on <html>) is up to the app, in `onModeChange`.
`defaultMode`	`'light' \| 'dark' \| 'system'`	`'light'`	Initial `mode` when uncontrolled.
`onModeChange`	`(mode: ThemeTogglerMode) => void`		Called inside the view transition, so the new theme is painted into the sweep.
`modes`	`ThemeTogglerMode[]`	`['light', 'dark']`	Modes the button cycles through, in order (default light, dark).
`direction`	`'ltr' \| 'rtl' \| 'ttb' \| 'btt' \| 'circle'`	`'ltr'`	How the new theme sweeps over the page (default `ltr`).
`onImmediateChange`	`(mode: ThemeTogglerMode) => void`		Called on click with the next mode before the sweep starts (e.g. to save the choice).
`labels`	`Partial<ThemeTogglerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`round`	`boolean`		Circle instead of the theme's default button radius.
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'accent' \| 'danger' \| 'link'`		Solid `primary`/`accent`/`danger` fill, outlined `secondary`, transparent `ghost`, or unpadded text `link`.
`size`	`'sm' \| 'md' \| 'lg'`		Control height, padding and text size.
`loading`	`boolean`		Shows a spinner and blocks activation without changing the button's width: the spinner takes the left icon's place, or covers the label when there is no left icon. The button stays focusable and gets aria-busy.
`pill`	`boolean`		Fully rounded ends, regardless of theme.
`hoverScale`	`number`		Scale under a hovering mouse, e.g. `1.05`; it springs back with a slight bounce. Off by default (the theme's own hover). Skipped on touch and under reduced motion.
`tapScale`	`number`		Scale while pressed, e.g. `0.95`, instead of the theme's press transform; springs back on release.

Theme Toggler

Установка

Пропсы

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