Modo Oscuro de WordPress: Cómo Activarlo en 2025 + Sus Beneficios

En 2025, la experiencia del usuario es más importante que nunca.

Como propietario de un sitio WordPress, tu sitio debe ofrecer a los visitantes una experiencia agradable. No quieres que fuercen la vista o se sientan incómodos mientras navegan por tus sitios.

Además, admitámoslo, todos preferimos los modos oscuros. Así que, si has activado el modo oscuro en tu teléfono, ¿por qué tus usuarios iban a preferir algo diferente en tu sitio?

Y por eso debes ofrecer un modo oscuro en tu sitio de WordPress. Pero, ¿cómo hacerlo? Te cubrimos las espaldas, ya que este blog profundizará en la activación del modo oscuro (tanto a través de plugins como de código personalizado), sus ventajas y mucho más.

Así que, aprendamos más.

¿Qué es el modo oscuro de WordPress (y por qué es tan popular)?

Como su nombre indica, el modo oscuro de WordPress es un ajuste de visualización que simplemente cambia el fondo de tu sitio de claro a oscuro.

Esto crea una experiencia de navegación cómoda y visualmente atractiva. Los tonos más oscuros suelen ser negros o grises oscuros, mientras que el texto y otros contenidos se mantienen en colores más claros para crear contraste.

Igual que en tu teléfono móvil tienes la opción de cambiar entre los modos claro y oscuro, lo mismo ocurre con el modo oscuro de WordPress. Ofrece a los visitantes de tu sitio un botón para alternar entre los modos claro y oscuro.

En cuanto a la cuestión de su popularidad, la respuesta es sencilla. Nadie quiere forzar la vista y, como ya hemos dicho, todos lo preferimos, al igual que nuestros usuarios. Para quienes comprueban la calidad de la pantalla o disfrutan de una visión puramente oscura, una pantalla negra puede ser especialmente útil para identificar píxeles muertos o defectos de la pantalla.

Pero además de eso, se está popularizando por razones como la comodidad ocular, la duración de la batería (sí, el modo oscuro ahorra batería), la mejora del enfoque y, por supuesto, no podemos quitarle el elemento de estética y atractivo moderno.

Cómo añadir el modo oscuro a tu sitio WordPress (paso a paso)

Ahora, vayamos a la parte real. ¿Cómo se activa el modo oscuro en un sitio WordPress? Bueno, hay múltiples métodos, y hemos cubierto los 3 métodos más comunes, que son:

• Utilizar un plugin de WordPress para el modo oscuro
• Elegir un tema que ya admita el modo oscuro
• Utilizar una biblioteca JavaScript de modo oscuro

Haz clic en el método que te parezca más divertido para conocer sus pasos de implementación. Todos te llevarán a un resultado común: activar el modo oscuro en tu sitio de WordPress.

Método#1: Usar un plugin de WordPress para el modo oscuro

• ¿Tienes un sitio WordPress en funcionamiento? Salta a este paso.
• Accede a tu cuenta de Cloudways o regístrate para obtener una nueva cuenta de Cloudways.

Nota: Cloudways ofrece una prueba GRATUITA de 3 días a todos los nuevos usuarios, sin pedir datos de la tarjeta de crédito. Pruébalo sin riesgos .

• Haz clic en«Servidores» y luego en«Añadir servidor«.

• Selecciona«WordPress» como aplicación. Ponle un nombre a tu aplicación y a tu servidor.
• Selecciona tu servidor entre las opciones de
  DigitalOcean
  Vultr, Linode, AWS y Google Cloud.

• Selecciona el tamaño y la ubicación de tu servidor. Haz clic en Iniciar ahora.

• La configuración tardará entre 5 y 7 minutos en poner en marcha tu servidor. Espera o tómate un café para celebrar el inicio de tu veloz viaje con Cloudways. 😉

• Nuestro servidor ya está listo. Ya. Haz clic en«Aplicaciones» y, a continuación, en tu aplicación de WordPress.

• Serás redirigido a la Configuración de la Aplicación de tu sitio. Haz clic en la URL de la sección Panel de administración y copia/pega las credenciales desde allí.

Ve a tu panel de WordPress

• Serás redirigido al panel de control de tu sitio. Además, los usuarios que ya tengan un sitio WordPress en funcionamiento; Bienvenidos. Los pasos serán los mismos para todos a partir de ahora.

• Haz clic en Plugins > Añadir nuevo plugin.

• Busca un plugin de tu elección; en este caso vamos a utilizar el Modo Oscuro de WP.
• Instala y activa el plugin.

• Tras la activación, verás la configuración del plugin en la barra lateral de tu panel de control de WordPress.
• Haz clic en«Configuración» en el menú del plugin que hayas elegido.

• Activa los botones para activar el modo oscuro en el front-end de tu sitio y en el panel de administración. Y el modo oscuro se activará al instante.

• Para comprobar los resultados en mi panel de administración, activo el modo oscuro y guardo los cambios.

• Después de guardar los cambios, encontrarás las opciones de Claro y Oscuro en la barra superior de tu sitio. Y como puedes ver, estoy disfrutando del modo oscuro en mi panel de administración.

Evita los fallos del Modo Oscuro con SafeUpdates

Los temas y plugins desactualizados pueden causar problemas de visualización en modo oscuro. SafeUpdates mantiene todo actualizado automáticamente, garantizando una experiencia en modo oscuro fluida y sin fallos.

Saber más

Método#2: Elegir un tema que ya admita el modo oscuro

¿No te apetece utilizar un plugin y quieres una opción que requiera menos trabajo? Elige un tema de WordPress que admita el modo oscuro por defecto. Aquí tienes algunos de estos temas de WordPress:

• Neve
• OceanWP
• Hestia
• Astra (con personalización de color)
• GenerarPrensa
• Kadence
• Zakra
• Sidney
• Con forma
• Soledad

Para este tutorial utilizaremos Neve.

• Haz clic en Apariencia > Temas en la barra lateral de tu panel de WordPress.

• Haz clic en Añadir nuevos temas y busca tu tema preferido.

• Instala y activa el tema.

• Una vez activado, haz clic en Personalizar.

• Localiza y haz clic en Colores y Fondo en el menú de la izquierda.

• Haz clic en Modo Oscuro para ver los cambios y luego en Publicar.

Antes:

Después:

• Y ya está. Hemos activado correctamente el modo oscuro utilizando un tema de WordPress

Método#3: Utilizar una biblioteca JavaScript de modo oscuro

No quieres los métodos más fáciles y deseas ensuciarte las manos con algunas líneas de codificación (nada complicadas). Estamos aquí para satisfacer tu gusanillo de codificación, así que vamos a sumergirnos en los pasos.

Así pues, este proceso se divide en cuatro pasos:

Paso#1: Descarga o enlaza a la librería Darkmode.js

Tienes la opción de descargar la biblioteca y alojarla en tu servidor o simplemente utilizar un enlace CDN. Aquí utilizaremos el método CDN:

• Ve al repositorio oficial de Darkmode.js en GitHub:
  Darkmode.js GitHub
  
• Alternativamente, puedes utilizar una CDN para enlazar directamente con la última versión.

Aquí tienes el enlace CDN a la biblioteca:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/darkmode.min.js"></script>

Paso#2: Añade el JavaScript a tu sitio WordPress

Tendremos que incluir el script en el pie de página (o cabecera) de nuestro tema para que se ejecute en todas las páginas de nuestro sitio. De nuevo, aquí tenemos dos opciones. Podemos utilizar el pie de página del tema o utilizar un complemento de fragmento de código personalizado. Optaremos por la primera opción.

• Ve a tu panel de control de WordPress.
• Ve a Apariencia > Editor de archivos de temas.
• Busca y selecciona el archivo footer. php en la sección Archivos de tema de la barra lateral derecha.
• Inserta el siguiente script justo antes de la etiqueta de cierre </body>:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/darkmode.min.js"></script>
<guión>
  nuevo Darkmode().showWidget();
</script>

• Guarda los cambios.

Paso#3: Personalizar el Widget de Modo Oscuro

Podemos personalizar la apariencia del botón de activación del modo oscuro (el widget) y también su comportamiento. Darkmode.js tiene varias opciones de configuración.

Aquí tienes un ejemplo básico de cómo ajustar la configuración del widget:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/darkmode.min.js"></script>
<guión>
  nuevo Darkmode({
  label: '🌓', // Esto cambiará el icono del botón de conmutación
  bottom: '32px', // Ajusta la posición del botón de conmutación desde la parte inferior
  right: '32px', // Ajusta la posición del botón de activación desde la derecha
  backgroundColor: '#000000', // Personaliza el color de fondo del widget
  buttonColorDark: '#fff', // Color del botón en modo oscuro
  buttonColorLight: '#000', // Color del botón en modo luz
  saveInCookies: true // Esto guardará la preferencia del usuario en cookies
  }).showWidget();
</script>

Paso#4: Prueba el modo oscuro en tu web

Después de añadir el script y la personalización, visita tu sitio para comprobar si aparece el botón de alternancia del Modo Oscuro. Verás el botón en la esquina inferior derecha de tu página.

Además, puedes comprobar si el modo oscuro funciona bien cambiando entre los dos modelos y comprobando si el tema ajusta todo, como el fondo, el texto, etc., en consecuencia.

Errores comunes que debes evitar al implementar el modo oscuro de WordPress

Aunque hay muchas razones de peso por las que deberías implementar el modo oscuro en tu sitio de WordPress, debes tener en cuenta algunos problemas comunes con los que te puedes encontrar.

Así que vamos a abordarlas junto con sus soluciones.

1. Los logotipos no aparecen correctamente

Cuando utilizas el modo oscuro en tu sitio de WordPress, los logotipos con colores oscuros o fondos blancos pueden tener un aspecto extraño con bordes dentados o desaparecer por completo.

Una solución fácil a este problema es utilizar un fondo PNG transparente para los logotipos, o puedes utilizar contornos/sombras blancas. Esto hará que tus logotipos aparezcan correctamente.

Lo que también puedes hacer es definir CSS independientes para los temas claros y oscuros de tu sitio web, para cargar diferentes versiones del logotipo.

2. Contraste deficiente entre el texto y el fondo

De forma similar al tema del logotipo que hemos comentado antes al implementar el modo oscuro, es importante prestar atención al color del texto que has utilizado para tu sitio web. La mayoría de los sitios web utilizan el negro o el gris oscuro como color de texto.

Sin embargo, esto puede hacer que el texto se funda con el fondo, haciéndolo ilegible. Por eso debes elegir colores que contrasten adecuadamente para el texto y los elementos de la IU, a fin de mantener la accesibilidad y la legibilidad.

3. No probar en diferentes dispositivos

Cuando implementes el modo oscuro, es importante que lo pruebes en distintos dispositivos y navegadores. Esto es importante porque el modo oscuro puede mostrarse de forma diferente en distintos dispositivos y navegadores.

4. Codificación rígida de colores

La codificación rígida de los colores anulará la capacidad de tu tema para ajustar dinámicamente su combinación de colores al cambiar entre el modo oscuro y el modo claro. En su lugar, puedes utilizar variables CSS para gestionar los esquemas de color de los modos claro y oscuro.

Reflexiones finales

La experiencia del usuario lo es todo hoy en día, y habilitar el modo oscuro en tu sitio de WordPress mejora tanto la accesibilidad como la estética. Los usuarios aprecian los sitios de WordPress que ofrecen un modo oscuro, ya que atienden a sus preferencias y les proporcionan ventajas como el ahorro de batería y la comodidad ocular.

Este blog ha cubierto múltiples métodos para implementar un modo oscuro en tu sitio, de modo que puedas ofrecer una experiencia moderna y visualmente atractiva a tus visitantes.
Configurar el modo oscuro es fácil, ya sea a través de un plugin, un tema o JavaScript. Sólo tienes que asegurarte de evitar errores comunes como un contraste pobre o la visibilidad del logotipo.

Preguntas frecuentes