EpicNext-Cms/src/components/theme-switcher.tsx

"use client";

import { useEffect, useState } from "react";

/**
 * Light/dark toggle. The actual class lives on <html> (so `.app.dark` selectors
 * and the dark CSS-var block apply); we mirror localStorage so the choice
 * survives reloads. The inline boot script in the root layout applies the saved
 * theme before paint to avoid a flash — this component only reflects/toggles it.
 */
export function ThemeSwitcher() {
  const [dark, setDark] = useState(false);

  useEffect(() => {
    setDark(document.documentElement.classList.contains("dark"));
  }, []);

  function toggle() {
    const next = !dark;
    setDark(next);
    document.documentElement.classList.toggle("dark", next);
    try {
      localStorage.setItem("theme", next ? "dark" : "light");
    } catch {
      /* private mode / storage disabled — runtime toggle still works */
    }
  }

  return (
    <button
      type="button"
      onClick={toggle}
      className="nav-item cursor-pointer"
      aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
      title={dark ? "Light mode" : "Dark mode"}
    >
      <span aria-hidden className="text-lg leading-none">
        {dark ? "☀" : "☾"}
      </span>
    </button>
  );
}