admin / Bid-Sentinel

import { createContext, useContext, useEffect, useState } from "react";

const ThemeContext = createContext({ theme: "light", toggle: () => {} });
const STORAGE_KEY = "bs_theme";

function initialTheme() {
  // The inline script in index.html has already applied the class; read it back.
  if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
    return "dark";
  }
  try {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) return saved;
  } catch {
    /* ignore */
  }
  return "light";
}

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState(initialTheme);

  useEffect(() => {
    const root = document.documentElement;
    // Flip all theme colours instantly (no half-animated borders/backgrounds).
    root.classList.add("theme-no-transition");
    root.classList.toggle("dark", theme === "dark");
    // Re-enable transitions after the paint that applied the new theme.
    const id = window.requestAnimationFrame(() =>
      window.requestAnimationFrame(() => root.classList.remove("theme-no-transition"))
    );
    try {
      localStorage.setItem(STORAGE_KEY, theme);
    } catch {
      /* ignore */
    }
    return () => window.cancelAnimationFrame(id);
  }, [theme]);

  const toggle = () => setTheme((t) => (t === "dark" ? "light" : "dark"));

  return (
    <ThemeContext.Provider value={{ theme, toggle, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}