color-scheme

color-scheme (컬러 스킴)

요소가 시스템의 밝은/어두운 테마 중 어떤 방식으로 렌더링될지를 정하는 유틸리티예요. 브라우저 기본 UI 요소의 색감까지 자연스럽게 맞춰 주니 옆에서 하나씩 짚어 드릴게요.

출처: 문서

본문

ClassStyles

클래스	스타일
`scheme-normal`	`color-scheme: normal;`
`scheme-dark`	`color-scheme: dark;`
`scheme-light`	`color-scheme: light;`
`scheme-light-dark`	`color-scheme: light dark;`
`scheme-only-dark`	`color-scheme: only dark;`
`scheme-only-light`	`color-scheme: only light;`

Examples

Basic example

scheme-light 이나 scheme-light-dark 같은 유틸리티를 사용해서 요소가 어떻게 렌더링될지를 제어할 수 있어요.

시스템 컬러 스킴을 바꿔 보면 차이를 확인할 수 있어요.

<div class="scheme-light ...">
  <input type="date" />
</div>
<div class="scheme-dark ...">
  <input type="date" />
</div>
<div class="scheme-light-dark ...">
  <input type="date" />
</div>

Applying in dark mode

color-scheme 유틸리티 앞에 dark:* 같은 변형을 붙이면, 그 상태에서만 해당 유틸리티를 적용할 수 있어요.

<html class="scheme-light dark:scheme-dark ...">
  <!-- ... -->
</html>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.