Theming 상세, CSS Variables, Brand expression

CSS Variables 기반 theming

Design tokens을 CSS 변수로 구현하면 theming이 자동입니다.

:root {
  --color-primary: oklch(60% 0.2 250);
  --color-bg: oklch(100% 0 0);
  --color-text: oklch(20% 0 0);
}

[data-theme="dark"] {
  --color-primary: oklch(70% 0.18 250);
  --color-bg: oklch(15% 0 0);
  --color-text: oklch(90% 0 0);
}

JavaScript로 data-theme 속성만 토글하면 전체 사이트 색이 변경됩니다.

다중 테마

일부 도구는 사용자가 여러 테마 중 선택하게 합니다.

• VS Code: 수백 가지 테마 마켓플레이스.
• Slack: 사이드바 색 커스터마이즈.
• Notion: 페이지 배경색.

이런 경우 theming이 단순한 dark/light 토글을 넘어 사용자 표현의 영역이 됩니다.

Brand expression

Theming을 브랜드 정체성 표현으로 활용합니다. Material You(2021)가 대표적입니다. 사용자 배경화면에서 색을 추출해 OS 전체에 적용합니다.

이 흐름의 의미는 디자인 시스템이 고정된 규칙에서 변형 가능한 베이스로 진화한다는 것입니다.

한계

너무 많은 theming은 시스템 복잡도를 증가시킵니다. 모든 컴포넌트가 모든 테마에서 잘 보이는지 검증해야 합니다.

대부분의 1인 랩에서는 light + dark + auto 3가지면 충분합니다.

바이브 메이커가 챙길 한 가지

처음부터 CSS Variables로 색을 정의해 두면 나중에 dark mode 추가가 5분 작업입니다. 한 화면에 직접 색을 박지 말고 항상 변수를 사용합시다.

관련

Design tokens · Dark mode · OKLCH