ThemeSwitcher

Dropdown UI component for selecting color themes and toggling light/dark mode

ThemeSwitcher

A dropdown menu component that allows users to switch between color themes and toggle between light/dark modes. Built with shadcn/ui components and fully integrated with next-themes.

Located in registry/nextjs/components/theme-switcher.tsx

Component Signature

export function ThemeSwitcher(): JSX.Element

Props

This component accepts no props. All configuration is handled internally through the useTheme hook.

Features

• Dual Theme Controls: Separate controls for color theme and light/dark mode
• Visual Theme Previews: Color dots showing each theme’s primary color
• Current Theme Indicator: Check marks on active selections
• Scrollable Theme List: Smooth scrolling for 45+ themes
• SSR Safe: Prevents hydration mismatches with mounted state
• Keyboard Accessible: Full keyboard navigation support

Usage

import { ThemeSwitcher } from "@/components/theme-switcher";

export default function Header() {
  return (
    <header>
      <nav>
        <h1>My App</h1>
        <ThemeSwitcher />
      </nav>
    </header>
  );
}

UI Structure

Trigger Button

Button · Component

Ghost variant icon button (9×9) displaying Sun (light mode) or Moon (dark mode) icon.

<Button variant="ghost" size="icon" className="h-9 w-9">
  {isDark ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
</Button>

Dropdown Content

The dropdown menu contains three main sections:

1. Current Theme Label

Label · DropdownMenuLabel

Shows the current theme name with a colored preview dot.

<DropdownMenuLabel className="flex items-center gap-2">
  <div
    className="h-3 w-3 rounded-full"
    style={{ backgroundColor: isDark ? primaryDark : primaryLight }}
  />
  {currentThemeConfig.title}
</DropdownMenuLabel>

2. Mode Toggle (Light/Dark)

Mode Items · DropdownMenuItem[]

Two items for switching between light and dark modes. Active mode shows a check mark.

<DropdownMenuItem onClick={() => setMode("light")}>
  <Sun className="h-4 w-4" />
  <span>Light</span>
  {mode === "light" && <Check className="h-4 w-4" />}
</DropdownMenuItem>

3. Color Theme Submenu

Theme Submenu · DropdownMenuSub

Scrollable submenu with all 45 themes, each showing a color preview.

<DropdownMenuSub>
  <DropdownMenuSubTrigger>
    <Palette className="h-4 w-4" />
    <span>Color Theme</span>
  </DropdownMenuSubTrigger>
  <DropdownMenuSubContent>
    <ScrollArea className="h-80">
      {sortedThemes.map((theme) => (
        <DropdownMenuItem onClick={() => setColorTheme(theme.name)}>
          <div className="h-4 w-4 rounded-full" style={{ backgroundColor }} />
          <span>{theme.title}</span>
          {isActive && <Check className="h-4 w-4" />}
        </DropdownMenuItem>
      ))}
    </ScrollArea>
  </DropdownMenuSubContent>
</DropdownMenuSub>

Internal Functions

parseTheme

Helper function to extract color theme and mode from theme string.

function parseTheme(theme: string | undefined): {
  colorTheme: string;
  mode: "light" | "dark";
}

theme · string | undefined

Theme string like "catppuccin-dark" or "vercel-light"

Returns:

colorTheme · string

Theme name without mode suffix (e.g., "catppuccin")

mode · 'light' | 'dark'

Extracted mode from theme string, defaults to "dark"

Examples:

parseTheme("catppuccin-dark")  // { colorTheme: "catppuccin", mode: "dark" }
parseTheme("vercel-light")     // { colorTheme: "vercel", mode: "light" }
parseTheme(undefined)          // { colorTheme: "default", mode: "dark" }

setColorTheme

Sets the color theme while preserving the current mode.

const setColorTheme = (name: string) => {
  setTheme(`${name}-${mode}`);
};

Example:

// Current: "default-dark"
setColorTheme("catppuccin");
// Result: "catppuccin-dark"

setMode

Sets the light/dark mode while preserving the current color theme.

const setMode = (newMode: "light" | "dark") => {
  setTheme(`${colorTheme}-${newMode}`);
};

Example:

// Current: "catppuccin-dark"
setMode("light");
// Result: "catppuccin-light"

Hydration Safety

The component uses a mounted state to prevent hydration mismatches:

const [mounted, setMounted] = useState(false);

useEffect(() => {
  setMounted(true);
}, []);

if (!mounted) {
  return (
    <Button variant="ghost" size="icon" className="h-9 w-9">
      <Sun className="h-4 w-4" />
    </Button>
  );
}

This ensures the server-rendered HTML matches the initial client render before showing the actual theme state.

Dependencies

Required Components (shadcn/ui)

• Button - Trigger button component
• DropdownMenu - Main menu container
• DropdownMenuContent - Menu content wrapper
• DropdownMenuItem - Individual menu items
• DropdownMenuLabel - Menu section labels
• DropdownMenuSeparator - Visual dividers
• DropdownMenuSub - Nested submenu
• DropdownMenuSubTrigger - Submenu trigger
• DropdownMenuSubContent - Submenu content
• DropdownMenuPortal - Portal for submenu rendering
• ScrollArea - Scrollable theme list

Required Icons (lucide-react)

• Sun - Light mode icon
• Moon - Dark mode icon
• Palette - Theme picker icon
• Check - Active selection indicator

Required Utilities

• useTheme from next-themes - Theme state management
• cn from @/lib/utils - Class name utility
• sortedThemes from @/lib/themes-config - Sorted theme list
• themes from @/lib/themes-config - Theme configurations

Styling

The component uses Tailwind CSS classes and is fully customizable:

// Trigger button
<Button variant="ghost" size="icon" className="h-9 w-9">

// Dropdown content
<DropdownMenuContent align="end" className="w-48">

// Theme color preview
<div className="h-4 w-4 rounded-full border border-border" />

// Scrollable area
<ScrollArea className="h-80">

Accessibility

• Screen Reader Support: Trigger button includes <span class="sr-only">Toggle theme</span>
• Keyboard Navigation: Full keyboard support via DropdownMenu
• Visual Indicators: Check marks for active selections
• Color Previews: Visual dots help users identify themes

Advanced Customization

Custom Button Styling

Wrap and style the component:

<div className="rounded-lg border p-1">
  <ThemeSwitcher />
</div>

Fork for Custom Behavior

Copy and modify the component to:

• Filter visible themes
• Add custom theme groupings
• Change icon sets
• Modify menu structure

theme-switcher-custom.tsx

import { ThemeSwitcher } from "@/components/theme-switcher";

// Filter to specific themes
const filteredThemes = sortedThemes.filter(t => 
  ["default", "catppuccin", "vercel"].includes(t.name)
);

See Also

• useTheme - Theme state hook
• ThemeProvider - Provider setup
• sortedThemes - Sorted theme list
• ThemeConfig - Theme object structure