Si algo me encanta de WordPress es que casi siempre hay una forma práctica de implementar mejoras modernas sin tener que reconstruir medio sitio. Y el WordPress Dark Mode (modo oscuro) es justo uno de esos casos: bien implementado, mejora la experiencia de lectura, reduce fatiga visual y hace que tu web se sienta más actual.

En este tutorial te voy a explicar, paso a paso y con ejemplos reales, cómo activar Dark Mode en Divi 5 o cualquier otro tema de WordPress usando un plugin llamado Darkify, de la gente de ThemeAtelier. Tiene versión gratuita (la que probé en el video) y versión Pro (con opciones clave para personalización avanzada).

Voy a ser muy honesto: la versión gratuita funciona, pero tiene limitaciones importantes, especialmente si tu diseño (por ejemplo en Divi) ya tiene fondos y colores definidos a nivel de secciones y módulos. Aun así, si haces ciertos ajustes, puedes lograr un resultado bastante decente sin pagar. Y si te interesa un dark mode realmente profesional, la versión Pro te abre el control total.

Qué es WordPress Dark Mode y por qué vale la pena activarlo

Cuando hablo de WordPress Dark Mode, me refiero a darle al usuario la opción de ver tu sitio en una versión oscura, normalmente con fondos negros o grises profundos y textos claros.

Esto puede ser útil por varias razones:

• Mejora la lectura en ambientes con poca luz.
• Reduce la fatiga visual en sesiones largas (blogs, documentación, academias).
• Se siente moderno y alineado a hábitos actuales (apps, sistemas operativos, navegadores).
• Puede aumentar el tiempo en página si tu contenido es largo.

⭐️ Consejo rápido: no implementes dark mode solo “por moda”. Si tu web es de contenido, educación, comunidad o tecnología, suele encajar perfecto. Si tu web depende mucho de estética visual (portafolios con fondos claros, marcas muy luminosas), entonces hay que hacerlo con cuidado para no romper tu identidad.

Qué plugin uso para activar Dark Mode en WordPress: Darkify

En el video probé Darkify (ThemeAtelier). No conozco demasiados plugins que lo hagan tan simple en configuración inicial, y por eso me llamó la atención.

Lo que me gustó de Darkify

• Instalación rápida, configuración mínima para tener un dark mode funcional.
• Varias paletas predefinidas (presets) que cambian el look de inmediato.
• Opciones inteligentes como “seguir el modo del sistema operativo”.

Lo que limita la versión gratuita (y tienes que saberlo)

• Muchos controles finos (texto, enlaces, botones, bordes, inputs) son Pro.
• Algunas funciones clave para que funcione bien con constructores como Divi son Pro.
• Si tu diseño tiene backgrounds definidos en secciones/módulos, puede no aplicarse el dark mode como esperas.

Aun así, para un primer paso o un proyecto sencillo, la versión free puede servir.

Paso 1: Instalar Darkify desde el repositorio de WordPress

Este es el flujo exacto:

1) Instala el plugin

1. Ve a Plugins > Añadir nuevo
2. Busca: Darkify
3. Instala y activa

Al activarlo, te aparecerá el panel de ajustes de Darkify dentro del admin de WordPress.

Consejo rápido: prueba primero en un sitio de staging o copia. Un dark mode toca CSS y estilos globales, y si tu sitio está muy personalizado, conviene revisar con calma antes de lanzarlo en producción.

Paso 2: Entender los controles principales de Darkify (Frontend)

Una vez dentro de Darkify, lo primero que reviso es la sección de Controls, porque define cómo se comporta el modo oscuro para el usuario.

Activar Dark Mode en frontend

Hay un switch para habilitar el dark mode en el frontend. Por defecto, viene activo (y yo lo dejé activo).

Dark Mode por defecto (cuando alguien entra al sitio)

Aquí decides si el sitio entra en:

• Light Mode por defecto (modo claro)
• Dark Mode por defecto (modo oscuro)

En el tutorial, por defecto venía en modo claro, pero tú puedes activarlo si quieres que todos entren en oscuro.

Mi recomendación: en la mayoría de sitios, yo prefiero no forzar dark mode por defecto. Mejor dale la opción al usuario y/o usa el modo basado en sistema operativo.

OS Aware Dark Mode (seguir el modo del sistema)

Esta opción es muy buena: si el usuario tiene su sistema operativo o navegador en dark mode, tu web también se pone en dark mode automáticamente.

Ejemplo real: si alguien usa Chrome en modo oscuro (o su sistema lo activa por la noche), tu web respeta esa preferencia. Esto es “premium UX” sin que el usuario toque nada.

Keyboard Shortcut (atajo de teclado)

Permite activar/desactivar dark mode con un atajo. Es útil en sitios de contenido, pero no es imprescindible.

Paso 3: Controles avanzados (Auto Dark Mode por horario)

Darkify también permite algo que me parece interesante: activar el modo oscuro basado en un rango de tiempo.

Auto Dark Mode basado en hora (por zona horaria del sitio)

Tú puedes decir: “Activar dark mode de 8 PM a 6 AM”

Pero ojo: esto se basa en la zona horaria configurada en tu sitio, no la del visitante. Si tienes audiencia global, puede comportarse raro para algunos usuarios.

Mi recomendación: úsalo solo si tu audiencia es mayormente local (misma zona horaria), o si no te importa que sea un comportamiento fijo.

Paso 4: Elegir dónde aparece el switch (desktop, móvil y menú)

Aquí Darkify te deja controlar visibilidad del switch:

• Ocultar switch en desktop
• Ocultar switch en móvil
• Mostrar switch dentro del menú (seleccionando menú principal)

Yo probé lo de mostrar el switch dentro del menú, pero te digo algo importante: por defecto no se veía intuitivo. Se sentía raro visualmente.

Lo bueno es que Darkify permite ajustar tamaño y apariencia del switch del menú (con valores como tamaño del switch e iconos), y ahí sí logré que se viera mejor. Aun así, en muchos sitios prefiero dejarlo como botón flotante en esquina inferior derecha, porque el usuario lo encuentra rápido y no depende del menú.

Consejo rápido: si tu menú móvil ya está muy cargado, no metas el switch ahí. Mejor usa el botón flotante para no saturar la navegación.

Paso 5: Elegir el estilo del switch (Switches)

En la sección Switches, Darkify te deja escoger el estilo del botón.

• Las primeras opciones suelen ser gratuitas.
• Las opciones más atractivas (como la lunita o estilos pro) son de pago.

Yo elegí un estilo tipo “Orbit” porque se veía bien y era gratuito.

Aquí también puedes ajustar:

• Color del botón
• Fondo
• Bordes

Y puedes activar tooltip, aunque yo no lo considero necesario porque el icono es suficientemente claro.

Paso 6: Posición del botón (y el shortcode si quieres control total)

Darkify te deja colocar el switch en:

• Inferior derecha (default)
• Inferior izquierda
• Superior derecha
• Superior izquierda

También tiene un shortcode del switch para posicionarlo donde quieras (por ejemplo, dentro de un módulo de Divi, en un header custom, en un layout específico).

Si usas Divi, esto es útil porque puedes colocarlo en una zona estratégica: arriba del menú móvil, dentro del header, o en una barra superior.

Consejo rápido: si estás diseñando una web con estética muy cuidada (marca premium), usar el shortcode para integrar el switch en el header puede verse más “nativo” que el botón flotante.

Paso 7: La parte más importante (y donde la versión gratuita se limita): Colors

Aquí es donde Darkify se vuelve poderoso… y a la vez donde la versión gratuita se queda corta.

Presets de color (gratis)

En la versión gratuita puedes elegir entre algunos presets como:

• Carbon Mist
• Midnight Reveal
• Variantes moradas, verdes, azules, tipo “café”

Lo bueno: cambias el look del dark mode rápido.
Lo malo: no puedes ajustar fino todo lo que normalmente necesitas (texto, enlaces, hover, inputs, bordes, botones), porque muchas opciones son Pro.

Ajustar Primary y Secondary background

En la versión free sí puedes tocar cosas como:

• Primary background (fondo principal)
• Secondary background (variación del fondo)

Yo en el ejemplo sentía que se veía “muy gris”, así que oscurecí un poco el primary para que se sintiera más dark real.

Consejo rápido: un dark mode premium casi siempre usa negros o grises MUY profundos, pero con variaciones sutiles para separar secciones. Si todo es el mismo negro plano, se vuelve pesado.

El “pero” grande con Divi: backgrounds definidos en secciones

Este punto es crucial si usas Divi (y te lo digo porque lo probé exactamente así).

Si tú en Divi tienes secciones con background de color (por ejemplo, un fondo azul claro o cualquier color definido en el builder), cuando activas Dark Mode puede pasar esto:

• Darkify intenta oscurecer el sitio
• Pero Divi “prioriza” el background que tú definiste en el builder
• Resultado: algunas secciones se quedan claras o con el color original, rompiendo el modo oscuro

En el tutorial lo expliqué tal cual: para que la versión gratuita se viera bien, tuve que quitar el color de fondo de las secciones y dejarlo “sin background” (sin color asignado). Solo así Darkify podía aplicar su fondo oscuro de forma uniforme.

Esto es importante porque si tu web ya está diseñada con fondos específicos por sección, la versión free puede obligarte a simplificar.

Cómo lo resuelve la versión Pro (y por qué ahí sí vale la pena)

Darkify Pro tiene una opción tipo “forzar corrección de diseño” (design correction / for design correction), que básicamente hace que Darkify tenga prioridad en la cascada CSS y pueda sobrescribir backgrounds, textos y demás sin que Divi lo bloquee.

Eso, para mí, es la diferencia entre:

• “tengo un dark mode decente”
  vs
• “tengo un dark mode profesional y consistente”

Ajustes extra: imágenes, SVGs y media (muy relevante en dark mode)

Dark mode no es solo fondo y texto. Las imágenes también afectan.

Oscurecer imágenes (brightness)

Darkify permite bajar brillo de imágenes en modo oscuro para que no “griten” visualmente. Esto es útil en sitios con muchas fotos o banners.

Invertir SVG inline (útil para iconos)

Esta función me encanta: si usas SVGs como iconos (por ejemplo iconos blancos/negros), el plugin puede invertirlos automáticamente para que siempre tengan contraste. Esto es oro para iconografía.

Reemplazar imágenes para modo oscuro (Pro)

En Pro puedes definir:

• Imagen normal (light)
• Imagen alternativa (dark)

Esto es ideal si tu logo en light es negro y en dark necesitas uno blanco.

Consejo rápido: si vas a implementar dark mode en serio, asegúrate de tener versión dark de tu logo. Es el primer lugar donde se nota si el dark mode está “a medias”.

Cómo excluir elementos del Dark Mode (concepto avanzado)

En el video mencioné una idea que, combinada con Divi 5, es muy potente:

1. En Divi 5 puedes asignar atributos (clases o IDs) a secciones/módulos.
2. En Darkify Pro puedes excluir elementos por CSS ID o class.

Ejemplo:

• Le pones un ID a una sección: #colors
• En Darkify (Pro) agregas esa sección como elemento excluido
• Resultado: esa sección mantiene su estilo original aunque el resto esté en dark mode

Esto es perfecto cuando hay elementos de marca que no quieres que cambien.

Cuánto cuesta Darkify Pro (y cuándo lo pagaría)

En el tutorial revisé que al momento de grabación había descuento (70%) y precios como:

• 1 sitio: alrededor de $19
• 5 sitios: alrededor de $35

En general, si de verdad quieres dark mode completo, me parece razonable.

Mi regla personal:

• Si solo quieres un dark mode “para probar” o un sitio simple, prueba free.
• Si tu web es un negocio real, marca cuidada, y quieres control de colores, botones, enlaces, inputs y exclusiones: ve por Pro.

Recomendaciones finales para un WordPress Dark Mode bien hecho

Antes de activar dark mode en tu web, yo haría esto:

• Revisa tu diseño: ¿usas muchos fondos por sección? Si sí, considera Pro o ajusta tu layout.
• Asegura contraste: textos, enlaces y botones deben leerse perfecto.
• Ten logo en versión dark.
• Revisa formularios (inputs) y estados hover (esto en free suele quedar limitado).
• Prueba en móvil y desktop.
• Testea páginas clave: Home, blog post, checkout, cuenta, login.

Consejo rápido: el dark mode “se siente premium” cuando los detalles están resueltos: enlaces, hover, botones, bordes, formularios. Si solo cambias el fondo y el texto, se nota incompleto.

Cursos y contenidos recomendados en UXDivi

Si quieres aprovechar esto como parte de una estrategia de diseño más completa (y no solo “activar un plugin”), estos contenidos de uxdivi.com/cursos te van a servir muchísimo:

• Curso de Menús y megamenús con Divi.

Si estás construyendo sitios para clientes, ofrecer dark mode como “extra premium” puede ser un diferenciador real, pero solo si lo entregas bien implementado.