Modo Claro vs Modo Oscuro. Cómo CSS puede elegir por ti.

Si alguna vez has sentido que tu sitio web y el modo oscuro de los navegadores están enfrascados en una guerra fría, no estás solo. Los desarrolladores han pasado años enfrentándose a usuarios que aman tanto el modo claro como el oscuro.

Afortunadamente, CSS tiene un as bajo la manga llamado color-scheme. Este pequeño y elegante atributo le dice al navegador: "Hey, yo entiendo tus gustos, sé cuándo prefieres un fondo oscuro o cuándo quieres más luz".

Pero, ¿qué es exactamente color-scheme y por qué debería importarte?

A priori, puede parecer solo un truco para hacer felices a los usuarios del modo oscuro, pero además es una herramienta que permite a los navegadores renderizar tus páginas con el estilo más apropiado sin depender de complejos media queries y condiciones específicas para cambiar los colores de fondo, texto y otros elementos. ¡Una pesadilla de mantenimiento!

En este post, vamos a explorar cómo funciona color-scheme, qué hace que sea tan genial (spoiler: simplifica tu vida como desarrollador) y cómo puedes implementarlo para que tu sitio web esté a la altura de los estándares de diseño modernos.

Ah, y prometemos que no hablaremos en hexadecimal más de lo necesario.

El atributo color-scheme le dice al navegador si tu sitio web está optimizado para un esquema de colores claro, oscuro, o ambos. Esto no solo facilita la vida del desarrollador, sino que también garantiza que tu sitio se vea perfecto en cualquier entorno sin tener que escribir líneas interminables de código.

 Pero, ¿qué pasa con light-dark()?

Aquí es donde entra el "modo ninja" de CSS: la función light-dark(). Este pequeño pero potente truco, cuando se combina con color-scheme, permite establecer estilos dinámicos para tu diseño dependiendo de si el usuario prefiere el modo claro o oscuro.

En lugar de depender únicamente de las consultas @media para detectar el modo de color, puedes aplicar esta función directamente en las propiedades CSS para cambiar de forma rápida y elegante los estilos de tu página.

En este fragmento de código, light-dark() ajusta los colores de fondo y del texto según el esquema que prefiera el usuario. Blanco para el modo claro y #121212 (un tono de gris oscuro) para el modo oscuro. De esta manera, el contraste se mantiene nítido sin necesidad de escribir múltiples reglas para cada preferencia de color.

CSS también puede ser elegante

El uso de color-scheme junto con light-dark() es una forma inteligente y eficiente de hacer que tu sitio web sea adaptable a las preferencias de los usuarios sin perder el control sobre el diseño. Ya no tienes que escribir docenas de líneas de código para manejar el modo claro y oscuro. CSS se encargará de la parte difícil, y tú solo tendrás que añadir un toque de estilo.

Así que, la próxima vez que alguien te pregunte si tu página soporta el modo oscuro, puedes responder con una sonrisa: "¡Claro, lo hice en menos de cinco minutos gracias a CSS!" 🚀