React dark mode hook

useDark.ts

import { useMemo, useSyncExternalStore } from 'React'

const useDark = () => {
  const match = useMemo(() => window.matchMedia('(prefers-color-scheme: dark)'), [])

  // Handlers
  const subscribe = (cb: () => void) => {
    match.addEventListener('change', cb)

    return () => match.removeEventListener('change', cb)
  }

  // Syncs
  const dark = useSyncExternalStore(
    subscribe,
    () => match.matches
  )
  
  return dark
}

This hook could monitor the PC's color scheme responsive.

It queries prefers-color-scheme and follow it, updating while the OS has switched dark/light mode.

Here is an use case:

const DarkSwitch = () => {
  // Hooks
  const systemDark = useDark()
  const [value, setValue] = useState(systemDark)

  // Sync while External dark mode changed
  useEffect(() => {
    setValue(systemDark)
  }, [systemDark])

  return <span>{value ? '🌑' : '☀️'}</span>
}