JavaScript를 사용하여 다크 모드를 감지하는 방법

JavaScript를 사용하여 다크 모드 감지 및 모드 변경 감지

CSS를 사용하면 prefers-color-scheme 미디어 쿼리를 사용하여 다크 모드를 감지할 수 있습니다.

하지만.. JavaScript를 사용해야 한다면?

페이지에 이미지를 추가하는 JavaScript 코드가 있었기 때문에 최근에 이 문제를 발견했지만 명암 모드에 따라 다른 이미지를 표시하고 싶었습니다.

방법은 다음과 같습니다.

먼저 matchMedia객체가 존재하는지 감지합니다 (그렇지 않으면 브라우저가 다크 모드를 지원하지 않으며 라이트 모드로 돌아갈 수 있음).

그런 다음 다크 모드인지 확인하십시오.

window.matchMedia('(prefers-color-scheme: dark)').matches

true가 반환되면 다크 모드가 활성화됩니다.

다음은 다크 모드인 경우 이미지의 색상을 반전하는 전체 예제입니다.

const img = document.querySelector('#myimage')
if (window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: dark)').matches) {
  img.style.filter="invert(100%)";
}

하지만 문제가 있습니다. 사용자가 웹 사이트를 사용하는 동안 모드를 변경하면 어떻게 됩니까?

다음과 같이 이벤트 리스너를 사용하여 모드 변경을 감지할 수 있습니다.

window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', event => {
  if (event.matches) {
    //dark mode
  } else {
    //light mode
  }
})

원문 출처 : flaviocopes