svrjs-nextjs-website/components/ui/theme-toggle.tsx
Dorian Niemiec 0ce17edbcb
Some checks failed
Deploy Next.js application / deploy (push) Failing after 10m4s
fix: use system theme by default
2024-09-18 10:32:14 +02:00

42 lines
1.1 KiB
TypeScript

"use client";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
const ThemeToggle = () => {
const { resolvedTheme, setTheme } = useTheme();
const handleTheme = () => {
if (resolvedTheme == "light") {
setTheme("dark");
} else {
setTheme("light");
}
};
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="icon"
className="md:border-input border-transparent"
onClick={handleTheme}
>
<span className="sr-only">Toggle theme</span>
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
</Button>
</DropdownMenuTrigger>
</DropdownMenu>
);
};
export default ThemeToggle;