fetaUI
GitHub

Theme Switch

Switches between light and dark. The sun folds into the moon as the theme spreads.

FreeWeb and Mobile2 variantsMotion

Preview

npx shadcn add @fetaui/theme-switch
Playground
Appearance card
AppearanceSwitching
Theme
Dark spreads from the button
Icon
Label
Disabled
Style
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/theme-switch

Accessibility

  • The label names the theme it will switch to.
  • The icon is decorative.

Motion

  • The icon rotates 90 degrees with the out easing.
  • The new theme spreads from the button with a view transition.
  • With reduced motion, the theme changes at once.

Responsive behavior

  • 36 px on Web, and 44 px on Mobile.

Performance

  • The view transition runs only where the browser supports it, and never when still.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import ThemeSwitch from @/components/fetaui/theme-switch. kind is icon or label.
  • It does not change your theme by itself. Apply the theme in onValueChange, which runs inside the view transition.
  • The demo changes only its own label and icon.
  • Pass the saved theme as value or defaultValue. It composes Button, IconButton and the spread from Theme Toggle.
/docs/components/theme-switch/markdown
PreviousDay Strip
NextBilling Switch

Related

Theme ToggleComponentA light and dark switch that shows a sun or a moon, so the value reads at a glance.SwitchComponentTurns a setting on or off and applies it at once.Pull-chain lightComponentA pendant lamp you switch by tugging its pull chain. Space toggles it from the keyboard.