A light and dark switch that shows a sun or a moon, so the value reads at a glance.
FreeWeb and Mobile3 variantsMotion
Preview
npx shadcn add @fetaui/theme-togglePlayground
Light
Dark
Disabled
Kind
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/theme-toggle
Accessibility
- A native button with the switch role.
Motion
- The new theme spreads as a circle from the button over 550 ms.
- Browsers with no view transitions change the theme at once.
- With reduced motion, the theme changes with no spread.
- Swift crossfades.
Responsive behavior
- Size stays the same on Mobile.
Performance
- The spread is a view transition with one clip path animation on the root.
- Browsers without view transitions change the theme at once, and it is skipped when still.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import from @/components/fetaui/theme-toggle.
- It does not change or store the theme by itself. Apply it in onValueChange, which runs inside the view transition.
- Pass value from your theme so the icon stays correct after a reload.
- aria-label defaults to Dark theme. Pass aria-label to change it.
- The playground is wired to this site's theme. The other demos only change their own state.
Related
Theme SwitchComponentSwitches between light and dark. The sun folds into the moon as the theme spreads.SwitchComponentTurns a setting on or off and applies it at once.ToggleComponentA button that stays pressed.Pull-chain lightComponentA pendant lamp you switch by tugging its pull chain. Space toggles it from the keyboard.Color SelectorComponentA single choice among color swatches, on a native radio group.