Introducción
El tema claro y oscuro es una característica popular en los sitios web modernos que permite a los usuarios elegir entre un diseño claro y uno oscuro. Esto es especialmente útil para mejorar la accesibilidad y la legibilidad del contenido, ya que algunos usuarios prefieren un tema claro durante el día y un tema oscuro por la noche.
Media Query prefers-color-scheme
La característica prefers-color-scheme de CSS se utiliza para detectar si un usuario ha solicitado temas de color claro u oscuro. Un usuario indica su preferencia a través de una configuración del sistema operativo (por ejemplo, modo claro u oscuro) o una configuración del agente de usuario.
body {
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
Fuente: MDN Web Docs
Función light-dark()
En 2024 se añade la función light-dark() de CSS permite establecer dos colores para una propiedad, devolviendo uno de los dos colores según si el desarrollador ha establecido un esquema de color claro u oscuro o si el usuario ha solicitado un tema de color claro u oscuro, sin necesidad de encerrar los colores del tema dentro de una consulta de la función de medios prefers-color-scheme.
:root {
color-scheme: light dark;
}
body {
background-color: light-dark(white, black);
color: light-dark(black, white);
}
Fuente: MDN Web Docs
Con estas funciones, puedes ofrecer a los usuarios la posibilidad de elegir entre un tema claro y uno oscuro en tu sitio web, lo que mejora la experiencia de usuario y la accesibilidad.