"use client";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { motion } from "motion/react";
export function ThemeToggle({
  showThemeName = false,
}: {
  showThemeName?: boolean;
}) {
  const { resolvedTheme, setTheme } = useTheme();
  React.useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Ignore if typing in an input, textarea, or contentEditable element
      if (
        e.target instanceof HTMLInputElement ||
        e.target instanceof HTMLTextAreaElement ||
        (e.target as HTMLElement).isContentEditable
      ) {
        return;
      }
      if (e.key === "d" || e.key === "D") {
        setTheme(resolvedTheme === "dark" ? "light" : "dark");
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [resolvedTheme, setTheme]);
  const toggleTheme = () => {
    setTheme(resolvedTheme === "dark" ? "light" : "dark");
  };
  return (
    <motion.div
      whileHover={{
        scale: 1.1,
        transition: { duration: 0.3 },
        origin: "center",
        x: -5,
        y: 5,
      }}
      whileTap={{
        scale: 0.9,
        transition: { duration: 0.3 },
        origin: "center",
        x: -1.5,
        y: 1.5,
      }}
      transition={{ type: "spring" as const, stiffness: 400, damping: 17 }}
      className="flex items-center cursor-pointer gap-2"
    >
      <Button variant="outline" size="icon" className="cursor-pointer" onClick={toggleTheme}>
        <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
        <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
        <span className="sr-only">Toggle theme</span>
      </Button>
      {showThemeName && (
        <span className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
          {resolvedTheme === "dark" ? "Light" : "Dark"} Mode
        </span>
      )}
    </motion.div>
  );
}
export function ThemeToggleDemo() {
  return (
    <div className="flex gap-4 p-4">
      <ThemeToggle />
    </div>
  );
}
Theme Toggle

Installation

Other Examples

With Theme Name

Props
