자바스크립트: 운영체제의 다크 모드 정보 가져오기

출처 바로가기

const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches

true 이면 다크모드이며, false 이면 라이트모드 혹은 “운영체제에서 명시된 정보가 없음” 입니다. (라이트모드 감지는 위의 코드에서'(prefers-color-scheme: Dark)'를'(prefers-color-scheme: Light)'로 치환)

[caption id=”attachment_2441” align=”alignnone” width=”353”] 현재 라이트모드이므로 false 가 표시됩니다.[/caption]

 

참고로 CSS 미디어쿼리를 사용하면 다음과 같습니다.

@media (prefers-color-scheme: dark) { /* 다크 모드에 사용 할 CSS를 입력하세요. */ }

 

예제: 다크모드 감지 페이지

https://gist.github.com/ayaysir/e96e96be878a18d0afb7f1aea9329b16

https://media.giphy.com/media/ZEZwIy2fmxuWmyAP1G/source.mp4