라이트/다크 테마 통합 — 90여 곳의 색상 리터럴을 흡수하다

테마 시스템

셸(콘솔·에디터·리포트)에 기본 라이트 + 다크모드 토글을 추가했다. app/globals.css에 :root / :root[data-theme='dark'] CSS 변수 세트를 정의하고, lib/ui.ts의 UI 토큰을 전부 var(...) 참조로 바꿨다 — 흩어져 있던 #fff와 산발적 회색 리터럴 90여 곳을 이 변수 세트로 흡수시켰다. 항상 어두워야 하는 요소(벌크 선택 토스트바, 뷰어 기기 베젤)는 의도적으로 테마와 분리해 고정값으로 남겼다.

ThemeToggle 구현

useSyncExternalStore로 만들어서 effect 안에서 setState하는 린트 규칙을 우회했다. app/layout.tsx에는 페인트 전에 실행되는 스크립트를 넣어 테마 전환 시 깜빡임을 없앴고, <html suppressHydrationWarning>으로 그 스크립트가 만드는 서버/클라이언트 불일치를 의도된 것으로 처리했다.

김에 정리한 것

EditorScreen의 섹션 내비 활성 상태가 파스텔 배경 + 좌측 브랜드 바 조합이었는데, AI가 생성한 대시보드에서 흔히 보이는 패턴이라 걷어내고 텍스트 색·굵기 변화만으로 표시하도록 단순화했다. 색 시스템 분리 원칙(도구 색 vs 행사 색), 타이포·레이아웃 규칙을 담은 design.md를 신설해 팀 위키에 정본으로 올렸다.

검증은 헤드리스 브라우저로 라이트→다크 토글, 새로고침 후 유지, 콘솔 에러 0건까지 확인했다.