useDarkMode.js

import React from 'react'

export default function useDarkMode({
  intervalTime = 300,
  getIsDark = defaultGetIsDark,
} = {}) {
  // Keep track of the current mode
  const [isDark, setIsDark] = React.useState(() => getIsDark())

  // Set up the checker
  React.useEffect(() => {
    const interval = setInterval(() => {
      const newIsDark = getIsDark()

      // If the user's preference has changed
      if (isDark !== newIsDark) {
        // Update!
        setIsDark(newIsDark)
      }
    }, intervalTime)

    return () => {
      clearInterval(interval)
    }
  }, [getIsDark, intervalTime, isDark, setIsDark])

  return isDark
}

function defaultGetIsDark() {
  // The defualt checker uses matchMedia :)
  return (
    window.matchMedia &&
    window.matchMedia('(prefers-color-scheme: dark)').matches
  )
}

// Usage

function App() {
  const userPrefersDarkMode = useDarkMode()

  //
}