자바스크립트: 운영체제의 다크 모드 정보 가져오기
자바스크립트: 운영체제의 다크 모드 정보 가져오기
출처 바로가기
방법
1
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches
true 이면 다크모드이며, false 이면 라이트모드 혹은 “운영체제에서 명시된 정보가 없음” 입니다. (라이트모드 감지는 위의 코드에서'(prefers-color-scheme: Dark)'를'(prefers-color-scheme: Light)'로 치환)
현재 라이트모드이므로 false 가 표시됩니다.
참고로 CSS 미디어쿼리를 사용하면 다음과 같습니다.
1
@media (prefers-color-scheme: dark) { /* 다크 모드에 사용 할 CSS를 입력하세요. */ }
예제: 다크모드 감지 페이지
This post is licensed under
CC BY 4.0
by the author.