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

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

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

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";
};

// ThemeProvider
const ThemeProvider = ({ children }) => {
  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;