Dark mode

This hook detects whether the user's device is configured to be in dark mode. It automatically updates when the device's mode changes.

use-dark-mode.tsx

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;
}