react-light-dark-mode/src/components/DarkLightMode/DarkLightMode.js

A react Library to build light and dark mode UI

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

const DarkLightModeContext = createContext();

function DarkLightModeProvider(props) {
  const [lightMode, setLightMode] = useState(
    localStorage.getItem("lightMode") &&
      localStorage.getItem("lightMode") === "true"
      ? true
      : false
  );
  let lightThemeApplied = "";
  const lightTheme = "_lightMode_";
  const darkTheme = "_darkMode_";
  const body = document.body;

  if (localStorage.getItem("lightMode")) {
    lightThemeApplied = localStorage.getItem("lightMode");
  }

  if (lightThemeApplied === "true") {
    body.classList.add(lightTheme);
  } else {
    body.classList.add(darkTheme);
  }

  const toggleLightDarkMode = (dark) => {
    setLightMode(!lightMode);
    localStorage.setItem("lightMode", !lightMode);
    if (lightThemeApplied === "true") {
      body.classList.replace(lightTheme, darkTheme);
      lightThemeApplied = darkTheme;
    } else {
      body.classList.replace(darkTheme, lightTheme);
      lightThemeApplied = lightTheme;
    }
  };

  return (
    <div>
      <DarkLightModeContext.Provider value={{ lightMode, toggleLightDarkMode }}>
        {props.children}
      </DarkLightModeContext.Provider>
    </div>
  );
}

export { DarkLightModeContext, DarkLightModeProvider };