Command Palette

Search for a command to run...

54
Blog
PreviousNext

Theme Switcher

A theme switcher component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes with smooth circular transitions.

Open in
Loading...
import { ThemeSwitcher } from "@/components/jyotirmoydas/theme-switcher";
 
export function ThemeSwitcherDemo() {
  return (
    <div className="flex flex-col items-center gap-6">
      {/* Tri-toggle variant (default) */}
      <div className="flex flex-col items-center gap-2">
        <span className="text-xs text-muted-foreground">
          Tri-toggle (default)
        </span>
        <ThemeSwitcher />
      </div>
 
      {/* Toggle variant */}
      <div className="flex flex-col items-center gap-2">
        <span className="text-xs text-muted-foreground">Toggle</span>
        <ThemeSwitcher variant="toggle" />
      </div>
 
      {/* Toggle with sound */}
      <div className="flex flex-col items-center gap-2">
        <span className="text-xs text-muted-foreground">Toggle with sound</span>
        <ThemeSwitcher variant="toggle" sound />
      </div>
    </div>
  );
}

Installation

bunx --bun shadcn add @jyotirmoydas/theme-switcher

Usage

import { ThemeSwitcher } from "@/components/jyotirmoydas/theme-switcher";
{
  /* Tri-toggle (system, light, dark) - default */
}
<ThemeSwitcher />;
 
{
  /* Simple toggle (light/dark only) */
}
<ThemeSwitcher variant="toggle" />;
 
{
  /* Toggle with click sound */
}
<ThemeSwitcher variant="toggle" sound />;

Props

PropTypeDefaultDescription
variant"toggle" | "tri-toggle""tri-toggle"Style variant: tri-toggle (3 options) or toggle (2 options).
soundbooleanfalseEnable click sound on theme change for added immersion.

References