Hook to detect the preferred color scheme from the user agent

usePreferredColorScheme.ts

'use client';

import { useEffect, useState } from 'react';

type ColorScheme = 'light' | 'dark';

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function getPreferredColorScheme(matches: boolean): ColorScheme {
  return matches ? 'dark' : 'light';
}

export function usePreferredColorScheme() {
  const [colorScheme, setColorScheme] = useState<ColorScheme>(
    getPreferredColorScheme(mediaQuery.matches),
  );

  useEffect(() => {
    const handler = (event: MediaQueryListEvent) => {
      setColorScheme(getPreferredColorScheme(event.matches));
    };

    mediaQuery.addEventListener('change', handler);

    return () => {
      mediaQuery.removeEventListener('change', handler);
    };
  }, []);

  return colorScheme;
}