Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Sugerencia rápida: Cómo implementar el modo oscuro en tu sitio web utilizando Media Queries

by
Difficulty:BeginnerLength:QuickLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En este tip rápido de Envato Tuts+ veremos una función experimental en CSS que detecta si un usuario tiene el 'modo oscuro' activado en su Mac. Se realiza mediante media queries y te permitirá diseñar un sitio web en modo 'oscuro' o 'claro'. ¡Veamos!

Cómo implementar el 'modo oscuro' por medio de CSS

¿Qué es el 'modo oscuro'?

El año pasado, MacOS Mojave introdujo una manera de alternar entre apariencia 'oscura' y 'clara' (el modo oscuro puede ser mucho más cómodo para los ojos, sobre todo en condiciones de poca luz). Este cambio afecta a la IU, modificando la apariencia visual de los elementos como barras de menú, paneles, botones, etc.

Además de la interfaz de usuario de MacOS, esta configuración también está abierta a otras aplicaciones, por lo que las aplicaciones que la aprovechen también alternarán entre las versiones oscura y clara, según las preferencias del usuario.

'Modo oscuro' con CSS

Al utilizar el media query prefers-color-scheme también podemos aprovechar la configuración de modo oscuro en nuestros sitios web. La sintaxis se ve así:

Podemos utilizar dark o light como valores dentro del media querie. En el ejemplo anterior, estamos indicando que si un usuario tiene el modo oscuro habilitado, aplicaremos algunos estilos diferentes. Prueba la siguiente demostración cambiando la apariencia oscura / clara:

Precauciones

Advertencia: todo esto es totalmente experimental. Al momento de escribir este artículo la característica funciona solo en un navegador: Safari Technology Preview. Sin embargo, se está discutiendo en grupos de trabajo y ya estamos viendo vislumbres en el código fuente de Webkit.

Conclusión

¡Eso es todo en este consejo rápido! ¿qué piensas de esto? ¿Deberíamos implemetarlo en nuestros sitios web? ¿Lo utilizarías? ¿Se están usando los media queries más allá de sus funciones? ¡Haznos saber!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.