Detect Dark Mode 다크모드 감지하기

Detect Dark Mode

다크모드 감지 JS

 

Detect dark mode in safari

prefers-color-scheme 으로 다크모드를 감지한다.

 

safari Dark mode error

Since safari doesn't eat addEventListener, branch to try catch

safari에서 addEventListener 안먹으므로 try catch 로 분기

 

  const [isDark, setIsDark] = useState(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);

  useEffect(() => {
    const detectMode = () => {
      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        setIsDark(true);
      } else {
        setIsDark(false);
      }
    };
    detectMode();

    const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

    // Add Dark Mode Event
    try {
      // Chrome & Firefox
      darkMediaQuery.addEventListener('change', e => {
        detectMode();
      });
    } catch (e1) {
      try {
        // Safari
        darkMediaQuery.addListener(e => {
          detectMode();
        });
      } catch (e2) {
        console.error(e2);
      }
    }

    return () => {
      // Remove Dark Mode Event
      try {
        // Chrome & Firefox
        darkMediaQuery.removeEventListener('change', e => {
          detectMode();
        });
      } catch (e1) {
        try {
          // Safari
          darkMediaQuery.removeListener(e => {
            detectMode();
          });
        } catch (e2) {
          console.error(e2);
        }
      }
    };
  }, []);