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

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.

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;
  }
}

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);
  }

}

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

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.

Nota(s)

• No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.