Skip to main content

Actions and status

ThemeToggle

A pill-shaped theme switcher with animated icons. Give your users the power to choose their own light (or lack thereof).

Curated demo

Toggle the switch to see the track and icon animations.

Reference

A pill-shaped theme switcher with animated icons. Give your users the power to choose their own light (or lack thereof).

  • Use ThemeToggle to let users switch between light and dark modes manually.
  • Preference is persisted to localStorage and applied via [data-theme] on the html element.
  • Includes subtle animations for the track, thumb, and icons.
  • The icons change color when selected (Yellow for light, Blue for dark).

Props

Name Type Default Description
class string — Additional CSS classes.

Example snippet

<ThemeToggle />