테마 전환을 위한 CSS 변수

:root에 정의된 CSS 사용자 지정 속성(변수)은 스타일시트 전체에서 전역으로 사용할 수 있습니다. 배경, 텍스트 색상, 표면, 테두리로 구성된 완전한 색상 팔레트를 한 번 정의한 후 어디에서나 참조하세요. 이렇게 단일 진실 공급원을 사용하면 테마 전환이 간단해집니다.

document.documentElement에 data-theme="dark" 속성이 설정되면 [data-theme='dark']와 같은 CSS 선택자가 루트 변수를 어두운 값으로 재정의합니다. 컴포넌트는 var(--color-bg)를 참조하므로 코드를 변경하지 않아도 새 값을 자동으로 사용합니다.

최소한 다음을 정의하세요. --color-bg(페이지 배경), --color-text(기본 텍스트), --color-primary(브랜드 색상), --color-surface(카드/패널 배경), --color-border(구분선)입니다. 일관된 토큰 집합을 사용하면 컴포넌트에 임의의 색상 값이 나타나는 것을 방지할 수 있습니다.

컴포넌트 CSS에서 background: var(--color-bg) 및 color: var(--color-text)와 같이 변수를 참조하세요. 대체 값도 제공할 수 있습니다: var(--color-bg, #ffffff). 브라우저는 그리는 시점에 변수를 확인하므로 하나의 클래스만으로 라이트 테마와 다크 테마 모두에서 작동합니다.

:root 선택자에 transition: background-color 200ms, color 200ms를 추가하세요. data-theme 속성이 변경되면 CSS 변수를 사용하는 모든 요소가 동시에 새 값으로 애니메이션됩니다. JS 애니메이션 코드 없이도 세련된 느낌을 만들 수 있습니다.

JavaScript에서 인라인 스타일을 설정하는 것보다 CSS 변수로 테마를 관리하는 편이 우수합니다. 브라우저가 모든 스타일 재계산을 기본적으로 처리하고, 테마가 적용된 각 자식 컴포넌트마다 추가 React 재렌더링이 발생하지 않으며, CSS 계단식 규칙이 상속을 자동으로 처리합니다. JS는 루트 요소의 속성 하나만 전환하면 됩니다.

@media (prefers-color-scheme: dark) 쿼리와 CSS 변수를 결합하여 CSS만 사용하는 대체 처리를 구현할 수 있습니다. data-theme 선택자에 더해 또는 그 대신 미디어 쿼리 안에 어두운 테마 재정의를 정의하세요. 그러면 JavaScript가 아직 실행되지 않았더라도 다크 모드가 작동합니다.

가장 견고한 방법은 두 메커니즘을 함께 사용하는 것입니다. @media 쿼리는 OS 기본값을 제공하고, data-theme 속성은 JavaScript를 통한 사용자 재정의를 허용합니다. 속성이 있으면 명시도 때문에 해당 속성이 우선하고, 없으면 미디어 쿼리가 적용됩니다.

어두운 배경에서 보기 좋지 않은 이미지에는 HTML picture 요소와 source media="(prefers-color-scheme: dark)" 자식 요소를 사용하세요. 브라우저가 어두운 테마용 변형을 자동으로 선택합니다. CSS의 SVG 아이콘에는 빠른 근사치로 filter: invert(1)을 사용할 수 있습니다.

CSS 변수는 :root 대신 개별 컴포넌트의 루트 요소에 정의하여 특정 컴포넌트의 범위로 제한할 수도 있습니다. 이를 통해 컴포넌트별 테마를 적용할 수 있습니다. 예를 들어 사이드바가 페이지 배경과 다른 자체 배경 토큰을 사용하면서도 전역 테마 전환에 맞춰 올바르게 전환되도록 할 수 있습니다.

Chrome DevTools는 Styles 패널에 확인된 CSS 변수 값을 표시합니다. 변수 참조를 클릭하면 해당 정의로 이동합니다. 따라서 어떤 요소에 올바른 어두운 토큰이나 밝은 토큰이 적용되었는지 쉽게 확인할 수 있습니다. 패널에서 변수 값을 실시간으로 편집할 수도 있습니다.

문서 전체에 적용되는 전역 CSS 사용자 지정 속성을 정의할 때 사용하는 CSS 선택자는 무엇인가요?

:root의 CSS 사용자 지정 속성은 테마를 위한 중앙 집중식 토큰 시스템을 제공합니다. HTML 요소의 data-theme 속성을 전환하여 테마를 즉시 바꾸세요. 부드러운 애니메이션을 위해 CSS 전환을 추가하고, prefers-color-scheme 미디어 쿼리를 CSS만 사용하는 대체 처리로 사용하며, 컴포넌트별 JS 스타일 재정의는 피하세요.