Modo oscuro (Dark mode) en WordPress

Recientemente he estado experimentando con el modo oscuro a nivel de sistema operativo, y me preguntaba existe una forma práctica de hacer lo mismo a nivel de WordPress, y efectivamente, hay un plugin para pasar tu sitio web a modo oscuro de manera simple.

 

Resultado Final

Al final lo que queremos obtener es algo similar a lo que se muestra en la siguiente imagen:

 

Generalidades

El plugin que usaremos en este artículo y el que uso actualmente en este sitio es WP Dark Mode:

A pesar de que podríamos hacer esto a través de código, agregando por ejemplo una clase CSS dinámicamente con Javascript y luego tener estilos de modo oscuro en base a esa clase. En algunos proyectos es posible que quieras una solución más rápida, es allí en donde puedes evaluar usar un plugin.

 

Configuración Plugin

Tras instalar y activar el plugin, verás que tienes una nueva opción de menú llamada WP Dark Mode. El plugin tiene opciones gratuitas y opciones de pago, en este artículo veremos las opciones gratuitas que nos brinda el plugin.

 

Ajustes Generales

En esta pantalla podrás ver tres configuraciones principales

• Habilitar modo oscuro en el front-end de tu sitio
• Habilitar modo oscuro en el backend del sitio
• Activar modo oscuro basado en la configuración del sistema operativo

 

Ajustes Avanzados

Desde aquí puedes habilitar por defecto el modo oscuro cuando se carga tu sitio web

 

Ajustes de Color

Desde esta pantalla puedes elegir usar los ajustes de color por defecto o incluso seleccionar algún tema de color diferente, en la versión gratuita sólo tienes dos opciones.

 

Ajustes Accesibilidad

En esta pantalla tenemos la opción de configurar un acceso a través de teclas para el cambio a modo oscuro.

 

Ajustes de Imagen

En esta pantalla puedes configurar cómo quieres que luzcan tus imágenes en el modo oscuro, tienes varias opciones como bajar el brillo, escala de grises e incluso reemplazar imágenes, esto último en la versión de pago del plugin.

 

Ajustes de Animación

En esta pantalla puedes establecer el efecto animado entre el cambio de Dark mode a Lightmode

 

Modificaciones CSS modo oscuro

El plugin en la versión de pago te permite agregar código CSS directamente desde la configuración para el modo oscuro. Sin embargo también es posible usar una clase CSS que el plugin crea dinámicamente para agregar código CSS personalizado.

La clase CSS es: wp-dark-mode-active y tiene anteponerse a cualquier clase CSS que definas, por ejemplo para cambiar el color de la etiqueta h2 en el modo oscuro sería

.wp-dark-mode-active h2{
  color:blue;
}

Puedes agregar este código CSS como parte del archivo style.css de tu tema hijo o como parte de la configuración de tu theme, en Ajustes > Personalizar > CSS

 

Conclusión

Como hemos podido comprobar, puedes habilitar la funcionalidad de modo oscuro en WordPress de manera simple a través de un plugin, el plugin tiene opciones adicionales de pago, sin embargo con la opciones de la versión gratuita puedes obtener una versión aceptable de modo oscuro en la mayoría de los casos.

 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores:

Suscríbete a DecodeCMS:  

 

La entrada Modo oscuro (Dark mode) en WordPress es un artículo reciente del sitio DecodeCMS.