Si estás interesado en añadir una opción de modo oscuro a tu sitio web de WordPress, este post va a explicar todo lo que necesitas saber.
En primer lugar, aprenderás algunas de las ventajas que el modo oscuro puede tener para tu sitio, como mejorar la accesibilidad, crear una experiencia más saludable para los visitantes, reducir el consumo de energía y, en general, satisfacer las preferencias de los usuarios.
Después, te mostraremos exactamente cómo añadir el modo oscuro a WordPress mediante plugins sin código o soluciones de código personalizado.
Al final del post, sabrás por qué y cómo configurar el modo oscuro de WordPress. Entremos en materia…
¿Qué es el modo oscuro de WordPress?
El modo oscuro de WordPress consiste en dar a los visitantes de tu sitio web la opción de elegir entre un tema de estilo «claro» y un tema de estilo «oscuro».
Puede que ya estés familiarizado con este concepto por el sistema operativo de tu ordenador o smartphone. La mayoría de los sistemas operativos te permiten elegir entre los modos claro y oscuro para la interfaz, y algunos incluso te permiten cambiar automáticamente entre los modos claro y oscuro en función de la hora del día.
Es la misma idea básica para el modo oscuro de WordPress. Los visitantes pueden utilizar un botón u otro elemento de la interfaz para alternar fácilmente entre los modos claro y oscuro. El contenido será exactamente el mismo en ambos modos — la única diferencia es la combinación de colores.
Aquí tienes un ejemplo de nuestro sitio de WordPress de prueba en su modo «claro» predeterminado:
A continuación, aquí tienes exactamente el mismo sitio en modo «oscuro»:
Nuestro sitio de prueba elegirá automáticamente qué versión mostrar en función de las preferencias del sistema operativo de cada visitante. Luego, los usuarios también pueden ajustar manualmente sus experiencias utilizando el widget de la esquina inferior derecha.
¿Por qué utilizar el modo oscuro en WordPress?
Hay muchas razones por las que puedes plantearte incluir el modo oscuro en tu sitio web. Pueden ir desde simples preferencias del usuario hasta hacer tu sitio web más accesible y crear una experiencia más saludable para los visitantes.
Vamos a repasarlas…
El modo oscuro hace que tu sitio web sea más accesible
Una gran ventaja de ofrecer el modo oscuro es que puede ayudar a que tu sitio web sea más accesible.
A veces abreviada como a11y, la accesibilidad se refiere a la práctica de hacer que tu sitio web sea utilizable por el mayor número posible de personas, incluidas las personas con discapacidad.
Un ejemplo de accesibilidad es garantizar que las personas que navegan por tu sitio con lectores de pantalla asistidos puedan seguir teniendo una buena experiencia.
Al margen de que en general sea bueno facilitar que todo el mundo disfrute de tu sitio web, la accesibilidad es también un requisito legal en muchas jurisdicciones. Por ejemplo, existe la Ley de Estadounidenses con Discapacidades (Americans With Disabilities Act, ADA) y la Ley Europea de Accesibilidad.
Aunque ofrecer el modo oscuro no forma parte directamente de las Pautas de Accesibilidad al Contenido en la Web (WCAG), puede mejorar la accesibilidad de otras maneras.
Éstas son algunas áreas notables en las que el modo oscuro puede mejorar la accesibilidad:
- Contraste mejorado para el contenido del texto. El modo oscuro suele tener un contraste muy fuerte entre los colores del fondo y los colores del texto. Esto puede facilitar la lectura y el consumo de contenidos a las personas con problemas de visión. El alto contraste forma parte de las WCAG, por lo que ofrecer el modo oscuro puede ayudarte indirectamente a seguir las WCAG.
- Facilita la comprensión a algunos visitantes. Los visitantes que padecen dislexia u otros trastornos del procesamiento visual pueden tener dificultades para interpretar texto negro sobre fondo blanco, por lo que el modo oscuro puede crear una experiencia mejor para estos visitantes. Este problema se denomina síndrome de sensibilidad escotópica o síndrome de Irlen.
- Menos problemas para las personas que sufren migrañas. A las personas que tienen migrañas se les suele recomendar que eviten las luces brillantes. Al crear una experiencia oscura, estos visitantes pueden disfrutar de tu sitio web minimizando el riesgo de agravar sus migrañas.
Dicho esto, el modo oscuro no es la mejor opción de accesibilidad en todas las situaciones. Por ejemplo, las personas que padecen astigmatismo pueden tener dificultades para leer texto claro sobre un fondo oscuro porque puede provocar un efecto borroso llamado «halación». Ésta es una de las razones por las que puede ser beneficioso dar a los usuarios la opción de elegir entre el modo claro y el oscuro.
El modo oscuro puede ser más saludable para tus visitantes
Ofrecer un modo oscuro del sitio web también puede ayudar a crear una experiencia más saludable para sus visitantes de diferentes maneras.
En primer lugar, el modo oscuro puede ayudar a los visitantes a mejorar su higiene del sueño, sobre todo si navegan antes de irse a la cama. Los expertos en sueño recomiendan evitar las luces brillantes en las horas previas a acostarse.
Cuanto más claro y brillante sea tu sitio web, peor será para la higiene del sueño de tus visitantes. Ofreciendo el modo oscuro, puedes permitir que tus visitantes sigan interactuando con tu sitio de WordPress con un impacto mínimo en sus horarios de sueño.
Muchas implementaciones del modo oscuro también permiten activarlo automáticamente en función de las preferencias del sistema operativo de cada visitante. Si un visitante configura su sistema operativo para cambiar automáticamente al modo oscuro cuando se acerca la hora de acostarse, tu sitio web puede seguir ese horario.
El modo oscuro también puede ser más cómodo para la vista de los visitantes y causar menos fatiga ocular. Por ejemplo, en un estudio de la Universidad de Florida Central (UCF), los autores del estudio descubrieron que «la fatiga visual de los participantes era significativamente menor con el modo oscuro que con el modo claro»
Además, los participantes tenían mayor agudeza visual en el modo oscuro y completaron las pruebas del estudio «con un número significativamente menor de errores en el modo oscuro que en el modo claro.»
El modo oscuro puede consumir menos energía
Aunque no es una ventaja para todos los visitantes, otra pequeña ventaja de ofrecer el modo oscuro es que consumirá menos energía en las pantallas OLED. Como las pantallas OLED son capaces de apagar píxeles individuales en lugar de iluminar toda la pantalla, las pantallas OLED necesitan menos energía para mostrar píxeles de color oscuro.
El ahorro exacto de energía dependerá de la configuración del brillo de la pantalla del usuario, pero puede oscilar entre un modesto 3%-9% con brillo bajo y un mucho mayor 39%-47% cuando el brillo de la pantalla del usuario está ajustado más alto.
Estas cifras proceden de un estudio de la Universidad de Purdue que analizó el consumo de energía de la pantalla con distintos niveles de brillo.
Algunas personas simplemente prefieren el modo oscuro
Más allá de las ventajas mencionadas, también hay que tener en cuenta que es posible que algunos de tus visitantes simplemente quieran utilizar el modo oscuro debido a sus preferencias personales.
Estas preferencias pueden ser el resultado de algunas de las ventajas enumeradas, o puede que alguien prefiera el modo oscuro por sus propias razones.
Ofreciendo el modo oscuro como opción, puedes crear una mejor experiencia de usuario para estos visitantes.
4 formas de implementar el modo oscuro en WordPress
Si te convence la idea de añadir el modo oscuro a WordPress, puedes hacerlo de varias maneras.
A continuación, repasaremos cuatro opciones diferentes:
1. Utilizar un plugin de modo oscuro para WordPress
Si no quieres trabajar con código, una de las formas más sencillas de añadir el modo oscuro a tu sitio web es utilizar un plugin de modo oscuro para WordPress.
Lo que hace que la mayoría de estos plugins sean tan fáciles de usar es que básicamente son plug-and-play. Puedes tener el modo oscuro funcionando en cuestión de minutos y luego ajustar las cosas si es necesario.
Por ejemplo, así es como funciona una de las opciones más populares — el plugin WP Dark Mode gratuito de WordPress.org.
Tras activar el plugin, tendrás al instante un modo oscuro operativo en tu sitio web. De hecho, es el mismo plugin que hemos utilizado para las capturas de pantalla de ejemplo anteriores.
Elegirá automáticamente qué versión utilizar en función de las preferencias del sistema operativo de cada visitante. Luego, los usuarios pueden cambiar manualmente entre los modos utilizando un widget flotante en la esquina inferior derecha.
Si quieres ajustar cómo funciona el modo oscuro, puedes ir a la configuración del plugin. Allí, puedes ajustar los estilos, seleccionar cómo elegir la experiencia predeterminada y mucho más.
Si te interesa la vía de los plugins, aquí tienes algunos plugins gratuitos para el modo oscuro que puedes tener en cuenta:
Dado que estos plugins pueden tener un gran efecto en tu sitio frontend, te recomendamos encarecidamente que los pruebes antes de activarlos en tu sitio web en producción.
Si utilizas el alojamiento administrado para WordPress de Kinsta, puedes utilizar la funcionalidad staging de Kinsta para probar fácilmente estos plugins en una versión sandbox segura de tu sitio.
2. Elige un tema que ya admita el modo oscuro
Otra forma de acceder al modo oscuro sin código es elegir un tema de WordPress con funcionalidad de modo oscuro integrada.
Por ejemplo, el tema gratuito Kanso de Rich Tabor incluye su propia funcionalidad integrada de modo oscuro, que puedes ver en acción en el sitio web personal de Rich.
Si ya has creado tu sitio con otro tema, probablemente no merezca la pena cambiar de tema sólo para acceder al modo oscuro. Sin embargo, si aún estás trabajando en la construcción de tu sitio y el modo oscuro es importante para ti, puede que merezca la pena incluirlo en tu lista de funcionalidades a tener en cuenta al elegir un tema de WordPress.
3. Utiliza una biblioteca JavaScript de modo oscuro
Si te sientes cómodo trabajando con código, también existen bibliotecas JavaScript prediseñadas que puedes utilizar para añadir el modo oscuro a tu sitio web.
O, si eres desarrollador de WordPress, también puedes utilizar estas bibliotecas para añadir fácilmente el modo oscuro a un plugin o tema que estés desarrollando. De hecho, algunos de los plugins de modo oscuro de WordPress.org se basan en estas bibliotecas.
Puedes encontrar varias bibliotecas diferentes de modo oscuro, pero aquí tienes dos de las opciones más populares:
- darkmode.js
- drkmd.js
Si quieres utilizar cualquiera de estas librerías, te recomendamos encarecidamente que las pruebes en un sitio staging antes de añadir código a tu sitio web en producción. De nuevo, si alojas tu sitio de WordPress con Kinsta, puedes utilizar la funcionalidad staging integrada de Kinsta.
darkmode.js
Darkmode.js utiliza VanillajS y CSS mix-blend-mode para añadir el modo oscuro sin ninguna configuración adicional. Por defecto, añade un conmutador flotante que los visitantes pueden utilizar para cambiar entre el modo oscuro y el modo claro, pero puedes desactivar este widget si prefieres crear tu propia solución.
En la primera visita de un usuario, elegirá el modo en función de las preferencias de su sistema operativo, y también soporta el almacenamiento local para que las preferencias de los visitantes se guarden para futuras visitas. Puedes ver una vista previa en acción en la página darkmode.js enlazada más arriba.
Dado que utiliza mix-blend-mode en lugar de requerir que añadas tus propias reglas CSS, es prácticamente plug-and-play.
drkmd.js
Drkmd.js utiliza un enfoque ligeramente diferente. En lugar de utilizar CSS mix-blend-mode para crear automáticamente un modo oscuro de tu sitio, te permite especificar directamente el CSS que quieres utilizar para el modo oscuro. A continuación, puedes añadir estas reglas de estilo a tu sitio utilizando las clases theme-light y theme-dark.
También te permite añadir fácilmente tu propio conmutador para cambiar entre los modos. Para ello, añade el atributo data-drkmd-attach a la etiqueta script.
También incluye otras funcionalidades útiles, como la capacidad de detectar automáticamente las preferencias del sistema operativo de los usuarios y guardar las elecciones de los usuarios en el almacenamiento local.
4. Utiliza tu propia solución de código
Además de utilizar una biblioteca JavaScript, también hay otras soluciones basadas en código que puedes implementar para añadir el modo oscuro a tu sitio.
Normalmente, funcionan aplicando un conjunto de reglas CSS para el modo claro y otro conjunto de reglas para el modo oscuro.
Una opción sería hacerlo con jQuery, como se documenta en este tutorial. Básicamente, añadirás reglas CSS para los modos claro y oscuro.
Luego, puedes añadir un botón o algún tipo de interruptor para activar el modo oscuro. Si un usuario activa ese interruptor, puedes utilizar JavaScript para cambiar qué clases CSS utilizar. El tutorial enlazado más arriba lo consigue con jQuery y los métodos hasClass(), addClass() y removeClass().
También puedes ser más complejo si quieres. Por ejemplo, en este tutorial basado en JavaScript, el tutorial te lleva a añadir dos mejoras principales al modo oscuro de tu sitio:
- Puede detectar automáticamente los modos preferidos de los usuarios en función de sus preferencias de sistema.
- Puede almacenar las elecciones de los usuarios y cargar automáticamente el modo correcto cuando vuelvan a tu sitio.
En general, probablemente sea más sencillo utilizar una de las bibliotecas JavaScript de modo oscuro mencionadas anteriormente. Pero si no quieres hacerlo, estos métodos ofrecen otra alternativa basada en código.
Cómo activar el modo oscuro del panel de control de WordPress
Hasta ahora, nos hemos centrado en cómo añadir el modo oscuro al frontend de tu sitio web WordPress. Sin embargo, puede que también te interese añadir un modo oscuro al panel de control de WordPress para que puedas gestionar tu sitio con una interfaz más fácil de usar.
Después de todo, ¿por qué deberían ser los visitantes de tu sitio los únicos capaces de acceder a las ventajas de las que hemos hablado anteriormente?
Si quieres añadir el modo oscuro a tu panel de control de WordPress, la opción más sencilla es utilizar un plugin. Encontrarás dos categorías principales de plugins:
- Plugins que mantienen la misma interfaz de administración, pero sólo cambian los estilos para activar el modo oscuro.
- Plugins que crean una interfaz de panel de control personalizada y también ofrecen el modo oscuro.
Si quieres mantener exactamente el mismo panel de control de WordPress pero añadir una opción de modo oscuro, puedes considerar el plugin Dark Mode for WP Dashboard, que tiene el aspecto de la siguiente captura de pantalla.
Algunos de los anteriores plugins de modo oscuro para el frontend también ofrecen funcionalidades para activar el modo oscuro en el panel de control de WordPress, como el plugin WP Dark Mode.
Si quieres probar una experiencia de panel de control completamente nueva con una opción de modo oscuro, puedes considerar estos plugins:
Resumen
Añadir el modo oscuro como opción en tu sitio web puede mejorar su accesibilidad, ofrecer una experiencia más saludable a los visitantes, reducir el consumo de energía en algunas pantallas y, en general, satisfacer las preferencias personales de algunos usuarios.
Si quieres añadir el modo oscuro a WordPress, tienes muchas opciones. Para soluciones sin código, puedes utilizar un plugin de modo oscuro o un tema con modo oscuro incorporado. Para opciones algo más técnicas, puedes utilizar una biblioteca JavaScript de modo oscuro o codificar tu propia solución.
Dado que añadir el modo oscuro tendrá un gran efecto en la apariencia de tu sitio web, debes asegurarte de probarlo a fondo antes de añadirlo a tu sitio de WordPress en producción.
Con el alojamiento administrado de WordPress de Kinsta, puedes probar el modo oscuro de forma segura utilizando la funcionalidad staging integrada de Kinsta y, a continuación, aplicar los cambios una vez que estés seguro de que todo funciona correctamente.
Deja una respuesta