A custom effect that updates the dark/light mode accordingly when the system setting gets changed

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.addEventListener(onChange);

    return () => {
      matcher.removeEventListener(onChange);
    }
  }, [setIsDark]);

  return isDark;
}

// Thanks Tanner Linsley for this hook (https://www.youtube.com/watch?v=J-g9ZJha8FE)