Command Palette

Search for a command to run...

Theme Switcher/Theme Switcher Toggle

Theme Switcher Toggle

Custom toggle theme switcher with sliding animation

Open in v0

Overview

Icon toggle button that switches between light and dark themes. Uses sun and moon icons for visual clarity.

Installation

npx shadcn@latest add @elements/theme-switcher-toggle

Usage

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

export function AppHeader() {
  return (
    <header>
      <ThemeSwitcherToggle />
    </header>
  );
}

Features

  • Icon-based interface (sun/moon)
  • Single-click toggle
  • Smooth icon transitions
  • Compact design for toolbars