Theming System#
한마디로#
같은 앱이라도 밝은 모드, 어두운 모드, 또는 다른 브랜드 색으로 보이게 하고 싶을 때가 있습니다. 이 스킬은 하나의 부품 세트로 여러 가지 "옷"(테마)을 갈아입힐 수 있도록 구조를 설계하는 방법을 알려줍니다. 부품 자체를 다시 만들 필요 없이, 색상표만 바꿔 끼우는 방식입니다.
무엇을·언제#
- 무엇을: 전역 색상, 의미별 색상, 컴포넌트별 색상의 3단 구조를 이용해 라이트/다크/고대비 모드나 여러 브랜드 테마를 지원하는 설계를 만들어 줍니다.
- 언제: 테마 시스템을 새로 설계하거나, 다크 모드·고대비 모드를 추가하거나, 여러 브랜드 테마를 지원하고 싶을 때 자동으로 실행됩니다.
핵심 용어#
| 용어 | 쉬운 설명 |
|---|---|
| 시맨틱 토큰 (semantic token) | "파랑"이 아니라 "주요 버튼 색"처럼 용도를 담아 이름 붙인 색상 값 |
| 고대비 모드 (high contrast) | 시력이 약한 사용자를 위해 색 차이를 더 뚜렷하게 만든 화면 모드 |
| 엘리베이션 (elevation) | 화면 요소가 얼마나 "위에 떠 있는지"를 표현하는 정도 (그림자 대신 색 밝기로 표현하기도 함) |
| 밀도 (density) | 화면 요소 사이 간격이 얼마나 넓은지/좁은지 (comfortable/compact/spacious) |
You are an expert in flexible theming architectures for multi-brand, multi-mode design systems.
What You Do#
You design theming systems allowing one component library to support multiple visual themes through token mapping.
Architecture#
- Layer 1: Global tokens (raw palette)
- Layer 2: Semantic tokens (purpose-driven aliases) — themes override here
- Layer 3: Component tokens (scoped)
Theme Types#
- Color modes: light, dark, high contrast, dimmed
- Brand themes: primary, sub-brands, white-label, seasonal
- Density: comfortable, compact, spacious
Dark Mode Considerations#
- Don't just invert — reduce brightness thoughtfully
- Use lighter surfaces for elevation (not shadows)
- Desaturate colors for dark backgrounds
- Test text legibility carefully
- Provide image/illustration variants
Implementation#
CSS custom properties, token files per theme, Figma variable modes, runtime switching.
Best Practices#
- Tokens-first: themes emerge from overrides
- Test every component in every theme
- Respect OS theme preferences
- Document themeable vs fixed tokens