CSS 미디어 쿼리 prefers-color-scheme (다크 모드)

다크 모드(dark mode)는 야간에 눈을 편안하게 하고 작업의 집중도를 높을 수 있도록 시스템 전반에 어두운 색생 체계를 적용해주는 운영 체제의 기능입니다. 2018년에 macOS Mojave에 처음으로 소개된 다크 모드는 현재 Windows 10을 비롯하여 많은 운영 체제에서 지원하는데요. 이에 따라 점점 많은 애플리케이션과 웹사이트가 운영 체제의 다크 모드에서 어울리는 어두운 계열의 스타일을 추가하고 있는 추세입니다.

📝 포스팅: https://www.daleseo.com/css-prefers-color-scheme/

🧑‍💻 실습 코드:

• https://codepen.io/daleseo/pen/poebNmO

• https://codepen.io/daleseo/pen/NWprjWR

• https://codepen.io/daleseo/pen/mdWEmJd

• https://codepen.io/daleseo/pen/poebpYe

이번 포스팅에서는 prefers-color-scheme 미디어 쿼리와 CSS 변수를 활용하여 운영 체제에 설정된 다크 모드를 감지하여 웹사이트에 다른 스타일을 적용하는 방법에 대해서 알아보겠습니다. 많은 사용자들이 운영 체제의 라이트/다크 모드가 일출/일몰 시간에 맞게 자동으로 전환되도록 설정을 해놓습니다. 다크 모드로 전환될 때 시스템 전반에 어두운 색생이 적용되는데 이에 적절히 반응하는 웹사이트를 만들 수 있다면 좀 더 나은 사용자 경험을 제공할 수 있을 것입니다.

본 포스팅에서 사용된 미디어 쿼리나 CSS 변수가 생소하신 분들께서는 아래 게시물을 참고하시면 도움이 될 것 같습니다.

📕 CSS 미디어 쿼리 (Media Query) 사용법: https://careerly.co.kr/comments/97684

📗 CSS에서 변수 사용하기 (CSS 사용자 속성) https://careerly.co.kr/comments/97455