33 lines
834 B
TypeScript
33 lines
834 B
TypeScript
"use client";
|
|
|
|
import { useTheme } from "next-themes";
|
|
import { SunIcon, MoonIcon } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export function ThemeToggle() {
|
|
const { theme, setTheme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => setMounted(true), []);
|
|
|
|
if (!mounted) {
|
|
return <div className="w-8 h-8" />;
|
|
}
|
|
|
|
const isDark = theme === "dark";
|
|
|
|
return (
|
|
<button
|
|
onClick={() => setTheme(isDark ? "light" : "dark")}
|
|
className="w-8 h-8 flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
|
|
aria-label="Toggle theme"
|
|
>
|
|
{isDark ? (
|
|
<SunIcon className="w-4 h-4" />
|
|
) : (
|
|
<MoonIcon className="w-4 h-4" />
|
|
)}
|
|
</button>
|
|
);
|
|
}
|