"use client";
import { useEffect, useState } from "react";
import { Sun, Moon } from "lucide-react";
const STORAGE_KEY = "mcpedia-theme";
export default function ThemeToggle() {
const [mounted, setMounted] = useState(false);
const [isDark, setIsDark] = useState(true);
useEffect(() => {
setMounted(true);
const stored = localStorage.getItem(STORAGE_KEY);
const darkActive =
stored === "dark" ||
(stored === null &&
window.matchMedia("(prefers-color-scheme: dark)").matches);
setIsDark(darkActive);
if (darkActive) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}, []);
function toggle() {
const next = !isDark;
setIsDark(next);
localStorage.setItem(STORAGE_KEY, next ? "dark" : "light");
if (next) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}
if (!mounted) {
return (
);
}
return (
);
}