import React, { useContext, useState } from "react";

const ThemeContext = React.createContext();

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

  const toggleTheme = (isLight) => {
    setTheme(isLight);
    setLocalTheme(isLight)
  };

const setLocalTheme = async (value) => {
      try {
        await localStorage.setItem("theme", value.toString());
      } catch (err) {
        console.log("Error setting local theme: ", err);
      }
    };

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

export const useTheme = () => {
  return useContext(ThemeContext);
};

import { ThemeProvider } from "./context/ThemeContext"; // new line

... morecode

<ThemeProvider> // new line
  <React.StrictMode>
     <RouterProvider router={router} />
  </React.StrictMode>
</ThemeProvider> // new line

... more code

import { useTheme } from "./context/ThemeContext";

function ExampleComponent() {
     const { theme, setTheme, toggleTheme } = useTheme();

   ... more code
}

  const initializeLocalStorage = async () => {
    try {
      const localTheme = await localStorage.getItem("theme");
      if (!localTheme) {
        localStorage.setItem("theme", JSON.stringify(theme));
      } else {
        const parsedTheme = JSON.parse(localTheme);
        setTheme(parsedTheme);
      }
    } catch (error) {
      console.log("Error initializing LocalStorage:", error);
    }
  };

  useEffect(() => {
    initializeLocalStorage();
  }, []);

div[data-theme="light"] {
   color: "black",
   background-color: "white"
}

div[data-theme="dark"] {
   color: "white",
   background-color: "black"
}

import { useTheme } from "../../context/ThemeContext";

function ExampleComponent() {
const { theme, setTheme, toggleTheme } = useTheme();

... more code

<div data-theme={theme ? "light" : "dark"}> 
... more code
</div>
}

... more code