크롬에서 다크 모드(dark mode) 테스트 하는 방법. prefers-color-scheme.

웹 에서 현재 시스템의 화면 모드는 

prefers-color-scheme를 미디어 쿼리로 확인하면 된다.

 

자바스크립트를 사용하는 경우 matchMedia함수를 사용해서

다음과 같이 사용한다.

 

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

 

window.matchMedia("(prefers-color-scheme: dark)")

 

 

반환값은 MediaQueryList 객체인데, 이 객체 속성 중 matches를 사용하면 되겠다.

 

 

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

 

 

그럼 matchMedia 반환 값을 사용해서 아래와 같이 코드를 사용한다.

 

window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'

 

 

matchMedia는 이벤트 리스너를 지원하기 때문에 시스템의 변경사항을 확인할 수 있다.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries

 

window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (e) => {
	const _mode = e.matches ? "dark" : "light";
    //
});

 

 

이렇게 코드를 만든 후 크롬에서 테스트해보자.

 

 

 

 

 

 

크롬 DevTools에 위 와 같이 Rendering에 보면 prefers-color-sheme을 변경할 수 있다.

 

 

내 DevTools에 Rendering이 없으면 show rendering 명령어로 직접 켜준다.

 

 

 

윈도우는 Ctrl + Shitf + P 키를 같이 눌러 명령 실행창을 실행 시키고

Show Rendering를 선택하면 된다.