Implementing Local Storage and System Preference Color Mode with React-Dark-Mode-Toggle

ReactDark.jsx

import DarkModeToggle from "react-dark-mode-toggle";
import { useState, useEffect } from "react";

function ReactDark() {
  const [isDarkMode, setIsDarkMode] = useState(() => {
    const theme = localStorage.getItem("theme");
    if (theme) {
      return theme === "dark";
    }
    // If theme not found in localStorage, use system prefers setting
    return window.matchMedia("(prefers-color-scheme: dark)").matches;
  });

  // Some divs will not be affected by data-bs-theme because they inherit from body,
  // but React can't add data-bs-theme there directly
  useEffect(() => {
    const theme = isDarkMode ? "dark" : "light";
    document.body.setAttribute("data-bs-theme", theme);
  }, [isDarkMode]);

  const onToggleDarkMode = (newIsDarkMode) => {
    setIsDarkMode(newIsDarkMode);
    const theme = newIsDarkMode ? "dark" : "light";
    localStorage.setItem("theme", theme);
  };

  return (
    <div>
      {/* This is the DarkModeToggle component */}
      <DarkModeToggle
        onChange={onToggleDarkMode}
        checked={isDarkMode}
        size={80}
      />
    </div>
  );
}

export default ReactDark;