DarkMode 썸네일형 리스트형 React 앱에서 Dark Mode 토글 기능 구현하기 다크 모드는 브랜드 일관성, 접근성, 배터리 절약에 도움이 됩니다. 실무에서는 CSS 변수와 html의 dark 클래스 조합이 가장 단순하고 확장성이 좋습니다. 시스템 선호 감지, 로컬 저장, 초기 플래시 방지까지 한 번에 구현해보겠습니다.1. 전략 요약CSS 변수로 색상을 정의하고 html 요소에 dark 클래스를 토글합니다. 사용자의 선택은 localStorage에 저장하고, 선택이 없을 때만 시스템 선호(prefers-color-scheme)를 따릅니다. 초기 로드 시 스크립트로 dark 클래스를 먼저 붙여 FOUC(깜빡임)를 방지합니다.2. CSS 토큰 준비/* index.css 등 */:root { --bg: #ffffff; --fg: #0f172a; color-scheme: light;}.. 더보기 이전 1 다음