CSS 변수로 다중 브랜드 테마 구현

다중 브랜드 테마 설정은 하나의 컴포넌트 별칭 토큰 집합을 브랜드별로 서로 다른 전역 토큰 값에 매핑합니다. 컴포넌트는 별칭 토큰을 참조하고, 브랜드 테마 파일은 별칭을 브랜드별 전역 토큰으로 다시 매핑합니다.

전역 토큰을 :root에 정의하세요. 모든 원시 색상 값, 간격 값, 타이포그래피 값을 포함합니다. 이것이 기본 브랜드입니다. 컴포넌트는 전역 토큰을 직접 참조하지 않고 항상 별칭을 통해 참조합니다.

별칭 토큰은 var()를 사용하여 전역 토큰을 참조합니다: --color-action: var(--color-brand-primary). 컴포넌트는 --color-action을 사용합니다. --color-brand-primary의 의미를 바꾸면 전체 시스템이 변경됩니다.

html 또는 컨테이너 요소에 클래스를 지정하여 브랜드 테마를 적용합니다. 각 테마 클래스는 해당 브랜드 범위의 전역 토큰을 재정의합니다. 컨테이너 내부의 컴포넌트는 브랜드 값을 자동으로 상속합니다.

다크 모드는 색상 토큰을 재정의하는 클래스나 미디어 쿼리로 구현하는 테마 변형입니다. OS 기본값에는 prefers-color-scheme을 사용하고, 사용자 재정의에는 .dark 클래스를 사용합니다. 두 방식 모두 동일한 별칭 토큰을 변경합니다.

CSS 사용자 지정 속성은 계단식으로 적용되고 상속됩니다. 컨테이너 요소에 적용한 테마는 모든 하위 요소에 영향을 줍니다. 중첩된 테마는 컨테이너 수준에서 바깥쪽 테마를 재정의하므로, 페이지 안 위젯의 테마 설정에 유용합니다.

별칭 토큰이 항상 정의되도록 하세요. 테마 클래스가 없을 때 별칭은 기본값으로 자연스럽게 대체되어야 합니다. CSS var() 대체 구문인 var(--color-action, #3b82f6)을 사용하여 보이지 않는 텍스트나 누락된 배경을 방지하세요.

스타일 딕셔너리는 토큰 JSON에서 별도의 테마 CSS 파일을 출력할 수 있습니다. 빌드 단계에서 theme-brand-a.css와 theme-brand-b.css를 생성합니다. 실행 중에 적절한 파일을 불러오거나 브랜드별 별도 번들로 컴파일할 수 있습니다.

각 테마에서 각 컴포넌트를 렌더링하는 시각적 회귀 테스트를 작성하세요. 퍼시는 테마 변형별 스크린샷을 캡처합니다. 자동화된 시각적 테스트는 전역 토큰 값이 예기치 않게 변경될 때 회귀를 찾아냅니다.

JavaScript로 테마 클래스를 전환하세요: document.documentElement.classList.replace("theme-a", "theme-b"). 컴포넌트를 다시 렌더링하지 않아도 CSS 변수가 즉시 업데이트되므로, 리액트의 다시 렌더링이나 정적 값의 스타일 재계산이 필요하지 않습니다.

CSS 변수는 페인트 시점에 해석되므로 루트 변수를 변경하면 이를 사용하는 모든 요소가 다시 페인트됩니다. 전역 변수 변경은 애니메이션 반복문이 아니라 사용자 상호작용(테마 전환)으로 제한하세요. 애니메이션 테마 효과에는 개별 속성 전환을 사용하세요.

CSS 사용자 지정 속성 테마는 컴포넌트 CSS를 변경하지 않고 어떻게 브랜드를 전환할 수 있게 하나요?

다중 브랜드 테마 설정은 전역 원시 토큰 값과 의미 기반 별칭 토큰을 분리합니다. 테마 클래스는 컨테이너 범위에서 전역 토큰을 재정의합니다. 별칭을 참조하는 컴포넌트는 활성화된 브랜드 테마를 자동으로 반영하므로, 컴포넌트 코드를 변경하지 않고 실행 중에 테마를 전환할 수 있습니다.