테마 변경 기능의 저장 위치

초기값 결정

저장된 사용자 선택, OS 선호도, 기본값 순서로 시작 테마를 정한다.

ThemeProvider나 context가 현재 테마와 변경 함수를 제공한다.

root 요소의 data-theme 또는 class를 바꿔 CSS 변수를 교체한다.

사용자가 명시적으로 고른 값만 localStorage에 저장하고 system은 미디어 쿼리를 따른다.

light/dark

명시 선택 사용자가 고른 테마를 다음 방문에도 유지

저장소 접근 실패 처리

system

OS 선호도 prefers-color-scheme 변경을 구독

사용자 선택과 우선순위 구분

CSS vars

토큰 교체 --bg, --text, --border 같은 의미 기반 변수

색 이름 변수보다 유지보수 쉬움

No flash

초기 깜빡임 방지 앱 렌더 전 root theme를 빠르게 설정

SSR/CSR 방식별 처리

접근성 두 테마 모두 대비와 focus 표시가 충분하다.

저장 정책 system 선택을 고정 테마로 오해해 저장하지 않는다.

깜빡임 첫 렌더에서 기본 테마가 잠깐 보이지 않는다.

토큰 컴포넌트가 하드코딩 색 대신 의미 토큰을 사용한다.