Интерактивность
Утилиты для управления цветовой схемой элемента.
| 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>Префикс a color-scheme утилиты с вариантом, например dark:*, чтобы применить утилиту только в этом состоянии:
<html class="scheme-light dark:scheme-dark ..."> <!-- ... --></html>Подробнее об использовании вариантов читайте в документации по вариантам.