mega-plant/components/ThemeToggle.tsx

18 lines
582 B
TypeScript

"use client";
import { useTheme } from "./ThemeProvider";
import { Sun, Moon } from "lucide-react";
export function ThemeToggle() {
const { theme, toggle } = useTheme();
return (
<button
onClick={toggle}
className="w-9 h-9 grid place-items-center rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 text-gray-500 dark:text-gray-400 transition"
aria-label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
>
<Sun className="w-5 h-5 hidden dark:block" />
<Moon className="w-5 h-5 block dark:hidden" />
</button>
);
}