Nueva Función light-dark() de CSS y ¿Qué Hace?

2 minuto(s)

En esta página:

El lenguaje de diseño CSS constantemente está recibiendo actualizaciones por parte de la W3C.

Estuve leyendo el borrador del Módulo de color CSS Nivel de la W3C y mencionan que están trabajando en una nueva función llamada light-dark() que mejorará la experiencia de los usuarios.

En este post te hablaremos sobre la Nueva Función light-dark() de CSS y ¿qué hace?, vamos con ello.

Página web que usa CSS — Muchos desarrolladores de sitios web usan CSS para mejorar los diseños

La función light-dark() es una función CSS que a futuro que permitirá a los desarrolladores Front-end implementar un cambio de color sencillo entre modo claro y oscuro.

Al menos hasta la fecha de este post, para cambiar de modo claro a oscuro se utiliza la consulta de medios o media query prefers-color-scheme, por ejemplo:


.theme-cafe {
  background: #dca;
  color: #731;
}
@media (prefers-color-scheme: dark) {
  .theme-cafe.adaptive {
    background: #753;
    color: #dcb;
    outline: 5px dashed #000;
  }
}

.theme-cafe {

background: #dca;

color: #731;

}

@media (prefers-color-scheme: dark) {

.theme-cafe.adaptive {

background: #753;

color: #dcb;

outline: 5px dashed #000;

}

Y con la función light-dark()se podrá hacer de la siguiente manera:


#elemento{

  color-scheme: light dark;
	
  .oscuro {
    color-scheme: dark;
  }

  .claro {
    color-scheme: light;
  }

  & div {
    background: light-dark(#d4d4d4, #000000);
    color: light-dark(#2b2929, #d9d7d7);
  }

}

#elemento{

color-scheme: light dark;

.oscuro {

color-scheme: dark;

}

.claro {

color-scheme: light;

}

& div {

background: light-dark(#d4d4d4, #000000);

color: light-dark(#2b2929, #d9d7d7);

}

Para que light-dark() funcione, también debes incluir una propiedad color-scheme.

Talvez sea muy pronto para decir cómo trabajará esta función, en el futuro cuando sea lanzada oficialmente, podremos saber su forma real de trabajar. Hasta la fecha de este post, es lo que podemos saber en su borrador oficial de la W3C.

Conclusión

En este artículo hemos hablado sobre la Nueva Función light-dark () de CSS y qué hace? Es importante mantenerse actualizado y conocer las nuevas funciones que tendrá CSS en el futuro. Siempre cae bien tener nuevas alternativas para realizar la funcionalidad de modos oscuro y claro en una página web.