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

브라우저에서만 " OS X가 어두운 모드인지 감지하는 방법? "과 유사 합니다.

사용자의 시스템이 Safari / Chrome / Firefox의 새로운 OS X 다크 모드인지 감지하는 방법이 있는지 아는 사람이 있습니까?

현재 운영 모드에 따라 사이트 디자인을 어두운 모드로 변경하고 싶습니다.

새로운 표준은 미디어 쿼리 레벨 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를 제외한 모든 주요 브라우저는 현재 어두운 모드를 지원합니다.

JS에서 감지하려면 다음 코드를 사용할 수 있습니다.

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";
});

이것은 현재 "CSS 실무 그룹 편집자 초안"에서 논의되고 있습니다 (2018 년 9 월) . 미디어 쿼리로 사용 가능한 사양이 시작되었습니다 (위 참조). 뭔가가 이미 사파리에 도착했다, 또한 참조 여기에 . 이론적으로는 Safari / Webkit 에서이 작업을 수행 할 수 있습니다.

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

그러나 이것은 사적인 것 같습니다 . MDN에는 CSS 미디어 기능 inverted-colors이 언급되어 있습니다. 플러그 : 여기 다크 모드에 대해 블로그 했습니다 .

Mozilla API를 검색했지만 브라우저 창 색상에 해당하는 변수가없는 것 같습니다. : 나는 당신을 도울 수있는 페이지를 찾을 수 있지만 CSS에서 사용하는 운영 체제 스타일에 어떻게 . 기사 제목에도 불구하고 Chrome과 Firefox의 색상이 다릅니다.

Mozilla에 따르면 2019 년 9 월 현재 선호되는 방법이 있습니다.

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