웹에서 다크모드 지원하기
프론트엔드
웹에서 다크모드 지원하기
두줄요약
웹 다크모드는 body 클래스와 JavaScript로 제어해 다양한 정책을 지원할 수 있습니다. 렌더링 전 판별과 CSS 변수로 깜빡임 및 스타일 중복을 줄였습니다.
문제 상황
- 시스템 설정만 따르는 다크모드로는 구버전 OS, 웹뷰, 서비스 자체 정책 대응의 한계
- CSR 이후 컬러모드 적용 시 FCP 구간의 화면 반짝임 발생 가능성
해결 방법
body클래스에 다크·라이트 모드 상태를 부여하고 localStorage, userAgent,matchMedia값으로 제어- 콘텐츠 렌더링 전 동기 스크립트에서 컬러모드를 판별해 flicker 최소화
- CSS 변수로 모드별 색상 토큰을 정의해 컴포넌트 스타일 중복 축소
선택 이유
- 시스템 선호도와 앱 웹뷰 전달값, 사용자 토글 등 다양한 컬러모드 정책 수용
prefers-color-scheme단독 방식의 지원 범위와 제어권 제약 보완
주의할 점
- 밝은 환경에서의 가독성과 사용자 선택권 고려
- 이미지 가시성 검토 및 모드별 별도 이미지 필요 가능성
