CSS prefers-color-scheme: 사용자 운영체제의 다크모드 탐지하기

요즘 많은 사이트에서 사용자 경험을 높이기 위해 다크모드를 지원한다. 유튜브의 경우 사용자가 일일히 다크모드로 변경할 필요 없이, 기기에 설정된 테마에 따라 자동으로 테마가 설정되는 것을 볼 수 있는데 이건 어떻게 구현하는 걸까?

 

CSS 미디어 쿼리의 prefers-color-scheme 속성을 사용하면 된다. 해당 속성을 사용하면, 사용자 운영체제의 다크모드 설정 여부를 쉽게 알아낼 수 있다. 아래에 MDN의 예시 코드를 가져와 보았다. 사용자의 운영체제가 light 모드인 경우 .themed 클래스의 배경과 폰트 색을 변경한다.

 

@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}

 

동적인 페이지를 만드는 경우에는 자바스크립트로 해당 값을 얻어와야 하는데, 이때는 window.matchMedia() 메서드를 사용한다. window.matchMedia()는 인자로 미디어 쿼리의 문자열을 받고 결과 값으로 MediaQueryList 객체를 반환한다. 활용 하면 다음과 같이 코드를 작성할 수 있다. 원래는 window.matchMeadi()가 지원되지 않는 브라우저를 대비한 예외처리가 필요하지만 편의상 생략하였다.

 

if(window.matchMedia('(prefers-color-scheme: light)').matches) {
    document.body.classList.remove('dark');
    document.body.classList.add('light');
}else {
    document.body.classList.remove('light');
    document.body.classList.add('dark');
}

 

가장 많이 사용되는 UI 프레임워크 중 하나인 MUI에는 미디어 쿼리 값을 받아오는, useMediaQuery()라는 이름의 hooks가 이미 마련되어 있다. window.matchMedia()를 사용할 때와 동일하게 인자를 넘겨주면 된다. 아래는 내가 프로젝트에서 작성한 코드의 일부이다. 운영체제의 기본 테마를 반영할 뿐만 아니라 이를 상태 값으로 두면 사용자의 기호에 맞게 언제든 변경 가능하게 할 수 있다.

 

 const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  useEffect(() => {
    setDarkMode(isDarkMode);
  }, [isDarkMode]);

  const [darkMode, setDarkMode] = useState(isDarkMode);

참고 자료

• https://developer.mozilla.org/ko/docs/Web/API/Window/matchMedia