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

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

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

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

다크모드를 처리하는 두 가지 방식에 대해서 설명드립니다. 일반적인 방법은 "@media"태크의 "prefers-color-schem"를 사용하는 방법이며, 또 다른 방법은 " "에 사용하는 파일로딩 방식입니다. 스크립트

ccusean.tistory.com

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

서버사이드(Server side)에서 사용자의 Color scheme를 미리 알고, 처리할 수 있는 방법을 공유합니다. Mac, iPhone과 같은 경우 이미 오래전부터 "다크테마"라는 것을 제공하고 있습니다. 눈의 피로도를

ccusean.tistory.com

댓글