35 lines
872 B
TypeScript
35 lines
872 B
TypeScript
"use client";
|
||
|
||
import { useTheme } from "next-themes";
|
||
import { useEffect, useState } from "react";
|
||
|
||
export function ThemeToggle() {
|
||
const { theme, setTheme } = useTheme();
|
||
const [mounted, setMounted] = useState(false);
|
||
|
||
useEffect(() => {
|
||
setTimeout(() => setMounted(true), 10);
|
||
}, []);
|
||
|
||
if (!mounted) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div className="flex gap-4 justify-end">
|
||
<button
|
||
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
||
className="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
||
>
|
||
{theme === "dark" ? "🌙" : "☀️"}
|
||
</button>
|
||
<button
|
||
onClick={() => setTheme("system")}
|
||
className="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
||
>
|
||
🖥️
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|