CSS
-
[자바스크립트 꿀팁] 브라우저 다크모드 감지 (Detect DarkMode Using JavaScript)frontend/꿀팁 2022. 10. 7. 10:24
오늘은 다크모드를 지원하는 앱을 만들 때 자바스크립트를 활용하여 다크모드를 감지 하는 방법에 대해서 알아 보겠습니다. 다크모드 지원을 위한 글로벌 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 ..