웹 페이지에서 기기의 다크모드 감지하기

현시점으로 많은 기기에는 다크 모드 기능이 많이 적용되어 있습니다. 다크 모드가 적용된 인터페이스는 어두운 환경에서 사용하였을 때 눈의 피로를 줄여주고, 시력을 조금이나마 보호할 수 있습니다. 이번 시간에는 간단한 코드를 추가함으로, 다크 모드를 감지하고 그에 따라 웹 페이지의 CSS를 변경하는 방법에 대해 자세히 알아보겠습니다. JS 아래 코드를 JS 파일이나, HTML 파일에 붙여넣으세요. const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches console.log(prefersDark); CSS 아래 코드 수정하여 CSS 파일이나, HTML 파일에 붙여넣으세요. @media (p..

원문링크 : 웹 페이지에서 기기의 다크모드 감지하기