프론트엔드
웹에서 다크모드 지원하기
두줄요약
웹 다크모드는 body 클래스와 CSS variable로 제어하는 방식을 제안했습니다. SSR·CSR 환경의 깜빡임과 웹뷰·구버전 OS 호환성도 함께 고려했습니다.
구조와 흐름
body클래스에 다크·라이트 모드 상태를 부여하고 CSS 선택자로 색상 전환localStorage, 웹뷰userAgent,matchMedia기반의 초기 모드 및 변경 감지- CSS variable로 모드별 색상 토큰 정의와 컴포넌트 스타일 재사용
선택 이유
prefers-color-scheme단독 사용 시 시스템 설정 의존성과 구버전 OS 미지원 문제- 웹뷰 앱 설정, 서비스 자체 정책, 사용자 토글 등 다양한 색상 정책 제어
성능/운영 포인트
- SSR·CSR 혼재 환경에서 콘텐츠 렌더링 전 동기 스크립트로 모드 판별
- FCP 이후 클래스 변경으로 발생하는 화면 깜빡임 방지
주의할 점
- 밝은 조명에서 다크모드의 가독성 저하 가능성 및 사용자 선택권 필요
- 이미지의 모드별 가시성 검증과 필요 시 별도 이미지 준비
