En nuestro CSS escribimos:
:root {
color-scheme: light dark
–font-light: #111;
–font-dark: #999;
–background-light: #999;
–background-dark: #111;
};
De esta manera estaremos definiendo una clase que se adapta al modo de color que estamos utilizando en nuestro browser/sistema operativo.
**En nuestros componentes colocamos lo siguiente:
**
.componente{
color: light-dark(var(–font-light) var(–font-dark));
background-color: light-dark( var(–background-light) var(–background-dark));
}
**En este ejemplo tendremos un componente que se comportará de una manera diferente cada vez que cambiemos el modo de color en nuestro browser/sistema-operativo, haciendo a nuestra interfaz mas accesible 😃 **
Muchas gracias por ver, Ariel Hernán Contini. pampaLabs 2025