create-onetech-app/templates/nextjs/js/app-tw-firebase/src/context/theme/Theme.provider.jsx

CLI to quickly set up React projects with popular templates and tools.

"use client";
import { useEffect, useState } from "react";
import { ThemeContext } from "./Theme.context";

// ThemeProvider
const ThemeProvider = ({ children }) => {
  const getSystemTheme = () =>
    window.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light";

  const getInitialTheme = () => {
    if (typeof window === "undefined") return "light";
    const stored = localStorage.getItem("theme");
    if (stored === "light" || stored === "dark" || stored === "system") {
      return stored;
    }
    return "light";
  };
  const [theme, setTheme] = useState(getInitialTheme);
  const applyTheme = (newTheme) => {
    // Remove both classes first
    document.documentElement.classList.remove("light", "dark");

    const finalTheme = newTheme === "system" ? getSystemTheme() : newTheme;

    document.documentElement.classList.add(finalTheme);
  };

  const toggleTheme = (newTheme) => {
    localStorage.setItem("theme", newTheme);
    setTheme(newTheme);
    applyTheme(newTheme);
  };

  // On mount, apply theme
  useEffect(() => {
    applyTheme(theme);
  }, [theme]);

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

export default ThemeProvider;