use-themes/useTheme.js

Hook for changing theme change in React applications without adding external script tag

import { useEffect, useState } from "react";

const useTheme = () => {
  const [theme, updateTheme] = useState("");

  useEffect(() => {
    const localStorageTheme = localStorage?.getItem("theme");

    if (!!localStorage && !localStorageTheme) {
      changeThemeHandler(theme);
    } else if (!!localStorage && (localStorageTheme === "light" || localStorageTheme === "dark")) {
      updateTheme(localStorageTheme);
      changeThemeHandler(localStorageTheme);
    } else {
      updateTheme("light");
      changeThemeHandler("light");
    }
  }, []);

  const changeThemeHandler = (updatedTheme = "light") => {
    const documentEl = document?.documentElement;
    const documentClassList = documentEl?.classList;

    documentEl.style.colorScheme = updatedTheme || "light";
    documentClassList.remove("light", "dark");
    localStorage.setItem("theme", updatedTheme);
    documentEl.classList.add(updatedTheme || "light");
  };

  const setTheme = (newTheme) => {
    if (newTheme === "light" || newTheme === "dark" || !newTheme) {
      changeThemeHandler(newTheme);
      updateTheme(newTheme);
    }
  };

  return { theme, setTheme };
};

export default useTheme;