인터랙티비티
color-scheme
엘리먼트의 색상 스키마를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
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; |
예제
기본 예제
scheme-light와 scheme-light-dark 같은 유틸리티를 사용하여 엘리먼트가 어떻게 렌더링될지 제어할 수 있습니다:
시스템 색상 스키마를 전환해 보며 차이를 확인해 보세요
scheme-light
scheme-dark
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>다크 모드 적용하기
color-scheme가 모음으로 시작하면 "an", 그렇지 않으면 "a"를 붙여 color-scheme 유틸리티 앞에 dark:*와 같은 변형을 추가하면 해당 상태에서만 유틸리티를 적용할 수 있습니다:
<html class="scheme-light dark:scheme-dark ..."> <!-- ... --></html>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
