Recoil

import {atom} from 'recoil';

export const darkModeState = atom({
  key: 'darkModeState',
  default:
    typeof window !== 'undefined' &&
    window.matchMedia('(prefers-color-scheme: dark)').matches,
});

  const [darkMode, setDarkMode] = useRecoilState(darkModeState);
  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

    setDarkMode(mediaQuery.matches);

    const handleChange = (e: any) => {
      setDarkMode(e.matches);
    };

    mediaQuery.addEventListener('change', handleChange);

    return () => {
      mediaQuery.removeEventListener('change', handleChange);
    };
  }, [setDarkMode]);