Cómo activar el modo noche en WordPress

Hace ya un tiempo que tanto los sistemas operativos como las aplicaciones incluyen versiones de sus interfaces gráficas en las que los fondos blancos se sustituyen por fondos negros para reducir la emisión de luz durante las horas nocturnas y así dañar menos a la vista. A esto se le conoce como modo noche.

Ya sea por moda o por que realmente funciona, cada vez los modo noche son más populares y fáciles de encontrar. Los hay que aseguran que los modos noche tienen beneficios para el medio ambiente dado que las pantallas con fondo negro gastan menos energía que con fondo blanco. Pero también hay detractores de este tipo de modos oscuros.

Sea como sea, es posible que esta sea una funcionalidad que te interese tener también en tu web, y por esto hoy vamos a hablar del modo noche en WordPress. Luego ya tu decides si es algo útil o no 🙂

WordPress todavía no incluye un modo noche en el core por defecto, pero hay opciones para añadir el modo noche tanto en el escritorio de WordPress como en la parte pública de la web. Como siempre, los plugins son la solución para extender WordPress con esta funcionalidad visual tan curiosa.

Cómo activar el modo noche en el Escritorio de WordPress

Empezamos con el plugin Dark Mode para WordPress, que permite activar el modo noche en el Escritorio de WordPress. Su funcionamiento es tremendamente sencillo y es un plugin gratuito.

Lo primero es instalar y activar el plugin. Lo podemos encontrar directamente en el directorio de plugins de WordPress, directamente desde el Escritorio de WordPress a través del menú Plugins, tal y como puedes ver en la captura de pantalla anterior.

Una vez instalado el plugin Dark Mode, cada usuario de tu WordPress tendrá en su perfil la opción para activar el modo oscuro en el Escritorio:

Lo bueno de este plugin es que es cada usuario el que elige cómo quiere ver el Escritorio de WordPress, en modo oscuro o en modo normal. De esta manera, si hay alguien que quiere seguir utilizando el Escritorio de WordPress como siempre, con los fondos blancos, pues no hay problema con que así lo haga.

En la captura anterior puedes ver el resultado después de indicar en el perfil de usuario que quieres que el modo oscuro esté activado. La verdad es que viendo como queda, no está nada mal. Me ha gustado bastante el resultado de tener el color de fondo negro también en la parte central de la página y no solo en el menú lateral, que como todos sabéis, ya viene por defecto en negro.

Sin embargo, hay un tema pendiente para el plugin Dark Mode de WordPress: la compatibilidad con el editor de bloques Gutenberg. En la siguiente captura de pantalla puedes ver que todavía no es capaz de aplicarle el fondo oscuro a Gutenberg:

Supongo que si el plugin tiene el éxito suficiente y los usuarios lo piden, los desarrolladores acabarán adaptándolo para que el editor de bloques también aparezca en modo noche. De todos modos, el ritmo frenético de desarrollo de Gutenberg y los «frecuentes» cambios en los estilos hacen que estar adaptado a la última no siempre sea fácil.

Nelio A/B Testing

Pruebas A/B nativas en WordPress

Usa tu editor de páginas favorito en WordPress para crear variaciones y lanza pruebas A/B con solo un par de clics. No se necesita saber nada de programación para que funcione.

Más info

Cómo activar el modo noche para los visitantes de tu WordPress

El plugin Dark Mode sólo añade el modo noche en el Escritorio de WordPress. El resto de tu web, la parte pública que ven los visitantes, se seguirá viendo igual, sin sufrir ningún cambio.

Si lo que quieres es que tus visitantes tengan la opción de activar el modo noche en tu web, utilizando fondos oscuros en vez de fondos en blanco, tienes que instalar el plugin WP Night Mode.

Este plugin, al igual que Dark Mode, es totalmente gratuito y también lo tienes disponible en el directorio de plugins de WordPress.

Una vez instalado, no verás nada ni en Ajustes ni ningún menú adicional. Lo que tienes que hacer es ir al menú Apariencia y allí a los menús. En tu menú principal tienes que añadir un enlace personalizado sin ninguna URL en particular. Este nuevo ítem del menú nos servirá que se convierta en el interruptor para activar y desactivar el modo noche.

En la propia interfaz de gestión de menús tienes que desplegar las opciones de pantalla que encontrarás en la parte superior derecha para activar la opción de añadir clases CSS tal y como ves en la siguiente captura:

Una vez has hecho esto, cuando vas a editar la opción de menú que hemos añadido antes verás un campo adicional donde puedes añadir clases CSS. Aquí tienes que incluir la clase CSS wp-night-mode. Esta clase es la que el plugin WP Night Mode controla y le añade los estilos para mostrar el interruptor.

Por defecto, WP Night Mode es un plugin que no añade colores oscuros en tu interfaz. Tienes que ser tú el que elija los colores oscuros que quieres mostrar tanto para el fondo, el texto y los enlaces. Para definir estos colores tienes que ir al menú Apariencia y allí abrir el menú Personalizar.

Se abrirá el personalizador de WordPress y allí encontrarás la opción Night Mode. Si la seleccionas verás que tienes la opción de activar el modo noche por defecto y crear varios estilos. En cada estilo tienes que definir el color de fondo, el color del texto, y el color de los enlaces.

Lo bueno del personalizador es que puedes ver una previsualización real de cómo se va a ver tu web con los colores escogidos:

Como ves en la captura anterior, el resultado no es perfecto. Esto es así porque el tema Twenty Twenty con el que he hecho las pruebas sobreescribe el color de fondo blanco para ciertos elementos. Pero si te pasa lo mismo en tu web no te preocupes. Desde el propio personalizador puedes añadir reglas CSS adicionales para arreglar estos pequeños fallos.

Ve atrás en el personalizador y verás la opción CSS adicional. Si la seleccionas tienes la posibilidad de escribir reglas CSS ahí mismo. Estas reglas pueden ser del siguiente tipo:

body.wp-night-mode-on .clase-del-elemento-a-arreglar {
   color: #000;
}

Ten en cuenta que lo que realmente hace el plugin es aplicar la clase CSS wp-night-mode-on en el body HTML de la web. Por tanto, si quieres arreglar el fondo de un elemento HTML y ponerlo en color negro, tienes que ver qué clase CSS tiene ese elemento y aplicarla como en la regla anterior (donde suponemos que el elemento tiene la clase clase-del-elemento-a-arreglar).

En la comparativa siguiente puedes ver un ejemplo básico de cómo queda el interruptor para cambiar entre modo noche y modo normal en el menú de la página y los cambios en los colores que hemos aplicado:

Ya has visto que añadir el modo noche en tu WordPress es muy fácil gracias al uso de plugins. Hemos repasado un par de plugins que nos ayudan a activar el modo noche en el Escritorio de WordPress y en la parte pública de la web.

Además, después de escribir esta entrada justo he encontrado esta otra de Fernando Tellado donde comenta los avances que el equipo de diseño de WordPress.org está haciendo al respecto. No te la pierdas 🙂

¿Eres usuario habitual de los modos noche en tus aplicaciones? Recuerda dejarnos un comentario con tu opinión en la zona de comentarios de aquí abajo.

Imagen destacada de Priscilla Du Preez en Unsplash.