38 lines
1011 B
TypeScript
38 lines
1011 B
TypeScript
"use client";
|
|
|
|
import { Moon, Sun } from "lucide-react";
|
|
import { useTheme } from "next-themes";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
type ThemeToggleProps = {
|
|
ariaLabel?: string;
|
|
};
|
|
|
|
export function ThemeToggle({ ariaLabel = "Toggle theme" }: ThemeToggleProps) {
|
|
const { setTheme, theme, resolvedTheme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<Button type="button" variant="outline" size="icon" aria-label={ariaLabel}>
|
|
<Moon className="h-4 w-4" />
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
const activeTheme = theme === "system" ? resolvedTheme : theme;
|
|
const isDark = activeTheme === "dark";
|
|
|
|
return (
|
|
<Button type="button" variant="outline" size="icon" onClick={() => setTheme(isDark ? "light" : "dark")} aria-label={ariaLabel}>
|
|
{isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
|
</Button>
|
|
);
|
|
}
|