Theme Toggler
Wipes the new theme in as a circle using View Transitions.
- 1.2 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Wipes the theme in from the button
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/theme-toggler.jsonAdds components/velora/theme-toggler.tsx.
Props
| Prop | Type | Default |
|---|---|---|
isDark*Current theme; drives the icon and the accessible label | boolean | — |
onToggle*Apply the theme change. Called inside a View Transition when supported. | () => void | — |
className | string | — |
Accessibility
- Reduced motion
- The circular View Transition wipe is skipped and the theme switches instantly.
- Keyboard
- A native <button type="button">: Enter or Space toggle the theme, with a visible focus-visible outline.
- Screen readers
- Named by an aria-label describing the action ("Switch to light theme" or "Switch to dark theme") that updates after each toggle; the icon is aria-hidden.