Dark mode hook (React)

Licensed under 0BSD. Use this code for any purpose. No attribution required. Use at your own risk.

import { useEffect, useState } from 'react';

const matchMedia =
  typeof window !== 'undefined'
    ? window.matchMedia('(prefers-color-scheme: dark)')
    : undefined;

export function useDarkMode() {
  const [isDarkMode, setIsDarkMode] = useState(matchMedia?.matches);

  useEffect(() => {
    const handler = () => setIsDarkMode(matchMedia?.matches);

    matchMedia?.addEventListener('change', handler);

    return () => matchMedia?.removeEventListener('change', handler);
  }, []);

  return isDarkMode ?? false;
}