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

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

브라우저에 대해서만 "OS X가 다크 모드에 있는지 탐지하는 방법"과 유사합니다.

사용자의 시스템이 Safari/Chrome/Firefox의 새로운 OS X Dark Mode인지 감지할 수 있는 방법이 있는지 찾은 사람 있습니까?

우리는 현재 운영 모드를 기준으로 사이트의 디자인을 다크 모드 친화적으로 변경하고 싶습니다.

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

참고: 현재 사용할 수 있는 위치Safari 기술 미리 보기 릴리스 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;
    }
}

▁option다니있습▁there 옵션도 있습니다.no-preference사용자가 선호하지 않는 경우.하지만 그런 경우에는 일반 CSS를 사용하고 CSS를 올바르게 캐스케이드하는 것을 추천합니다.

EDIT (2018년 12월 7일):

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

Safari Technology Preview 릴리스 71을 설치한 경우 다음을 통해 활성화할 수 있습니다.

개발 > 실험적 특징 > 다크모드 CSS 지원

그런 다음 테스트 페이지를 열고 요소 검사기를 열면 다크/라이트 모드를 전환할 수 있는 새 아이콘이 나타납니다.

---

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

---

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

다음 브라우저:

• iOS 13 (애플 키노트 이후 다음 주에 출하될 것으로 예상됨)
• Edge HTML 76(언제 발송될지 확실하지 않음)

---

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

---

EDIT(2020년 2월 3일):Microsoft Edge 79는 다크 모드를 지원합니다.(2020년 1월 15일 출시)

제 제안은 대부분의 사용자가 현재 다크 모드를 사용할 수 있기 때문에 다크 모드를 구현하는 것을 고려해야 한다는 것입니다(사이트의 야간 사용자용).

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

---

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

CSS 프레임워크 Tailwind CSS v2.0은 다크 모드를 지원합니다.(2020년 11월 18일 출시)

---

EDIT(2020년 12월 2일):

Google Chrome은 Dark Theme 에뮬레이션을 Dev Tools에 추가했습니다.출처: developer.chrome.com

---

EDIT(2022년 5월 2일):

현재 전 세계의 90%가 다크 모드 CSS를 사용할 수 있습니다.출처: caniuse.com

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

사양이 시작되었습니다(위 참조). 미디어 쿼리로 사용할 수 있습니다.Safari에 이미 무언가가 있습니다. 여기도 참조하십시오.따라서 이론적으로 Safari/Webkit에서 이 작업을 수행할 수 있습니다.

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

MDN에서 CSS 미디어 기능inverted-colors언급되었습니다.플러그: 여기 다크 모드에 대해 블로그에 올렸습니다.

Mozilla에 따르면 2020년 기준으로 선호되는 방법은 다음과 같습니다.

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

Safari/Webkit의 경우 사용할 수 있습니다.

@media (prefers-dark-interface) { background: #000; }

Mozilla API로 검색해보니 브라우저 창 색상에 해당하는 변수가 없는 것 같습니다.도움이 될 만한 페이지를 찾았지만,CSS에서 운영 체제 스타일을 사용하는 방법.기사 제목에도 불구하고 크롬과 파이어폭스의 색상은 다릅니다.

BootStrap 5.3.0-alpha1을 사용하고 Mark Sabo의 답변에 따라 다음을 사용했습니다(TypeScript를 사용하고 있었습니다).

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
        switchColorScheme();
    });

    function switchColorScheme() {
        document.querySelector('html')!.dataset.bsTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
            ? "dark"
            : "light";
    }

    switchColorScheme();

페이지가 로드되기 전에 이미 브라우저의 현재 밝기 또는 어두운 모드를 감지하고 그에 따라 요소에 부트스트랩 속성을 설정합니다.

아직 공식적인 것은 아니지만 다음을 사용할 수 있습니다.

배경색: 캔버스 색: 캔버스 텍스트

현재 공식: https://www.w3.org/TR/css-color-3/ 드래프트 추천: https://www.w3.org/TR/css-color-4/

(이 글을 올린다고 해서 저를 비난하지 마세요.홍보하는 것이 아니라 효과가 있다는 것입니다.)

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