Cómo activar el modo noche en WordPress

Publicada 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.

Instala y activa el plugin Dark Mode para WordPress si quieres activar el modo noche en el escritorio de WordPress.
Instala y activa el plugin Dark Mode para WordPress si quieres activar el modo noche en el escritorio de WordPress.

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:

Cada usuario de tu WordPress escoge si quiere ver el Escritorio en modo noche o en modo normal.
Cada usuario de tu WordPress escoge si quiere ver el Escritorio en modo noche o en modo normal cuando activas el plugin Dark Mode.

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.

Con el plugin Dark Mode para WordPress podemos activar el modo noche en el Escritorio de WordPress.
Con el plugin Dark Mode para WordPress podemos activar el modo noche en el Escritorio de WordPress.

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:

El plugin Dark Mode para activar el modo noche en tu Escritorio de WordPress todavía no se lleva bien con Gutenberg.
El plugin Dark Mode para activar el modo noche en tu Escritorio de WordPress todavía no se lleva bien con 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.

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.

El plugin WP Night Mode te permite añadir el modo noche en tu WordPress para que tus visitantes puedan seleccionar si quieren activarlo o no.
El plugin WP Night Mode te permite añadir el modo noche en tu WordPress para que tus visitantes puedan seleccionar si quieren activarlo o no.

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.

Hay que añadir un enlace personalizado en nuestro menú para que el plugin WP Night Mode añada el interruptor para cambiar entre modo normal y modo noche.
Hay que añadir un enlace personalizado en nuestro menú para que el plugin WP Night Mode añada el interruptor para cambiar entre modo normal y 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:

Activa la opción de pantalla de añadir classes CSS en los menús para añadir la clase del plugin WP Night Mode.
Activa la opción de pantalla de añadir classes CSS en los menús para añadir la clase del plugin WP Night Mode.

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.

Añade la clase wp-night-mode en el ítem de menú que hemos creado para que coja el estilo de un interruptor de cambio entre modo noche y modo normal.
Añade la clase wp-night-mode en el ítem de menú que hemos creado para que coja el estilo de un interruptor de cambio entre modo noche y modo normal.

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:

En el personalizador podemos definir los colores de fondo y del texto y enlaces del modo noche.
En el personalizador podemos definir los colores de fondo y del texto y enlaces del modo noche si utilizamos el plugin WP Night Mode para WordPress.

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:

Captura de pantalla de la web con el modo noche desactivado.
Captura de pantalla de la web con el modo noche activado.
El modo noche cambia la apariencia de nuestra web para nuestros visitantes. Son ellos los que pueden seleccionar si quieren ver el modo noche o el modo normal. Haz clic en el divisor de la imagen y desliza el ratón para ver cómo cambia la pantalla en modo noche y en modo normal.

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.

FlojaNo está malBienMuy bien¡Impecable! (Ninguna valoración todavía)
Cargando…

Deja un comentario

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.