React 상태 공유

테마 상태 전파 점검

테마 변경은 색상 토글이 아니라 선택값이 저장소, Provider, CSS 토큰으로 이어지는 상태 전파 문제입니다.

01 localStorage.theme

사용자 선택을 새로고침 뒤에도 복원한다.

저장
02 ThemeProvider

light · dark · system을 실제 resolved theme으로 바꾼다.

해석
03 html[data-theme] + tokens

컴포넌트는 하드코딩 색 대신 토큰만 읽는다.

적용
구분기준처리
복원 새로고침 후 선택값 유지 Provider 초기화
시스템 system일 때 OS 변경 반영 resolvedTheme 분리
대비 텍스트·보더·포커스 확인 토큰 회귀 테스트

핵심 상태는 하나로 관리하고, 실제 색은 CSS 토큰으로만 전파한다.