Carlos Florêncio
32 lines
748 B
TypeScript
32 lines
748 B
TypeScript
"use client";
|
|
|
|
import { useTheme } from "next-themes";
|
|
import { IconMoon, IconSun } from "@tabler/icons-react";
|
|
import { Button } from "@kandev/ui/button";
|
|
import { useSyncExternalStore } from "react";
|
|
|
|
export function ThemeToggle() {
|
|
const { theme, setTheme } = useTheme();
|
|
const mounted = useSyncExternalStore(
|
|
() => () => {},
|
|
() => true,
|
|
() => false,
|
|
);
|
|
|
|
if (!mounted) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
|
className="h-9 w-9 p-0"
|
|
>
|
|
{theme === "dark" ? <IconSun className="h-4 w-4" /> : <IconMoon className="h-4 w-4" />}
|
|
<span className="sr-only">Toggle theme</span>
|
|
</Button>
|
|
);
|
|
}
|