Cómo activar el modo nocturno en WordPress

Desde hace un tiempo, los sistemas operativos y aplicaciones incluyen versiones de sus interfaces gráficas en las que se reemplazan los fondos blancos por fondos negros para reducir la emisión de luz durante las horas nocturnas y así dañar menos tus ojos. Esto se conoce como modo noche .

Ya sea por moda o porque realmente funciona, el modo noche es cada vez más popular. Hay quienes aseguran que los modos nocturnos tienen beneficios para el medio ambiente ya que las pantallas negras consumen menos energía que las blancas. Pero también hay detractores de este tipo de modos oscuros.

Sea como fuere, esta puede ser una funcionalidad que te interese tener también en tu web, y para ello hoy te vamos a hablar del modo noche en WordPress.

WordPress aún no incluye un modo nocturno en su forma predeterminada, pero hay opciones para agregar el modo nocturno tanto en el Panel de control de WordPress como en la interfaz. Como es habitual, los plugins son la solución para ampliar WordPress con esta curiosa funcionalidad visual.

Cómo activar el modo nocturno en el panel de WordPress

Comenzamos con el complemento Modo oscuro para WordPress, que le permite activar el modo nocturno en el panel de WordPress. Es fácil de usar y gratis.

Lo primero es instalar y activar el complemento. Podemos encontrarlo directamente en el directorio de complementos de WordPress, directamente dentro del panel de control de WordPress a través del menú Complementos , como puede 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 de activarlo en su Dashboard:

Lo bueno de este plugin es que es cada usuario quien elige cómo quiere ver el Dashboard de WordPress, en modo oscuro o en modo normal. De esta forma, si hay alguien que quiera seguir usando el Dashboard de WordPress como siempre, con fondos blancos, entonces no hay problema en hacerlo.

En la captura de pantalla anterior puedes ver el resultado de habilitar el modo oscuro. ¡Y se ve genial! Me gustó mucho 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.

Desafortunadamente, hay una asignatura pendiente para el complemento de modo oscuro de WordPress: proporcionar compatibilidad con el editor de bloques de Gutenberg. En la siguiente captura de pantalla, puede ver que aún no puede aplicar el fondo oscuro a Gutenberg:

Supongo que si el plugin tiene el éxito suficiente y los usuarios lo piden, sus desarrolladores acabarán adaptándolo para que el editor de bloques también aparezca en modo noche. En cualquier caso, el ritmo frenético de desarrollo de Gutenberg y sus “frecuentes” actualizaciones en sus estilos hacen que la adaptación sea algo compleja.

Cómo activar el modo nocturno para sus visitantes de WordPress

El complemento Modo oscuro solo agrega el modo nocturno en el Panel de WordPress. El resto de su sitio web, es decir, la interfaz que ven los visitantes, seguirá teniendo el mismo aspecto, sin sufrir ningún cambio.

Si desea que sus visitantes tengan la opción de activar el modo nocturno en su sitio web, utilizando fondos oscuros en lugar de fondos claros, debe instalar el complemento WP Night Mode.

Este complemento, al igual que el Modo oscuro, es completamente gratuito y también lo tienes disponible en el Directorio de complementos de WordPress.

Una vez instalado, no verá nada en Configuración ni en ningún menú adicional. Lo que tienes que hacer es ir al menú Apariencia y allí editar tus menús. En su menú principal, debe agregar un enlace personalizado sin ninguna URL en particular. Este nuevo elemento del menú nos ayudará a agregar el interruptor para activar y desactivar el modo noche.

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

Una vez que haya hecho esto, cuando vaya a editar el elemento de menú que hemos agregado antes, verá un campo adicional donde puede agregar clases de CSS. Aquí tienes que incluir la clase CSS wp-night-mode . Esta clase es la que WP Night Mode necesita para identificar qué elemento debe usarse como interruptor de modo nocturno.

De forma predeterminada, WP Night Mode es un complemento que no agrega colores oscuros a su interfaz. Tienes que ser tú quien elija los colores oscuros que quieres mostrar tanto para el fondo, como para el texto y los enlaces. Para definir estos colores hay que ir al menú Apariencia y allí abrir el menú Personalizar .

Se abrirá el personalizador de WordPress y allí encontrarás la opción Modo Nocturno . Si lo seleccionas, verás que tienes las opciones para activar el modo noche por defecto y crear varios estilos. En cada estilo se define el color de fondo, el color del texto y el color de los enlaces.

Lo bueno del personalizador es que puedes ver una vista previa real de cómo se verá tu sitio web con los colores elegidos:

Desafortunadamente, el resultado no es perfecto: algunos elementos todavía tienen fondos claros que se ven extraños en el modo nocturno. Pero no te preocupes, podemos arreglar esto. Desde el propio personalizador, puede agregar reglas CSS adicionales para solucionar estos pequeños problemas.

Vuelva al personalizador y verá la opción CSS adicional . Si lo selecciona, tiene la posibilidad de escribir reglas CSS allí mismo. Estas reglas pueden ser del siguiente tipo:

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

Tenga en cuenta que lo que realmente hace el complemento es aplicar la clase CSS wp-night-mode-on en la etiqueta del body de su sitio web. Por lo tanto, si desea arreglar el fondo de un elemento HTML y oscurecerlo, todo lo que tiene que hacer es encontrar un selector para ese elemento y aplicar la corrección cuando la etiqueta del body tenga la clase wp-night-mode-on .

En la siguiente comparativa podéis ver una comparación básica entre el modo normal y el modo noche con los colores que hemos aplicado:

Agregar el modo nocturno a tu WordPress es muy fácil gracias a un par de complementos. Hoy hemos revisado complementos que nos ayudan a activar el modo nocturno en el Panel de WordPress y en la interfaz.

¿Eres un usuario habitual de los modos noche en tus aplicaciones? ¡Recuerda comentar abajo con tu opinión!

Imagen destacada de Priscilla Du Preez en Unsplash.