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

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

---

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

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

현재 운영 모드에 따라 다크 모드 친화적으로 사이트의 디자인을 변경하고 싶습니다.

---

새로운 표준은 Media Queries Level 5의 W3C에 등록되어 있습니다.

참고 : 현재 Safari Technology Preview Release 68 에서만 사용할 수 있습니다.

사용자 환경 설정이 light다음과 같은 경우 :

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

사용자 환경 설정이 dark다음과 같은 경우 :

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

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

수정 (2018 년 12 월 7 일) :

에서 사파리 기술 미리보기 릴리스 (71) 그들은 쉽게 테스트 할 Safari에서 토글 스위치를 발표했다. 또한 브라우저 동작을 확인하기 위해 테스트 페이지 를 만들었습니다 .

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

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

그런 다음 테스트 페이지 를 열고 요소 검사기를 열면 어둡게 / 밝게 모드를 전환 할 수있는 새 아이콘이 생깁니다.

-

편집 (2019 년 2 월 11 일) : Apple은 새로운 Safari 12.1 다크 모드로 배송 됩니다.

-

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

예정된 브라우저 :

• iOS 13 (애플의 키 노트 이후 다음주에 출시 될 것 같다)
• EdgeHTML 76 (언제 배송되는지 확실하지 않음)

---

이것은 현재 (2018 년 9 월) "CSS Working Group Editor Drafts"에서 논의되고 있습니다. 미디어 쿼리로 사용할 수있는 사양이 시작되었습니다 (위 참조). 이미 Safari에 무언가 가 도착했습니다 . 여기도 참조 하세요 . 따라서 이론적으로 Safari / Webkit에서이 작업을 수행 할 수 있습니다.

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

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

---

Mozilla API를 통해 검색했지만 브라우저 창 색상에 해당하는 변수가없는 것 같습니다. 도움이 될만한 페이지를 찾았지만 CSS에서 운영 체제 스타일을 사용하는 방법 . 기사 헤더에도 불구하고 Chrome과 Firefox의 색상은 다릅니다.

---

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

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

---

Mozilla에 따르면 2019 년 9 월 현재 선호되는 방법은 다음과 같습니다.

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

참고 URL : https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers