"use client";
import { Moon, Sun } from "lucide-react";
import { useEffect, useState } from "react";
/**
* Light/dark toggle. The class lives on ; theme-init.js applies the
* saved choice before paint. We sync React state after mount so SSR hydration
* does not desync from the real DOM class.
*/
export function ThemeSwitcher({
variant = "nav",
}: {
variant?: "nav" | "admin";
}) {
const [dark, setDark] = useState(false);
const [ready, setReady] = useState(false);
useEffect(() => {
setDark(document.documentElement.classList.contains("dark"));
setReady(true);
}, []);
function toggle() {
const next = !document.documentElement.classList.contains("dark");
document.documentElement.classList.toggle("dark", next);
setDark(next);
try {
localStorage.setItem("theme", next ? "dark" : "light");
} catch {
/* private mode / storage disabled — runtime toggle still works */
}
}
const label = dark ? "Switch to light mode" : "Switch to dark mode";
const title = dark ? "Light mode" : "Dark mode";
if (variant === "admin") {
return (
);
}
return (
);
}