[자바스크립트 꿀팁] 브라우저 다크모드 감지 (Detect DarkMode Using JavaScript)

오늘은 다크모드를 지원하는 앱을 만들 때 자바스크립트를 활용하여 다크모드를 감지 하는 방법에 대해서 알아 보겠습니다. 다크모드 지원을 위한 글로벌 theme를 적용하려고 분기처리할 때 많이 사용하게 됩니다.

 

JavaScript

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

 

이렇게 간단한 방법으로 우리는 다크모드에 대해서 감지해볼 수 있습니다. 물론 CSS의 media query를 통한 분기 처리도 가능합니다.

 

CSS

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

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

 

이렇게 CSS를 통해서 간단히 작업할 수 있습니다. 각자 프론트엔드 환경 구성에 따라 사용하시면 될 것 같습니다.