"use client";

import * as React from "react";
import { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import { Moon, Sun } from "lucide-react";
import { cn } from "@/lib/utils";

interface ThemeToggleProps {
  className?: string;
  size?: "sm" | "md" | "lg";
  variant?: "button" | "switch";
}

export function ThemeToggle({
  className,
  size = "md",
  variant = "button",
}: ThemeToggleProps) {
  const { theme, setTheme, resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  // Prevent hydration mismatch by only rendering after mount
  useEffect(() => {
    setMounted(true);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const isDark = resolvedTheme === "dark";

  const toggleTheme = () => {
    setTheme(isDark ? "light" : "dark");
  };

  const sizeClasses = {
    sm: "h-8 w-8",
    md: "h-9 w-9",
    lg: "h-10 w-10",
  };

  const iconSizes = {
    sm: "h-4 w-4",
    md: "h-5 w-5",
    lg: "h-5 w-5",
  };

  const switchSizes = {
    sm: { track: "h-6 w-11", thumb: "h-5 w-5", translate: "translate-x-5" },
    md: { track: "h-7 w-12", thumb: "h-6 w-6", translate: "translate-x-5" },
    lg: { track: "h-8 w-14", thumb: "h-7 w-7", translate: "translate-x-6" },
  };

  // Render placeholder during SSR to prevent hydration mismatch
  if (!mounted) {
    if (variant === "switch") {
      return (
        <div
          className={cn(
            "inline-flex items-center rounded-full bg-muted p-0.5",
            switchSizes[size].track,
            className
          )}
          aria-hidden="true"
        />
      );
    }
    return (
      <div
        className={cn(
          "inline-flex items-center justify-center rounded-md bg-muted",
          sizeClasses[size],
          className
        )}
        aria-hidden="true"
      />
    );
  }

  if (variant === "switch") {
    return (
      <button
        type="button"
        role="switch"
        aria-checked={isDark}
        aria-label={`Switch to ${isDark ? "light" : "dark"} mode`}
        onClick={toggleTheme}
        className={cn(
          "relative inline-flex shrink-0 cursor-pointer items-center rounded-full",
          "border-2 border-transparent bg-muted p-0.5",
          "transition-colors duration-300 ease-in-out",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
          "focus-visible:ring-offset-2 focus-visible:ring-offset-background",
          switchSizes[size].track,
          className
        )}
      >
        <span
          className={cn(
            "pointer-events-none relative inline-flex items-center justify-center",
            "rounded-full bg-background shadow-sm",
            "transition-transform duration-300 ease-in-out",
            switchSizes[size].thumb,
            isDark ? switchSizes[size].translate : "translate-x-0"
          )}
        >
          <Sun
            className={cn(
              "absolute transition-all duration-300",
              iconSizes[size],
              isDark ? "rotate-90 scale-0 opacity-0" : "rotate-0 scale-100 opacity-100"
            )}
          />
          <Moon
            className={cn(
              "absolute transition-all duration-300",
              iconSizes[size],
              isDark ? "rotate-0 scale-100 opacity-100" : "-rotate-90 scale-0 opacity-0"
            )}
          />
        </span>
        <span className="sr-only">
          {isDark ? "Switch to light mode" : "Switch to dark mode"}
        </span>
      </button>
    );
  }

  return (
    <button
      type="button"
      onClick={toggleTheme}
      aria-label={`Switch to ${isDark ? "light" : "dark"} mode`}
      className={cn(
        "relative inline-flex items-center justify-center overflow-hidden rounded-md",
        "border border-border bg-background text-foreground",
        "transition-colors duration-200",
        "hover:bg-muted focus-visible:outline-none focus-visible:ring-2",
        "focus-visible:ring-ring focus-visible:ring-offset-2",
        sizeClasses[size],
        className
      )}
    >
      <Sun
        className={cn(
          "absolute transition-all duration-300 ease-out",
          iconSizes[size],
          isDark
            ? "rotate-90 scale-0 opacity-0"
            : "rotate-0 scale-100 opacity-100"
        )}
      />
      <Moon
        className={cn(
          "absolute transition-all duration-300 ease-out",
          iconSizes[size],
          isDark
            ? "rotate-0 scale-100 opacity-100"
            : "-rotate-90 scale-0 opacity-0"
        )}
      />
      <span className="sr-only">
        {isDark ? "Switch to light mode" : "Switch to dark mode"}
      </span>
    </button>
  );
}
Theme Toggle

Dependencies

Files

Installation
