A React hook to detect dark/light mode.

useUserTheme.ts

import React from "react"

const useUserTheme = (): boolean => {
  const [isDark, setIsDark] = React.useState(false)

  React.useEffect(() => {
    window
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", (event) => {
        setIsDark(event.matches)
      })
  }, [])

  return isDark
}

export default useUserTheme