matchMedia()1 CSS prefers-color-scheme: 사용자 운영체제의 다크모드 탐지하기 요즘 많은 사이트에서 사용자 경험을 높이기 위해 다크모드를 지원한다. 유튜브의 경우 사용자가 일일히 다크모드로 변경할 필요 없이, 기기에 설정된 테마에 따라 자동으로 테마가 설정되는 것을 볼 수 있는데 이건 어떻게 구현하는 걸까? CSS 미디어 쿼리의 prefers-color-scheme 속성을 사용하면 된다. 해당 속성을 사용하면, 사용자 운영체제의 다크모드 설정 여부를 쉽게 알아낼 수 있다. 아래에 MDN의 예시 코드를 가져와 보았다. 사용자의 운영체제가 light 모드인 경우 .themed 클래스의 배경과 폰트 색을 변경한다. @media (prefers-color-scheme: light) { .themed { background: white; color: black; } } 동적인 페이지를 만드.. 2022. 2. 16. 이전 1 다음