Theme Switcher

Interactive theme toggle component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring system preference detection, smooth transitions, and accessibility features.

Motion

Lucide

Loading component...

'use client';import { useControllableState } from '@radix-ui/react-use-controllable-state';import { Monitor, Moon, Sun } from 'lucide-react';import { motion } from 'motion/react';import { useCallback, useEffect, useState } from 'react';import { cn } from '@/lib/utils';const themes = [  {    key: 'system',    icon: Monitor,    label: 'System theme',  },  {    key: 'light',    icon: Sun,    label: 'Light theme',  },  {    key: 'dark',    icon: Moon,    label: 'Dark theme',  },];export type ThemeSwitcherProps = {  value?: 'light' | 'dark' | 'system';  onChange?: (theme: 'light' | 'dark' | 'system') => void;  defaultValue?: 'light' | 'dark' | 'system';  className?: string;};export const ThemeSwitcher = ({  value,  onChange,  defaultValue = 'system',  className,}: ThemeSwitcherProps) => {  const [theme, setTheme] = useControllableState({    defaultProp: defaultValue,    prop: value,    onChange,  });  const [mounted, setMounted] = useState(false);  const handleThemeClick = useCallback(    (themeKey: 'light' | 'dark' | 'system') => {      setTheme(themeKey);    },    [setTheme]  );  // Prevent hydration mismatch  useEffect(() => {    setMounted(true);  }, []);  if (!mounted) {    return null;  }  return (    <div      className={cn(        'relative isolate flex h-8 rounded-full bg-background p-1 ring-1 ring-border',        className      )}    >      {themes.map(({ key, icon: Icon, label }) => {        const isActive = theme === key;        return (          <button            aria-label={label}            className="relative h-6 w-6 rounded-full"            key={key}            onClick={() => handleThemeClick(key as 'light' | 'dark' | 'system')}            type="button"          >            {isActive && (              <motion.div                className="absolute inset-0 rounded-full bg-secondary"                layoutId="activeTheme"                transition={{ type: 'spring', duration: 0.5 }}              />            )}            <Icon              className={cn(                'relative z-10 m-auto h-4 w-4',                isActive ? 'text-foreground' : 'text-muted-foreground'              )}            />          </button>        );      })}    </div>  );};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/theme-switcher.json

npx shadcn@latest add https://www.shadcn.io/registry/theme-switcher.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/theme-switcher.json

bunx shadcn@latest add https://www.shadcn.io/registry/theme-switcher.json

Features

Triple theme modes - Light, dark, and system preference detection using JavaScript media queries
Controlled/uncontrolled - Both controlled and uncontrolled state management for React applications
Smooth transitions - Animated theme switching with Motion library integration for Next.js projects
System detection - Automatic dark mode following OS preferences using TypeScript event handling
Icon animations - Sun/moon icon transitions with Lucide icons using Tailwind CSS transforms
Accessibility features - Keyboard navigation and proper ARIA labels using shadcn/ui patterns
Persistent storage - Theme preference saved to localStorage using JavaScript storage APIs
Open source - Free theme switcher component with Radix UI primitives

Examples

Uncontrolled mode

Check the console for the onChange event.

Loading component...

'use client';import { useControllableState } from '@radix-ui/react-use-controllable-state';import { Monitor, Moon, Sun } from 'lucide-react';import { motion } from 'motion/react';import { useCallback, useEffect, useState } from 'react';import { cn } from '@/lib/utils';const themes = [  {    key: 'system',    icon: Monitor,    label: 'System theme',  },  {    key: 'light',    icon: Sun,    label: 'Light theme',  },  {    key: 'dark',    icon: Moon,    label: 'Dark theme',  },];export type ThemeSwitcherProps = {  value?: 'light' | 'dark' | 'system';  onChange?: (theme: 'light' | 'dark' | 'system') => void;  defaultValue?: 'light' | 'dark' | 'system';  className?: string;};export const ThemeSwitcher = ({  value,  onChange,  defaultValue = 'system',  className,}: ThemeSwitcherProps) => {  const [theme, setTheme] = useControllableState({    defaultProp: defaultValue,    prop: value,    onChange,  });  const [mounted, setMounted] = useState(false);  const handleThemeClick = useCallback(    (themeKey: 'light' | 'dark' | 'system') => {      setTheme(themeKey);    },    [setTheme]  );  // Prevent hydration mismatch  useEffect(() => {    setMounted(true);  }, []);  if (!mounted) {    return null;  }  return (    <div      className={cn(        'relative isolate flex h-8 rounded-full bg-background p-1 ring-1 ring-border',        className      )}    >      {themes.map(({ key, icon: Icon, label }) => {        const isActive = theme === key;        return (          <button            aria-label={label}            className="relative h-6 w-6 rounded-full"            key={key}            onClick={() => handleThemeClick(key as 'light' | 'dark' | 'system')}            type="button"          >            {isActive && (              <motion.div                className="absolute inset-0 rounded-full bg-secondary"                layoutId="activeTheme"                transition={{ type: 'spring', duration: 0.5 }}              />            )}            <Icon              className={cn(                'relative z-10 m-auto h-4 w-4',                isActive ? 'text-foreground' : 'text-muted-foreground'              )}            />          </button>        );      })}    </div>  );};

Use Cases

Application headers - Global theme control in navigation bars and toolbars
Settings panels - User preference configuration in app settings pages
Dashboard controls - Quick theme switching in admin and data interfaces
Content platforms - Reader-friendly dark mode toggles for articles and documentation

Implementation

Built with next-themes for system detection and persistence. Uses Motion for icon animations. Supports controlled mode with onChange callbacks. Automatically syncs with system preferences.

Reacttheme-switcher