JavaScript 다크, 라이트모드 변경 이벤트 처리하기

사용자가 시스템의 화면모드를 라이트 혹은 다크 모드로 변경시 이에 따른 처리를 위해서 자바스크립트로 해당 이벤트를 받아서 처리하는 방법입니다.

 

<script>
  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    // 다크모드 처리
  } else {
    // 라이트모드 처리
  }
</script>

 

CSS 다크모드 처리 2가지 방식

 

Node.js Prefers-color-scheme 서버에서 처리하는 방법