본문 바로가기

css variables

React 앱에서 테마 변경 기능 다중 지원하기 라이트/다크를 넘어 세피아, 하이 콘트라스트 등 다중 테마를 지원하면 접근성(가독성), 브랜드 일관성, 사용자 선호 반영을 동시에 달성할 수 있습니다. 이 글은 CSS 변수와 React Context를 활용해 확장 가능한 다중 테마 토글을 구현하고, 초기 깜빡임 방지, 시스템 테마 연동, 대규모 테마 최적화까지 실무 팁을 정리합니다.1. 설계 원칙첫째, CSS 변수 토큰 기반으로 설계합니다. 둘째, DOM 루트에 data-theme 속성으로 테마 상태를 단일 소스로 관리합니다. 셋째, React에서는 테마 이름만 관리하고 스타일은 CSS 변수로 위임해 리렌더 비용을 줄입니다. 넷째, 시스템 테마와 동기화하며 사용자가 선택한 테마는 localStorage로 지속화합니다.2. 토큰 기반 CSS 변수 정의(다.. 더보기
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;}.. 더보기

티스토리툴바