Modo Oscuro en tus páginas web

Hoy vamos a hacer que tus páginas web luzcan genial con el Modo Oscuro de los sistemas operativos de Apple.

Apple presentó el Modo Oscuro por primera vez en la WWDC de 2018. Al introducir esta funcionalidad en la version 10.14 de su sistema operativo, más conocida como Mojave. Este modo oscuro cambia las tonalidades de todo el sistema para adaptarlo a ambientes con poca luz. Pero no solo afecta a las interfaces si no que también puede aplicarse a las páginas webs que visualizamos con este modo. Sin embargo, para asegurar una adaptación correcta, Apple no lo hace de forma automática. Anima a los desarrolladores a que adaptemos nuestras interfaces al Modo Oscuro, incluidas las páginas web, siguiendo los patrones de diseño especificados en las Guías de Interfaces Humanas.

También propuso lo mismo a los diseñadores web permitiendo a Safari detectar una media query para aplicar los cambios de diseños dependiendo del modo seleccionado por los usuarios. Y es tan fácil como añadir el siguiente bloque a CSS de nuestra página web.

 @media (prefers-color-scheme: dark) {
/* Tus parámetros aquí */
}

Ahora tan solo tenemos que meter dentro de ese bloque los parámetros CSS que queremos que se apliquen cuando el modo oscuro de los sistemas operativos esté activo. Por ejemplo, el color de fondo o de las fuentes.

@media (prefers-color-scheme: dark) {
  body {
    background: #26272A;
    color: #F3FCFB;
  }
}

Como puedes ver, con un solo paso podemos hacer que nuestras páginas web luzcan genial con el Modo Oscuro. Además, esta implementación también va a funcionar con el Modo Oscuro de iOS que será desplegado con la versión 13 del sistema operativo en septiembre. Aquí te dejo un ejemplo de cómo queda una web completa. Puedes verla aquí

Modo Oscuro Página Web

Si tienes alguna duda sobre como implementar esta funcionalidad o si quieres enseñarme como ha quedado tu web, no dudes en ponerte en contacto conmigo a través de los métodos de contacto que pongo a tu disposición.