A react hook for DarkMode detection.

useDarkMode.ts

import { useEffect, useState } from "react";

const darkModeQuery = matchMedia("(prefers-color-scheme: dark)");

export const useDarkMode = () => {
  const [isDark, setDark] = useState(darkModeQuery.matches);

  useEffect(() => {
    const listener = () => {
      console.log("Dark mode changed", darkModeQuery.matches);
      setDark(darkModeQuery.matches);
    };

    darkModeQuery.addListener(listener);

    return () => {
      darkModeQuery.removeListener(listener);
    };
  });
  return isDark;
};