44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { Moon, Sun } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const ThemeToggle = ({ className }: { className?: string }) => {
|
|
const [theme, setTheme] = useState<"light" | "dark">("light");
|
|
|
|
useEffect(() => {
|
|
// Get initial theme from localStorage or system preference
|
|
const savedTheme = localStorage.getItem("theme");
|
|
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
|
|
.matches
|
|
? "dark"
|
|
: "light";
|
|
const initialTheme = savedTheme || systemTheme;
|
|
|
|
setTheme(initialTheme as "light" | "dark");
|
|
document.documentElement.classList.toggle("dark", initialTheme === "dark");
|
|
}, []);
|
|
|
|
const toggleTheme = () => {
|
|
const newTheme = theme === "light" ? "dark" : "light";
|
|
setTheme(newTheme);
|
|
document.documentElement.classList.toggle("dark");
|
|
localStorage.setItem("theme", newTheme);
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className={cn("size-8", className)}
|
|
onClick={toggleTheme}
|
|
>
|
|
<Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
<Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
<span className="sr-only">Toggle theme</span>
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export { ThemeToggle };
|