Theme Toggle

1"use client";
2 
3import { Moon, Sun } from "lucide-react";
4import { useTheme, ThemeProvider as NextThemesProvider } from "next-themes";
5 
6import { Button } from "@/components/ui/button";
7 
8export function ThemeProvider({ children }: { children: React.ReactNode }) {
9  return (
10    <NextThemesProvider defaultTheme="system" attribute="class" enableSystem>
11      {children}
12    </NextThemesProvider>
13  );
14}
15 
16export function ThemeToggle() {
17  const { setTheme, resolvedTheme } = useTheme();
18  return (
19    <Button
20      size={"icon"}
21      variant={"ghost"}
22      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
23    >
24      {resolvedTheme === "dark" ? <Sun /> : <Moon />}
25    </Button>
26  );
27}