[css] 브라우저에서 OS가 어두운 모드인지 감지하는 방법은 무엇입니까?

새로운 표준은 미디어 쿼리 레벨 5의 W3C에 등록되어 있습니다.

참고 : 현재 Safari Technology Preview Release 68 에서만 사용 가능

사용자 선호도가 light다음과 같은 경우 :

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

사용자 선호도가 dark다음과 같은 경우 :

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

no-preference사용자가 선호하지 않는 경우 에도 옵션이 있습니다 . 그러나이 경우 일반 CSS를 사용하고 CSS를 올바르게 계단식으로 묶는 것이 좋습니다.

편집 (2018 년 12 월 7 일) :

Safari Technology Preview Release 71 에서는 사파리 에서 테스트를 쉽게하기 위해 토글 스위치를 발표했습니다. 또한 브라우저 동작을 확인하기 위해 테스트 페이지 를 만들었습니다 .

당신이있는 경우 사파리 기술 미리보기 릴리스 (71)는 당신이를 통해 활성화 할 수 있습니다 설치 :

개발> 실험 기능> 다크 모드 CSS 지원

그런 다음 테스트 페이지 를 열고 요소 관리자를 열면 새 아이콘이있어 어둡게 / 밝게 모드를 전환합니다.

–

편집 (2019 년 2 월 11 일) : Apple, 새로운 Safari 12.1 다크 모드로 출시

–

편집 (2019 년 9 월 5 일) : 현재 세계의 25 %가 어두운 모드 CSS를 사용할 수 있습니다. 출처 : caniuse.com

다가오는 브라우저 :

• iOS 13 (애플 기조 연설 다음 주에 출시 될 예정)
• EdgeHTML 76 (배송시기는 확실하지 않음)

–

편집 (2019 년 11 월 5 일) : 현재 세계의 74 %가 다크 모드 CSS를 사용할 수 있습니다. 출처 : caniuse.com

–

편집 (2020 년 2 월 3 일) : Microsoft Edge 79는 어두운 모드를 지원합니다. (2020 년 1 월 15 일 출시)

–

내 제안은 : 대부분의 사용자가 지금 (특히 모바일 일명 배터리 절약을 위해) 사용할 수 있기 때문에 다크 모드 구현을 고려해야합니다.

참고 : IE, Edge를 제외한 모든 주요 브라우저는 현재 어두운 모드를 지원합니다.

답변

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

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

@media (prefers-dark-interface) { color: white; background: black }

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}