Interactividad
Utilidades para controlar el esquema de colores de un elemento.
| Clase | Estilos |
|---|---|
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; |
Utiliza utilidades como scheme-light y scheme-light-dark para controlar cómo se debe renderizar un elemento:
Prueba cambiar el esquema de colores de tu sistema para ver la diferencia
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>Antepone a la utilidad color-scheme el prefijo de una variante como dark:* para aplicar la utilidad únicamente en ese estado:
<html class="scheme-light dark:scheme-dark ..."> <!-- ... --></html>Obtén más información sobre el uso de variantes en la documentación de variantes.