웹에서 다크모드 지원하기

이 글은 웹 애플리케이션에서 다크모드와 라이트모드를 지원하는 방법에 대해 설명합니다. 다크모드는 눈의 피로를 줄여주지만, 특정 환경에서는 가독성을 저해할 수 있어 사용자가 선택할 수 있도록 제공하는 것이 일반적입니다.

처음에는 CSS의 `prefers-color-scheme` 미디어 쿼리를 사용하여 사용자의 시스템 설정을 감지하고 그에 맞춰 스타일을 적용하는 방법을 소개합니다. 이 미디어 쿼리는 사용자의 운영체제나 브라우저에서 설정된 컬러 모드를 탐지하여 웹 페이지의 디자인을 자동으로 변경할 수 있게 해줍니다.

다만, 이 방법은 사용자에게 직접적인 선택권을 주지 못한다는 단점이 있습니다.