Creating Theming on React using Tailwind

App.js

//App.js
import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import "./assets/main.css";
import Home from "./pages/Home";
import ThemeContext from "./utilities/ThemeContext";
function App() {
return (
<ThemeContext>
 <BrowserRouter>
    <Switch>
       <Route path='/' exact component={Home} />
     </Switch>
 </BrowserRouter>
</ThemeContext>
);
}
export default App;

Home.js

import React from "react";
import { ThemeContext } from "context/ThemeContext";

const Home = () => {
  const { theme, setTheme } = React.useContext(ThemeContext);

  const changeTheme = (event) => {
    setTheme(event.target.value);
  };
  return (
    <div className="h-screen">
      <div className="text-center w-full text-2xl ">
        Theme Changer
      </div>
      <div className="flex text-center my-8">
        <div className="mx-auto">
          <button
            onClick={changeTheme}
            value="light"
            className="px-2 py-1 mr-1 rounded bg-white"
          >
            Light
          </button>
          <button
            onClick={changeTheme}
            value="dark"
            className="px-2 py-1 ml-1 rounded bg-black text-white"
          >
            Dark
          </button>
        </div>
      </div>
      <div
        className={`w-64 h-64 flex items-center justify-center bg-${theme}-400`}
      >
        Theme
      </div>
    </div>
  );
};
export default Home;

tailwind.js

//tailwind.js
module.exports = {
plugins: [
...
],
...
theme: {
   extend: {
      colors: {
         dark: {
               100: "#6d706f",
               200: "#20c991",
               300: "#ff1f4f",
              400: "#dae0de",
              500: "#ffffff",
               },
            },
        },
     },
};

ThemeContext.js

//ThemeContext.js
import React, { useEffect } from "react";
import { useCallback } from "react";

export const ThemeContext = React.createContext();

export default ({ children }) => {
  const localStorageTheme = localStorage.getItem("theme");
  const [theme, setTheme] = React.useState(localStorageTheme);

  // window.onload = checkTheme();
  
  const checkTheme = useCallback(() => {
    if (theme === "dark") {
      localStorage.setItem("theme", "dark");
    } else if (theme === "default") {
      localStorage.setItem("theme", "default");
    } else if (theme === "light") {
      localStorage.setItem("theme", "light");
    } else {
      localStorage.setItem("theme", "default");
    }
  }, [theme]);

  const defaultContext = {
    theme,
    setTheme,
  };

  

  // console.log(localStorageTheme);

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

  return (
    <ThemeContext.Provider value={defaultContext}>
      {children}
    </ThemeContext.Provider>
  );
};