[javascript] 자바스크립트 다크모드 확인

참고: https://ultimatecourses.com/blog/detecting-dark-mode-in-javascript

이 포스트에서는 JavaScript로 브라우저의 다크모드를 체크하고 변경사항을 확인하여 스타일을 업데이트 하는 방법을 알아보겠습니다. 이를 위해 먼저 window.matchMedia API를 알아봐야합니다. window.matchMedia API는 document가 특정 미디어 쿼리와 일치하는지 확인하기 위한 JavaScript 유틸리티입니다. 미디어 쿼리는 반응형 웹과 같은 것에 사용하는데 익숙하지만 다크모드의 도입으로 더 많은 것을 처리할 수 있게 되었습니다.

모든 브라우저가 window.matchMedia API를 지원하지 않기 때문에 이 API가 사용가능한지 확인해야합니다.

if (window.matchMedia) {
  // API 사용가능
}

다음으로 matchMedia에 prefers-color-scheme을 light나 dark로 해서 쿼리를 전달합니다.

if (window.matchMedia) {
  const query = window.matchMedia('(prefers-color-scheme: dark)');
}

이 쿼리의 결과는 다음과 같습니다.(사용자가 시스템 설정을 다크모드로 한 경우)

MediaQueryList { media: '(prefers-color-scheme: dark)', matches: true, onchange: null }

MediaQueryList 인스턴스에 쿼리에 일치하는 속성이 있는 것을 확인할 수 있습니다. 즉 matches가 true면 사용자는 다크모드를 사용 중 이라는 말이 됩니다. 이제 뭘 하면 좋을까요? 아마 body 태그에 특정 클래스를 토글하면 좋을 것 같습니다. 이를 위해 다크모드 확인하는 기능을 함수로 감싸면 다음과 같이 간단한 코드가 됩니다.

const isDarkMode = () => 
  window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

여기서 사용자가 임의의 타이밍에 다크모드 설정을 바꾼다거나 야간이되면 자동으로 라이트모드에서 다크모드로 바뀔 때 이 변경사항을 subscribe 하고있는 것은 어떨까요?

MediaQueryList 인스턴스 속성에 "onchange: null"이 있는 것을 눈치챘나요? query.onchange를 직접 사용하거나 addEventListener를 사용하여 쿼리 변경사항을 subscribe 할 수 있습니다.

const runColorMode = (fn) => {
  if (!window.matchMedia) {
    return;
  }
  
  const query = window.matchMedia('(prefers-color-scheme: dark)');

  fn(query.matches);

  query.addEventListener('change', (event) => fn(event.matches));
};

runColorMode((isDarkMode) => {
  if (isDarkMode) {
    document.body.classList.add('dark-mode');
  } else {
    document.body.classList.remove('dark-mode');
  }
});

위의 예제는 prefers-color-scheme이 변경되었을 때 body 태그에 다크모드 표시를 하는 코드입니다. 사용자가 시스템 기본 설정을 다크모드로 바꾸면 MediaQueryList 인스턴스로 라이트모드인지 다크모드인지 체크하여 이벤트를 발생시키고 미리 등록된 콜백 함수가 실행이 되어 body 클래스를 변경합니다.