"El buen diseño es obvio. El gran diseño es transparente"
- Joe Sparano

El modo nocturno en Safari

4 minutos de lectura
Fecha: 31/10/2018

Una de las novedades del nuevo MacOs Mojave es el modo nocturno, con el cual los usuarios pueden cambiar casi totalmente la interfaz de trabajo a colores oscuros para de que de esta manera la pantalla emita menos luz y moleste menos a la vista cuando estamos a oscuras o hay poca iluminación.

No es que Apple haya inventado el modo nocturno ni nada por el estilo, esto es más viejo que el propio sistema operativo, pero si que tiene sentido que cuando haya poca luz y por tanto nuestras pupilas esten mas dilatadas para capturarla usemos una paleta de colores mas oscuro para que no nos moleste tanto.

Descripción de la imagen

Donde si que hay que reconocer que han innovado es llevando el modo nocturno al estandar en su navegador (Safari), proponiendo un sistema mediante el cual los programadores puedan modificar la web para que siga este modo y el navegador lo pueda activar.

Esta nueva característica esta recogida en las novedades de la versión 68 de Safari que puedes consultar aquí.

Si no te quieres leer todo te indico que bajo el apartado de novedades CSS han escrito esto:

Added prefers-color-scheme media query support for styling dark mode content (r237156)

¿Como se implementaba antes el modo nocturno?

Como mencionaba antes el modo nocturno es algo que ya se venía haciendo desde hace mucho tiempo, muchos sistemas disponían de modos nocturnos, o modos orientados a la lectura, y muchas páginas web tambien implementaban esta solución como un extra.

Pero implementarlo no era tan sencillo como ahora propone Safari, si querías que tu web tuviera un modo nocturno tenias que tocar HTML, CSS y Javscript, y tenia más implicaciones que ahora:

  1. Por ejemplo tenias que usar HTML para crearte un botón en algun sitio de la página para activar y desactivar este modo.
  2. También tenias que usar CSS y no solo para darle estilo al botón ese en concreto, sino para darselos a toda la página, lo más habitual era que al pulsar el botón y activar ese modo pusieramos una clase en las etiquetas de un nivel más alto de nuestra web (como la etiqueta <html> o la etiqueta <body>) y despues sobreescribieramos todas las reglas necesarias para que cambiara la paleta de colores usando como esa clase como punto de partida.
  3. Por último era necesario el Javascript para poder «escuchar» el evento click del botón y añadir o borrar la susodicha clase de nuestra etiqueta.

No es que fuera algo terrible de implementar pero daba su trabajo y era un poco arcaico, pero como al modo nocturno no se le daba la importancia que ahora Apple le ha dado en su sistema, era la manera de hacerlo.

¿Como se implementa el modo nocturno en Safari?

Al ser un tema tan presente a nivel de sistema Safari lo ha extendido a las páginas web que consume mediante una media querie, las media queries son un módulo de CSS3 muy usado sobretodo para dar responsividad a nuestras páginas ya con ellas podemos adaptarlas a distintos resoluciones, orientaciones, etc… (Aquí os dejo un artículo que entra mas en detalle)

Pues la nueva media querie que tenemos en Safari sirve para que se puedan adaptar al modo nocturno de forma nativa.

Por ahora el único navegador capaz de interpretarla es Safari, pero entre que Safari usa Webkit al igual que Chrome, y que suelen marcar tendencia, me inclino a pensar que no tardaremos mucho tiempo en verlo soportado en el resto de navegadores.

Sobre la implementación como ya hemos dicho es una media querie, y se usa igual que cualquier otra, no hay ni que poner botones, ni añadir clases a ninguna etiqueta, ni escuchar eventos.

Pongamos por caso que tenemos una web básica donde el color de fondo es blanco y el texto es negro, los estilos CSS serían algo así…

body {
  background-color: #fff;
  color: #222;
}

Es un ejemplo un poco tonto, pero nos vale para explicarlo, ahora supongamos que queremos poner el modo nocturno, para ello vamos a pasar el fondo a negro y el texto a blanco usando la media querie que ponen a nuestra disposición.

body {
  background-color: #fff;
  color: #222;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #eee;
    background-color: #1a1a1a;
  }
}

Notad que podía haber usado los colores blanco (#fff) y negro (#000) puros, pero lo he puesto así para que veais que no se trata de inverir colores y que tampoco estamos atados a escogerlos. De hecho si nos da la gana podríamos poner un modo nocturno con la letra en verde y el fondo en amarillo (una autentica barbaridad, pero podríamos). Ya que la media querie solo consulta al sistema que se cumpla la condición y luego aplica los estilos, por disparatados que puedan ser.

Digo todo esto para que no pensemos que el modo nocturno se aplica por arte de magia y no hay nada que hacer, será en ultima instancia el frontend el responsable de que se aplique de forma correcta.

Para usarlo no necesitamos ningún polyfill, si el navegador lo acepta bien y sino no hay nada que hacerle.

Al igual que las otras media queries tambien se puede acceder a ellas mediante javascript, en este caso usando esta sentencia:

window.matchMedia('(prefers-color-scheme: dark)')

Por último mencionar que los valores que acepta la media querie son dark, light y no-preference.

Secciones