theme toggle

테마 토글은 UI 이벤트, 상태 변경, 문서 반영, 저장을 한 루프로 묶는다

버튼 클릭으로 theme state가 바뀌면 document attribute와 localStorage가 갱신되고 다음 방문의 초기값이 된다.

01 Click toggle 요청 사용자 이벤트

02 State light/dark 변경 Provider value 갱신

03 Document data-theme 반영 CSS 변수 전환

04 Storage 선택 저장 초기값 복원

단계

확인할 것

실패 증상

초기값

system/storage 우선순위

깜빡임

토글

state 변경

버튼만 바뀜

DOM 반영

attribute/class

스타일 그대로

저장

localStorage

새로고침 후 초기화

핵심 테마 토글은 상태 하나가 아니라 문서와 저장소까지 동기화되는 작은 상태 머신이다.