48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
// app/components/theme-switcher.tsx
|
|
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useTheme } from "next-themes";
|
|
import { Sun, Moon } from "lucide-react";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Tooltip, TooltipContent } from "./ui/tooltip";
|
|
import { TooltipTrigger } from "@radix-ui/react-tooltip";
|
|
|
|
export function ThemeSwitcher() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
return null;
|
|
}
|
|
|
|
const isDarkMode = theme === "dark";
|
|
|
|
const toggleTheme = (checked: boolean) => {
|
|
setTheme(checked ? "dark" : "light");
|
|
};
|
|
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="flex items-center space-x-2">
|
|
<Sun className="h-[1.2rem] w-[1.2rem] text-primary" />
|
|
<Switch
|
|
id="theme-switch"
|
|
checked={isDarkMode}
|
|
onCheckedChange={toggleTheme}
|
|
/>
|
|
<Moon className="h-[1.2rem] w-[1.2rem] text-primary" />
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Toggle Theme</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|