Solution: Programmatically Detect Dark Mode using React Hook

[elucidsoft]

I couldn't find a good answer to this, so I thought I would share this code snippet in case anyone else had this problem. I have a text editor component that uses it's own themes, and I wanted to switch the theme dynamically based on the Tailwind dark mode or light mode to match better. To do that I needed a way to dynamically detect if the Tailwind Dark mode was enabled, or not. I also needed to be able to watch for a change, in case they switched themes.

import { useEffect, useState } from "react";

export const useDarkMode = () => {
  const [isDarkMode, setIsDarkMode] = useState(checkDarkMode());

  function checkDarkMode() {
    return document.body.classList.contains("dark");
  }

  useEffect(() => {
    setIsDarkMode(checkDarkMode);

    const mutationObserver = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.attributeName === "class") {
          setIsDarkMode(checkDarkMode());
        }
      });
    });

    mutationObserver.observe(document.body, { attributes: true });

    return () => {
      mutationObserver.disconnect();
    };
  }, []);

  return isDarkMode;
};