React Theme Provider

theme-provider.tsx

"use client"
import React, { useState, SetStateAction, Dispatch } from "react";
import { Color, colors } from "@/types"
import { useIsomorphicLayoutEffect } from "usehooks-ts";

interface ThemeContextProps {
  theme: Color;
  setTheme: Dispatch<SetStateAction<Color>> | null;
}

const ThemeContext = React.createContext<ThemeContextProps>({
  theme: "blue",
  setTheme: null
});

// Create a React theme provider component
function ThemeProvider ({ children }: { children: React.ReactNode | React.ReactNode[] }) {
  const [theme, setTheme] = useState<Color>("blue");

  const setLocalStorage = (theme: Color) => {
    window.localStorage.setItem('theme', theme);
    setTheme(theme);
  };

  useIsomorphicLayoutEffect(() => {
    const localTheme = window.localStorage.getItem('theme');
    if (localTheme && colors.includes(localTheme as any)) {
      setTheme(localTheme as Color);
    }
  }, []);

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

const useTheme = () => React.useContext(ThemeContext);