CSS 변수와 Composables로 구현한 Vue 멀티 테마 시스템

Context

단순한 다크 모드를 넘어 다중 테마 지원 필요성 증가. CSS 클래스 기반의 오버라이드 방식은 테마 수 증가 시 선택자 중복과 우선순위 충돌 유발. 접근성 준수를 위한 색상 팔레트 생성 도구 부재.

Technical Solution

• CSS Custom Properties(--vmt-*) 기반의 값 교체 방식을 통한 단일 캐스케이드 레이어 관리
• useTheme() Composable을 통한 컴포넌트 트리 내 반응형 테마 상태 공유
• TailwindCSS 플러그인 연동으로 테마 토큰을 유틸리티 클래스로 직접 활용하는 구조
• WCAG 기준의 대비율 계산 및 자동 색상 보정 로직을 포함한 SSR 안전한 유틸리티 함수 제공
• attribute, class, both 세 가지 DOM 적용 전략을 통한 유연한 테마 주입 방식 설계
• 런타임 의존성을 Vue 자체로 제한하여 라이브러리 경량화 및 Vue 2.7/3 호환성 확보

Key Takeaway

테마 시스템 설계 시 개별 스타일 정의보다 CSS 변수라는 추상화 계층을 두고 이를 상태 관리 라이브러리와 결합하는 것이 확장성과 유지보수 측면에서 효율적임.