custom react hook - get system prefered theme and use it

useDarkMode.js

const matchDark = '(prefers-color-scheme: dark)'

function useDarkMode() {
  const [isDark, setIsDark] = React.useState(
    () => window.matchMedia && window.matchMedia(matchDark).matches
  )
  
  React.useEffect(() => {
    const matcher = window.matchMedia(matchDark)
    const onChange = ({ matches }) => setIsDark(matches)
    matcher.addListener(onChange)
    return () => {
      matcher.removeListiner(onChange)
    }
  }, [setIsDark])
  
  return isDark
}

// import useDarkMode from './useDarkMode'
//
// function App() {
//   const theme = useDarkMode()
//      ? themes.dark
//      : themes.light
//
//   return (
//     <ThemeProvider theme={theme}>
//        ...
//     </ThemeProvider>
//   )
// }