Synchronous Inline Script를 통한 Zero-Flash Dark Mode 구현

Dark Mode in 5 Minutes with salt-theme-gen (No Flash, Zero Extra Dependencies)

Hasan Sarwer2026년 6월 18일5분beginner

AI 요약

Context

localStorage 기반 테마 저장 방식의 특성상 JavaScript 실행 시점과 HTML 렌더링 시점의 간극으로 인한 Theme Flash 현상 발생. 기존의 비동기 스크립트 처리 방식으로는 초기 렌더링 시 잘못된 테마가 노출되는 구조적 한계 존재.

salt-theme-gen을 통한 Light/Dark Mode 디자인 토큰의 일괄 생성 및 CSS Variable 변환 구조 설계
browser의 top-to-bottom 파싱 순서를 이용한 내 Synchronous Inline Script 배치로 렌더링 전 테마 결정
CSS Custom Properties를 활용하여 JavaScript의 리렌더링 없이 DOM Attribute 변경만으로 스타일 즉시 반영
OS 설정(prefers-color-scheme)과 사용자 선택(data-theme)의 우선순위를 정의한 3단계 CSS Cascade 전략 수립
HTML Root Element에 data-theme 속성을 주입하여 전역 스타일 상태를 제어하는 State Management 최적화

실천 포인트

1. 테마 결정 스크립트를 모든 스타일시트보다 상단에 배치하여 Synchronous하게 실행하는지 확인

2. 디자인 토큰을 CSS Variable로 추상화하여 런타임 JS 연산 최소화

3. OS 기본 설정과 사용자 커스텀 설정을 모두 지원하는 CSS Selector 우선순위 설계

태그