El modo oscuro es una funcionalidad esencial que muchos usuarios esperan encontrar en las webs que visitan. Si tienes un sitio WordPress y te estás planteando implementarlo, esta guía debería ayudarte a resolver todas las dudas que tengas.

Vas a encontrar todo lo que necesitas saber: desde por qué deberías (o no) añadirlo a tu web, hasta las cinco formas principales que te propongo de hacerlo, con sus pros, contras y ejemplos prácticos. No importa si eres principiante o desarrollador experto, cada método está explicado paso a paso.

La idea es que después de leer esto tengas claro cuál es la mejor opción de modo oscuro para tu caso concreto y sobre todo sepas exactamente cómo implementarla. Sin rollos técnicos innecesarios, pero con toda la información que realmente importa.

Índice de contenidos

¿Debería añadir el modo oscuro a mi WordPress?

Antes de meternos en el cómo, vamos a aclarar el por qué: el modo oscuro no es solo una cuestión estética, hay razones de peso detrás de esta tendencia que han hecho que gigantes como Apple, Google o Microsoft lo integren en sus sistemas operativos.

¿Tiene beneficios reales el modo oscuro?

Para la salud ocular, el modo oscuro reduce la cantidad de luz azul que emiten las pantallas, especialmente útil durante las horas nocturnas. Aunque los estudios científicos aún debaten sobre el impacto real en el sueño, muchos usuarios dicen tener menos fatiga visual al usar interfaces oscuras en condiciones de poca luz ambiental.
Desde el punto de vista medioambiental, el modo oscuro contribuye a reducir la huella de carbono digital. Las pantallas OLED y AMOLED consumen hasta un 60% menos energía mostrando píxeles negros, lo que se traduce en menor consumo eléctrico y mayor duración de la batería en dispositivos móviles. Aunque el impacto individual pueda parecer mínimo, cuando se multiplica por millones de usuarios que pasan horas navegando webs, el ahorro energético acumulado es significativo. En pantallas LCD tradicionales el beneficio es menor pero existe, especialmente al reducir el brillo necesario de la retro-iluminación.
En relación con la accesibilidad, el modo oscuro puede ser especialmente beneficioso para usuarios con ciertas condiciones visuales como la sensibilidad a la luz o algunas formas de dislexia. Sin embargo, no es universalmente mejor: algunas personas con astigmatismo o problemas de visión encuentran más difícil leer texto claro sobre fondo oscuro.
Las preferencias de usuario son cada vez más importantes. Según estudios recientes más del 70 % de usuarios prefieren usar modo oscuro en sus dispositivos cuando está disponible, especialmente en aplicaciones que usan frecuentemente.

Detalles a tener en cuenta antes de implementar el modo oscuro

El impacto en SEO es prácticamente nulo. Google no penaliza ni premia el uso de modo oscuro, y tampoco afecta directamente a métricas como Core Web Vitals. Sin embargo, si mejora la experiencia de usuario, aumentando la permanencia y reduciendo la tasa de rebote, así que indirectamente puede tener efectos positivos.
La legibilidad es crucial. Un modo oscuro mal implementado puede ser contraproducente. Los contrastes deben ser adecuados (mínimo 4.5:1 según las guías WCAG), y no todos los colores funcionan igual sobre fondos oscuros.
La coherencia con tu marca también importa. Si tu identidad visual está muy basada en colores claros o específicos, el modo oscuro podría diluir el reconocimiento de marca.
Mantenimiento adicional: Implementar modo oscuro significa que tienes que probar y mantener dos versiones visuales de tu web. Cada cambio de diseño debe verificarse en ambos modos.

¿Cuándo SÍ implementar modo oscuro?

Tu audiencia son usuarios técnicos, desarrolladores, gamers o personas que pasan muchas horas frente a pantallas.
Tu web se usa frecuentemente en condiciones de poca luz (aplicaciones nocturnas, entretenimiento).
Quieres posicionarte como una marca moderna y actualizada.
Tienes recursos para mantener adecuadamente ambas versiones.

¿Cuándo NO sería prioritario el modo oscuro?

Tu audiencia principal son usuarios mayores que pueden tener dificultades con interfaces oscuras.
La identidad de marca es muy específica y el modo oscuro queda mal.
No tienes tiempo para implementarlo correctamente con buenos contrastes.
Tu web tiene mucho contenido visual (fotografías, ilustraciones) que no se ve bien en modo oscuro.

Los cinco enfoques principales

En WordPress puedes implementar modo oscuro de cinco formas principales, cada una con sus pros y contras:

Plugins especializados: Fácil de implementar y configurar, pero añade dependencias.
Temas con modo oscuro integrado: Aquí hay sorpresa, ya lo verás más adelante…
CSS personalizado: Máximo control, pero requiere conocimientos técnicos.
Funciones de código PHP: Muy personalizable, pero necesitas saber programar.
Enfoque mixto: Combina plugin con CSS personalizado para lo mejor de ambos mundos.

Vamos a analizar cada método en detalle, para que puedas elegir el que mejor se adapte a tu situación particular o necesidades.

Modo oscuro en WordPress con plugins

Los plugins de modo oscuro son la opción más sencilla, popular y práctica para la mayoría de usuarios. Lo activas y ya está funcionando, sin necesidad de tocar código ni cambiar de tema.

Casi siempre es la mejor opción, o por lo menos la primera que deberías probar.

Ventajas de usar plugins

Instalación inmediata: Activas el plugin y tu web ya tiene modo oscuro. No necesitas conocimientos técnicos ni modificar archivos.
Compatibilidad: Los buenos plugins de modo oscuro funcionan con prácticamente cualquier tema de WordPress, desde los gratuitos hasta los premium.
Personalización sencilla: Panel de control intuitivo donde puedes ajustar colores, posición del selector, comportamiento automático y exclusiones sin escribir ni una línea de código.
Actualizaciones automáticas: El desarrollador se encarga de mantener la compatibilidad con nuevas versiones de WordPress y solucionar problemas.
Funciones avanzadas: Muchos incluyen características como detección automática de preferencias del sistema, modo oscuro programado por horas, personalización de colores específicos, y estadísticas de uso.

Las pegas

Dependencia del plugin: Si dejas de usar el plugin o deja de actualizarse, pierdes el modo oscuro. Es una funcionalidad externa a tu tema.
Posible impacto en rendimiento: Aunque los buenos plugins están optimizados, añaden código JavaScript y CSS adicional que puede afectar marginalmente a la velocidad de carga.
Coste de mantenimiento: Los plugins premium requieren renovar licencias anuales. Si no renuevas, pierdes soporte y actualizaciones.
Menos control técnico: Estás limitado a las opciones que ofrece el plugin. Si necesitas algo muy específico, puede que no sea posible.
Posibles conflictos: En sitios complejos con muchos plugins, ocasionalmente pueden surgir incompatibilidades que requieren ajustes.

Los mejores plugins de modo oscuro para WordPress

WP Dark Mode

El que más instalaciones activas tiene y el plugin más completo y veterano.

Funciones principales: Modo oscuro automático basado en preferencias del sistema, selector flotante personalizable, modo oscuro para el admin de WordPress, presets de colores predefinidos, exclusión de elementos específicos, y compatibilidad con todos los maquetadores populares.
Lo mejor: Funciona perfectamente con cualquier tema, analíticas gratis, actualizaciones frecuentes, y la versión gratuita ya es muy completa.
Lo peor: La versión premium es cara, y algunas funciones avanzadas requieren pago.

Dracula Dark Mode

Plugin que aspira a sustituir a WP Dark Mode (el de antes) y que añade cosas chulas, como algoritmos inteligentes para adaptación automática del contenido.

Funciones principales: Algoritmos AI para conversión automática de colores, selector personalizable, detección de preferencias del sistema, modo oscuro adaptativo que se ajusta al contenido, y compatibilidad optimizada con temas populares.
Lo mejor: Conversión inteligente y automática, muy fácil de configurar gracias al asistente automático, resultados consistentes, interfaz limpia y moderna.
Lo peor: Menos opciones de personalización manual, plugin relativamente nuevo, funciones de pago un poco limitadas comparado con WP Dark Mode.

Dark Mode Toggle

Plugin minimalista que prioriza la simplicidad y el rendimiento.

Funciones principales: Selector básico pero resultón (eso sí, feo), detección de preferencias del sistema, opción de recordar elección del usuario, botón flotante configurable.
Lo mejor: Muy ligero, interfaz sencilla, compatible con todos los temas, impacto mínimo en rendimiento.
Lo peor: Opciones de personalización muy limitadas, selector viejuno, pocas funciones avanzadas, soporte menos activo que en los otros.

Tabla comparativa de plugins

Plugin	Precio	Facilidad uso	Funciones	Rendimiento	Soporte	Puntuación total
WP Dark Mode	Gratis – 49 €	★★★★★	★★★★★	★★★★☆	★★★★★	★★★★☆
Dracula Dark Mode	Gratis – 29 €	★★★★★	★★★★☆	★★★★★	★★★★☆	★★★★☆
Dark Mode Toggle	Gratis- 29 €	★★★★★	★★☆☆☆	★★★★★	★★★☆☆	★★★☆☆

¿Cuál es el ideal para mi?

Para mi no, para ti 😉

Para principiantes: Dark Mode Toggle es perfecto si solo quieres algo que funcione sin tener que pensar en ajustes. Es ligero, y hace lo que promete.
Para sitios profesionales: WP Dark Mode sigue siendo la opción más completa. La inversión en la versión premium se justifica si necesitas control total y funciones avanzadas.
Para usuarios que buscan automatización: Dracula Dark Mode es ideal si prefieres que el plugin se encargue de todo automáticamente con sus algoritmos inteligentes.

Si tengo que elegir yo me quedo con WP Dark Mode.

¿Hay temas WordPress con modo oscuro incluido?

Esta es probablemente la pregunta que te estás haciendo ahora mismo: ¿Por qué no hay temas de WordPress que ya traigan el modo oscuro integrado?

La respuesta corta es: sí los hay, pero no como te imaginas o te gustaría.

Las «variaciones de estilo»

Muchos temas premium y algunos gratuitos presumen de tener «modo oscuro», pero en realidad lo que ofrecen son variaciones de estilo oscuro o paletas de colores oscuras. Y no, no es lo mismo.

Twenty TwentyFive, el actual tema por defecto de WordPress, incluye una paleta de colores llamada «Evening» que usa fondos oscuros y textos en blanco. Pero no tiene selector para cambiar entre claro y oscuro, ni detección automática de preferencias del usuario. Simplemente es un diseño con fondo oscuro.
Temas premium populares como Astra Pro, GeneratePress Premium, o Kadence Pro anuncian «admite modo oscuro», pero investigando a fondo descubres que solo ofrecen paletas de colores para que tú diseñes una versión oscura manualmente. No hay funcionalidad de cambio dinámico.

Por qué no existen temas con modo oscuro real

Complejidad de mantenimiento: Un tema con modo oscuro nativo tendría que mantener dos versiones visuales completas. Cada actualización, cada personalización, cada elemento tendría que probarse en ambos modos.
Directrices de WordPress.org: El repositorio oficial de temas tiene restricciones sobre funcionalidades que se consideran propias de plugins. Un selector de modo oscuro entraría en esa categoría.
Fragmentación del mercado: Es más rentable para los desarrolladores crear temas universales y dejar que los usuarios añadan modo oscuro con un plugin si lo necesitan.

La realidad de los temas con modo oscuro

He investigado los temas más populares que supuestamente incluyen modo oscuro y… (spoiler: es mentira)

Astra Pro: Solo ofrece una «paleta de colores para modo oscuro» que tienes que configurar manualmente. No hay selector ni automatización.
GeneratePress Premium: Permite crear una paleta oscura personalizada, pero tendrías que aplicarla manualmente. No es un sistema de modo oscuro dinámico.
Kadence Pro: Incluye «paleta de colores de modo oscuro» en las opciones, pero nuevamente es solo una herramienta para diseñar una versión oscura fija.
OceanWP Pro y Neve Pro: Ni siquiera mencionan oficialmente disponibilidad de modo oscuro en su documentación.

¿Merece la pena buscar temas con modo oscuro?

Pues la verdad es que NO, por varios motivos:

Funcionalidad limitada: Incluso los que dicen tenerlo, en realidad solo ofrecen herramientas para crear diseños oscuros estáticos.
Dependencia del tema: Si quieres cambiar de tema en el futuro, pierdes toda la funcionalidad de modo oscuro.
Menos flexibilidad: Los plugins especializados ofrecen muchas más opciones de personalización y automatización.
Mejor compatibilidad: Los plugins se actualizan específicamente para mejorar el modo oscuro, mientras que en los temas es una característica secundaria.

La excepción: temas con diseño oscuro

Lo que sí existe es temas específicamente diseñados con estética oscura fija, ideales para ciertos nichos:

Portfolios creativos: Temas como Sydney Dark, Hestia Dark, o variaciones oscuras de temas de fotografía.
Webs de juegos y tecnología: Temas especializados en comunidades de gamers, desarrolladores o tecnología.
Sitios de música y entretenimiento: Diseños oscuros que funcionan bien para bandas, DJs, o contenido multimedia.

Pero estos no tienen modo oscuro dinámico, simplemente usan una paleta oscura como diseño base.

¿Quieres mi consejo?

Evita temas que prometan modo oscuro nativo: Probablemente te lleves una decepción al descubrir que no es lo que esperabas.
Elige tu tema por otras características: Rendimiento, compatibilidad con maquetadores, opciones de personalización, soporte, etc.
Añade modo oscuro con plugins o sigue leyendo: Usa cualquiera de los plugins que he analizado. Tendrás mejor funcionalidad y más flexibilidad. O sigue leyendo esta guía para descubrir más métodos de cómo añadir el modo oscuro.

Modo oscuro en WordPress con CSS

Si te gusta tener control total sobre cómo funciona tu web, implementar modo oscuro con CSS personalizado es tu opción. Es más trabajo pero el resultado es exactamente como tú quieres.

Ventajas del CSS personalizado

Control absoluto: Decides exactamente qué elementos cambian, qué colores usar, y cómo se comporta cada transición. Ningún plugin te limita.
Rendimiento óptimo: Solo cargas el CSS que realmente necesitas. No hay código extra de funciones que no vas a usar.
Personalización total: Puedes crear efectos únicos, animaciones personalizadas, o comportamientos específicos que ningún plugin ofrece.
Sin dependencias: No dependes de actualizaciones de terceros ni de que el desarrollador mantenga el plugin. El código es tuyo.
Aprendizaje valioso: Entiendes exactamente cómo funciona el modo oscuro, lo que te permite solucionar problemas y hacer mejoras.

Inconvenientes que debes tener en cuenta

Conocimientos técnicos necesarios: Necesitas saber un poco de CSS o ayudarte de tu IA favorita. Tienes que andar probando códigos.
Más tiempo de desarrollo: Tienes que escribir, probar y depurar todo el código tú mismo. Los plugins ahorran mucho tiempo.
Mantenimiento continuo: Cada cambio en el diseño requiere revisar y actualizar el CSS del modo oscuro manualmente.
Pruebas exhaustivas: Tienes que probar en diferentes navegadores, dispositivos y combinaciones para asegurar compatibilidad.
Posibles conflictos: Si no organizas bien el CSS, puede entrar en conflicto con el tema o otros plugins.

Dónde añadir el código CSS

Personalizador de WordPress (recomendado para casi todos)

Dónde: Apariencia > Personalizar > CSS adicional
Ventajas: Interfaz visual, previsualización en tiempo real, se mantiene al cambiar de tema (casi siempre), fácil de encontrar y editar.
Inconvenientes: Limitado si necesitas algo más que CSS, puede perderse al cambiar a ciertos temas.

Tema hijo (cada vez menos recomendable)

Archivos: style.css para CSS y archivos aparte si hace falta JavaScript.
Ventajas: Máximo control, se mantiene en actualizaciones del tema padre, puedes organizar el código en archivos separados.
Inconvenientes: Requiere conocimientos de desarrollo, más complejo de configurar, y no se mantiene nada si cambias de tema.

Plugin de CSS personalizado (no te lo recomiendo en absoluto)

Opciones: Simple Custom CSS, Easy Custom CSS, SiteOrigin CSS.
Ventajas: Específico para CSS personalizado, interfaz específica, generalmente se mantiene al cambiar temas.
Inconvenientes: Añade otra dependencia totalmente innecesaria.

CSS para modo oscuro universal (curradísimo)

Si te animas con un poco de copiar y pegar aquí tienes un CSS que respeta automáticamente las preferencias del sistema operativo del usuario y funciona con la mayoría de temas, confirmado con los más utilizados, y funciona de maravilla.

Por supuesto puedes cambiar colores a tu gusto, pero le he echado unas cuantas horas de pruebas para que tengas algo que funciona a la primera:

/* Variables CSS para facilitar los cambios */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--link-color: #0073aa;
--border-color: #e1e1e1;
--secondary-bg: #f8f9fa;
--heading-color: #2c3e50;
}

/* Colores para modo oscuro para adaptarse a las preferencias de usuario */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #e1e1e1;
--link-color: #4f94cd;
--border-color: #333333;
--secondary-bg: #2d2d2d;
--heading-color: #ffffff;
}
}

/* Elementos principales con máxima prioridad */
body,
html {
background-color: var(--bg-color) !important;
color: var(--text-color) !important;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Fuerza bruta para elementos estructurales comunes */
div, section, article, header, footer, nav, main, aside {
background-color: var(--bg-color) !important;
color: var(--text-color) !important;
}

/* Enlaces */
a {
color: var(--link-color) !important;
}

/* Títulos y encabezados */
h1, h2, h3, h4, h5, h6 {
color: var(--heading-color) !important;
}

/* Formularios básicos */
input, textarea, select {
background-color: var(--secondary-bg) !important;
color: var(--text-color) !important;
border-color: var(--border-color) !important;
}

/* Imágenes en modo oscuro */
@media (prefers-color-scheme: dark) {
img {
opacity: 0.8;
filter: brightness(0.8) contrast(1.2);
}

img:hover {
opacity: 1;
filter: none;
}
}

Cómo comprobar que funciona:

Cambia las preferencias de modo oscuro en tu sistema operativo, a veces también hace falta en el navegador.
La web debería cambiar automáticamente entre colores claros y oscuros.
Abre las herramientas de desarrollador (F12) > pestaña Elements > busca la etiqueta <body>:
- En Computed o Calculado deberías ver que background-color y color usan los valores de las variables CSS.
Si cambias las preferencias de aspecto del sistema con la web a la vista, los colores deberían cambiar inmediatamente.

CSS específico para WooCommerce

Si tienes una tienda online, puedes añadir estos estilos al código anterior:

/* WooCommerce en modo oscuro */
@media (prefers-color-scheme: dark) {
  /* Productos */
  .woocommerce .product,
  .woocommerce-page .product {
    background-color: var(--secondary-bg) !important;
    color: var(--primary-text) !important;
  }
  
  /* Carrito y checkout */
  .woocommerce-cart table.cart,
  .woocommerce-checkout .checkout {
    background-color: var(--primary-bg) !important;
    color: var(--primary-text) !important;
  }
  
  /* Botones específicos de WooCommerce */
  .woocommerce .button,
  .woocommerce-page .button {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
  }
  
  /* Precios */
  .woocommerce .price,
  .woocommerce-page .price {
    color: var(--heading-text) !important;
  }
}

Cómo comprobar que funciona:

Ve a páginas de productos, carrito o pago de tu tienda
Activa el modo oscuro en tu sistema operativo
Los elementos específicos de WooCommerce (productos, tablas, botones «Añadir al carrito», precios) deberían cambiar a modo oscuro
En herramientas de desarrollador, busca elementos con clases que empiecen por .woocommerce
Deberían mostrar los colores de las variables CSS del modo oscuro

Cómo añadirlo a otros CSS:

Simplemente copia todo el código del CSS para WooCommerce y pégalo al final de cualquier otro código CSS que estés usando. Se combinará automáticamente porque usa las mismas variables CSS (var(--secondary-bg), var(--text-color), etc.).

CSS con gradientes y efectos modernos

Estos estilos reemplazan algunas partes del CSS universal de antes, para crear un aspecto más sofisticado:

/* Variables CSS para facilitar el mantenimiento */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--link-color: #0073aa;
--border-color: #e1e1e1;
--secondary-bg: #f8f9fa;
--heading-color: #2c3e50;
}

/* Colores para modo oscuro cuando el usuario lo prefiere */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #e1e1e1;
--link-color: #4f94cd;
--border-color: #333333;
--secondary-bg: #2d2d2d;
--heading-color: #ffffff;
}
}

/* Elementos principales con máxima prioridad */
body,
html {
color: var(--text-color) !important;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Fondo principal con gradiente en modo oscuro */
body {
background-color: var(--bg-color) !important;
}

@media (prefers-color-scheme: dark) {
body {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}
}

/* Fuerza bruta para elementos estructurales comunes */
div, section, article, main, aside {
background-color: var(--bg-color) !important;
color: var(--text-color) !important;
}

/* Headers y footers con gradientes */
header, footer, nav {
background-color: var(--secondary-bg) !important;
color: var(--text-color) !important;
}

@media (prefers-color-scheme: dark) {
header, footer, nav {
background: linear-gradient(90deg, #2d2d2d 0%, #404040 100%) !important;
}
}

/* Cards y elementos destacados con gradientes y sombras */
.card, .post, .widget, .comment, .box {
background-color: var(--secondary-bg) !important;
color: var(--text-color) !important;
border-color: var(--border-color) !important;
transition: all 0.3s ease !important;
}

@media (prefers-color-scheme: dark) {
.card, .post, .widget, .comment, .box {
background: linear-gradient(145deg, #2d2d2d 0%, #1a1a1a 100%) !important;
box-shadow: 
0 4px 6px rgba(0, 0, 0, 0.3),
0 1px 3px rgba(255, 255, 255, 0.1) inset !important;
}

.card:hover, .post:hover, .widget:hover {
transform: translateY(-2px);
box-shadow: 
0 8px 12px rgba(0, 0, 0, 0.4),
0 2px 6px rgba(255, 255, 255, 0.1) inset !important;
}
}

/* Enlaces */
a {
color: var(--link-color) !important;
transition: color 0.3s ease !important;
}

/* Títulos y encabezados */
h1, h2, h3, h4, h5, h6 {
color: var(--heading-color) !important;
}

/* Formularios básicos */
input, textarea, select {
background-color: var(--secondary-bg) !important;
color: var(--text-color) !important;
border-color: var(--border-color) !important;
}

/* Botones con gradientes en modo oscuro */
button, .btn, input[type="submit"] {
background-color: var(--link-color) !important;
color: var(--bg-color) !important;
border-color: var(--link-color) !important;
transition: all 0.3s ease !important;
}

@media (prefers-color-scheme: dark) {
button, .btn, input[type="submit"] {
background: linear-gradient(135deg, var(--link-color) 0%, #6ba3d6 100%) !important;
box-shadow: 0 2px 8px rgba(79, 148, 205, 0.3) !important;
}

button:hover, .btn:hover, input[type="submit"]:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(79, 148, 205, 0.4) !important;
}
}

/* Transiciones suaves para todos los elementos */
* {
transition: 
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease !important;
}

/* Imágenes en modo oscuro */
@media (prefers-color-scheme: dark) {
img {
opacity: 0.8;
filter: brightness(0.8) contrast(1.2);
transition: all 0.3s ease;
}

img:hover {
opacity: 1;
filter: none;
}
}

Cómo comprobar que funciona:

Al activar modo oscuro, deberías ver gradientes suaves en lugar de colores planos
El fondo principal debería tener un gradiente sutil de gris oscuro a más oscuro
Los encabezados deberían tener un gradiente horizontal
Al pasar el ratón por encima de elementos .card, .post, .widget deberían elevarse ligeramente (efecto hover)
En herramientas de desarrollador > Elements > busca body y deberías ver background: linear-gradient(...) en lugar de background-color

Consejos para implementar CSS personalizado

Empieza poco a poco: Comienza con el método básico de media queries. Puedes evolucionar a versiones más complejas cuando controles las previas.
Usa variables CSS: Facilitan enormemente futuros cambios; cambias un color en un sitio y se actualiza en toda la web.
Implementa por partes: No intentes cambiar todo de golpe. Empieza por elementos principales y ve añadiendo detalles.
Prueba en diferentes dispositivos: El modo oscuro puede verse diferente en móviles, tablets y ordenadores.
Vigila las imágenes: Las fotos y logos pueden necesitar ajustes específicos para verse bien en modo oscuro.
Respeta la accesibilidad: Mantén contrastes adecuados (mínimo 4.5:1) y asegúrate de que todos los elementos sean legibles.
Documenta tu código: Comenta las secciones importantes para recordar qué hace cada parte cuando vuelvas a editarlo.
Haz copias de seguridad: Guarda una copia del CSS previo antes de hacer cambios importantes.
Usa selectores específicos: El !important asegura que tu CSS se aplique sobre el del tema, pero úsalo con moderación.

Cuándo usar CSS personalizado

Eres desarrollador o tienes conocimientos técnicos y quieres control total sobre la implementación.
Necesitas comportamientos específicos que ningún plugin ofrece.
Tienes tiempo para desarrollar y mantener la solución a largo plazo.
Tu web tiene elementos muy específicos que requieren tratamiento especial en modo oscuro.
Quieres aprender cómo funcionan realmente las tripas del modo oscuro.
Buscas máximo rendimiento y quieres reducir al máximo los códigos necesarios.

Modo oscuro en WordPress con funciones de código PHP

Los fragmentos de código PHP, o funciones si lo prefieres por abreviar, te permiten añadir funcionalidades de modo oscuro directamente al código de tu WordPress.

Importante: Los códigos PHP se encargan de la lógica (detección de preferencias, guardado de datos, creación de botones), pero necesitas CSS adicional para que el modo oscuro sea visible. Puedes usar códigos CSS de las secciones anteriores o crear el tuyo propio.

Ventajas de usar código PHP

Máximo control técnico: Puedes crear funcionalidades exactamente como las necesitas, sin limitaciones de plugins o interfaces predefinidas.
Integración completa: Los códigos se ejecutan a nivel del core de WordPress, permitiendo modificaciones que los plugins no pueden hacer.
Personalización total: Desde la lógica de detección hasta el comportamiento de guardado, todo está bajo tu control.
Sin dependencias externas: Una vez implementado, el código es tuyo. No dependes de actualizaciones o cambios de terceros.
Eficiencia: Cargas solo el código que necesitas, sin funciones extra que ralenticen tu web.
Flexibilidad de datos: Puedes guardar preferencias en la base de datos, cookies, almacenamiento local, o donde prefieras.

Pero…

Conocimientos técnicos requeridos: Necesitas saber PHP, JavaScript y entender cómo funciona WordPress internamente.
Responsabilidad de mantenimiento: Eres responsable de mantener, actualizar y solucionar problemas del código.
Posibles errores críticos: Un código mal programado puede romper toda la web. Los plugins suelen tener más salvaguardas, pues están pensados para una compatibilidad amplia.
Pruebas exhaustivas: Debes probar en diferentes escenarios, temas y configuraciones para asegurar compatibilidad.
Curva de aprendizaje: Requiere tiempo para dominar hooks, filtros y la arquitectura de WordPress.

Código básico: detección de preferencias

Este código detecta las preferencias del usuario y añade clases CSS al body.

// Detectar preferencias de modo oscuro y añadir clases al body
function ayudawp_dark_mode_body_classes($classes) {
// Añadir clase base para indicar que el modo oscuro está disponible
$classes[] = 'dark-mode-ready';

// Detectar si hay preferencia guardada en cookie
$saved_preference = '';
if (isset($_COOKIE['ayudawp_dark_mode'])) {
$saved_preference = $_COOKIE['ayudawp_dark_mode'];
$classes[] = 'dark-mode-' . $saved_preference; // Añade 'dark-mode-dark' o 'dark-mode-light'
}

return $classes;
}
add_filter('body_class', 'ayudawp_dark_mode_body_classes');

// Añadir script para detección automática de preferencias del sistema
function ayudawp_dark_mode_detection() {
?>
<script>
// Detectar preferencias del sistema operativo
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('system-prefers-dark'); // CSS debe usar esta clase
}

// Escuchar cambios en las preferencias del sistema
if (window.matchMedia) {
window.matchMedia('(prefers-color-scheme: dark)').addListener(function(e) {
if (e.matches) {
document.body.classList.add('system-prefers-dark'); // CSS: aplica modo oscuro
document.body.classList.remove('system-prefers-light'); // CSS: quita modo claro
} else {
document.body.classList.add('system-prefers-light'); // CSS: aplica modo claro
document.body.classList.remove('system-prefers-dark'); // CSS: quita modo oscuro
}
});
}
</script>
<?php
}
add_action('wp_head', 'ayudawp_dark_mode_detection');

CSS necesario para este código:

Debes usar el CSS universal de la sección anterior, que funciona con las clases system-prefers-dark y las media queries @media (prefers-color-scheme: dark).

Cómo comprobar que funciona:

Ve a tu web y abre las herramientas de desarrollador (F12)
En la pestaña Elements o Elementos, busca la etiqueta <body>
Deberías ver las clases dark-mode-ready y si tienes modo oscuro en tu sistema operativo, también system-prefers-dark
Al cambiar las preferencias de tu sistema operativo, la clase debería cambiar automáticamente

Código intermedio: guardar preferencias en la base de datos

Para sitios con usuarios registrados, guarda las preferencias en el perfil.

// Añadir campo de modo oscuro al perfil del usuario
function ayudawp_dark_mode_profile_fields($user) {
$dark_mode_preference = get_user_meta($user->ID, 'dark_mode_preference', true);
?>
<h3><?php _e('Preferencias de visualización'); ?></h3>
<table class="form-table">
<tr>
<th><label for="dark_mode_preference"><?php _e('Modo oscuro'); ?></label></th>
<td>
<select name="dark_mode_preference" id="dark_mode_preference">
<option value="auto" <?php selected($dark_mode_preference, 'auto'); ?>><?php _e('Automático (según sistema)'); ?></option>
<option value="light" <?php selected($dark_mode_preference, 'light'); ?>><?php _e('Siempre claro'); ?></option>
<option value="dark" <?php selected($dark_mode_preference, 'dark'); ?>><?php _e('Siempre oscuro'); ?></option>
</select>
<p class="description"><?php _e('Elige cómo quieres ver el sitio web.'); ?></p>
</td>
</tr>
</table>
<?php
}
add_action('show_user_profile', 'ayudawp_dark_mode_profile_fields');
add_action('edit_user_profile', 'ayudawp_dark_mode_profile_fields');

// Guardar la preferencia del usuario
function ayudawp_save_dark_mode_preference($user_id) {
if (current_user_can('edit_user', $user_id)) {
update_user_meta($user_id, 'dark_mode_preference', $_POST['dark_mode_preference']);
}
}
add_action('personal_options_update', 'ayudawp_save_dark_mode_preference');
add_action('edit_user_profile_update', 'ayudawp_save_dark_mode_preference');

// Aplicar la preferencia del usuario en el frontend
function ayudawp_apply_user_dark_mode_preference() {
if (is_user_logged_in()) {
$user_id = get_current_user_id();
$preference = get_user_meta($user_id, 'dark_mode_preference', true);

if ($preference && $preference !== 'auto') {
// CSS debe usar data-user-theme="dark" o data-user-theme="light"
echo '<script>document.documentElement.setAttribute("data-user-theme", "' . $preference . '");</script>';
}
}
}
add_action('wp_head', 'ayudawp_apply_user_dark_mode_preference');

CSS necesario para este código:

Debes añadir reglas CSS que usen los atributos [data-user-theme="dark"] y [data-user-theme="light"] además del CSS universal para modo oscuro que vimos antes.

Cómo comprobar que funciona:

Ve a Usuarios > Tu Perfil en el admin de WordPress
Deberías ver una nueva sección «Preferencias de visualización» con el campo «Modo oscuro»
Cambia la opción y guarda
En la parte visible de la web abre las herramientas de desarrollador y busca data-user-theme en la etiqueta <html>
- El valor debería coincidir con tu selección

Código avanzado: sistema completo con selector (mi favorito)

El código más completo, prácticamente un plugin pero tuyo; incluye CSS, JavaScript y funcionalidad completa, incluido una ricura de selector manual:

/**
* Modo oscuro completo con estilos, detección, compatibilidad y selector manual
* (el bebé de Fernando)
**/
function ayudawp_complete_dark_mode_system() {
?>
<style>
/* Variables CSS base - solo definirlas, no aplicarlas automáticamente */
:root {
--ayudawp-bg-color: #ffffff;
--ayudawp-text-color: #333333;
--ayudawp-link-color: #0073aa;
--ayudawp-border-color: #e1e1e1;
--ayudawp-secondary-bg: #f8f9fa;
--ayudawp-heading-color: #2c3e50;
}

/* Variables para modo oscuro */
:root {
--ayudawp-dark-bg-color: #1a1a1a;
--ayudawp-dark-text-color: #e1e1e1;
--ayudawp-dark-link-color: #4f94cd;
--ayudawp-dark-border-color: #333333;
--ayudawp-dark-secondary-bg: #2d2d2d;
--ayudawp-dark-heading-color: #ffffff;
}

/* Solo aplicar cuando el sistema prefiere oscuro Y no hay override manual a claro */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* Aplicar estilos modo oscuro */
body, html {
background-color: var(--ayudawp-dark-bg-color) !important;
color: var(--ayudawp-dark-text-color) !important;
transition: all 0.3s ease;
}

div, section, article, header, footer, nav, main, aside {
background-color: var(--ayudawp-dark-bg-color) !important;
color: var(--ayudawp-dark-text-color) !important;
}

h1, h2, h3, h4, h5, h6 {
color: var(--ayudawp-dark-heading-color) !important;
}

a {
color: var(--ayudawp-dark-link-color) !important;
}

input, textarea, select {
background-color: var(--ayudawp-dark-secondary-bg) !important;
color: var(--ayudawp-dark-text-color) !important;
border-color: var(--ayudawp-dark-border-color) !important;
}

img {
opacity: 0.8;
filter: brightness(0.8) contrast(1.2);
transition: all 0.3s ease;
}

img:hover {
opacity: 1;
filter: none;
}
}
}

/* Solo aplicar cuando se fuerza manualmente el modo oscuro */
[data-theme="dark"] {
body, html {
background-color: var(--ayudawp-dark-bg-color) !important;
color: var(--ayudawp-dark-text-color) !important;
transition: all 0.3s ease;
}

div, section, article, header, footer, nav, main, aside {
background-color: var(--ayudawp-dark-bg-color) !important;
color: var(--ayudawp-dark-text-color) !important;
}

h1, h2, h3, h4, h5, h6 {
color: var(--ayudawp-dark-heading-color) !important;
}

a {
color: var(--ayudawp-dark-link-color) !important;
}

input, textarea, select {
background-color: var(--ayudawp-dark-secondary-bg) !important;
color: var(--ayudawp-dark-text-color) !important;
border-color: var(--ayudawp-dark-border-color) !important;
}

img {
opacity: 0.8;
filter: brightness(0.8) contrast(1.2);
}

img:hover {
opacity: 1;
filter: none;
}
}

/* Solo aplicar cuando se fuerza manualmente el modo claro */
[data-theme="light"] {
body, html {
background-color: var(--ayudawp-bg-color) !important;
color: var(--ayudawp-text-color) !important;
transition: all 0.3s ease;
}

div, section, article, header, footer, nav, main, aside {
background-color: var(--ayudawp-bg-color) !important;
color: var(--ayudawp-text-color) !important;
}

h1, h2, h3, h4, h5, h6 {
color: var(--ayudawp-heading-color) !important;
}

a {
color: var(--ayudawp-link-color) !important;
}

input, textarea, select {
background-color: var(--ayudawp-secondary-bg) !important;
color: var(--ayudawp-text-color) !important;
border-color: var(--ayudawp-border-color) !important;
}
}

/* Toggle slider - siempre visible */
.ayudawp-dark-toggle {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
cursor: pointer;
}

.ayudawp-toggle-track {
position: relative;
width: 60px;
height: 30px;
background: #ccc;
border-radius: 15px;
transition: all 0.3s ease;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.2);
border: 1px solid rgba(0,0,0,0.15);
}

.ayudawp-toggle-track.active {
background: #4f94cd;
border: 1px solid rgba(255,255,255,0.2);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 1px 3px rgba(255,255,255,0.1);
}

.ayudawp-toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
background: white;
border-radius: 50%;
transition: transform 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #333333;
}

.ayudawp-toggle-track.active .ayudawp-toggle-thumb {
transform: translateX(30px);
}

.ayudawp-dark-toggle:hover .ayudawp-toggle-track {
transform: scale(1.05);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
// Crear elementos del toggle
const toggleContainer = document.createElement('div');
toggleContainer.className = 'ayudawp-dark-toggle';

const toggleTrack = document.createElement('div');
toggleTrack.className = 'ayudawp-toggle-track';

const toggleThumb = document.createElement('div');
toggleThumb.className = 'ayudawp-toggle-thumb';
toggleThumb.innerHTML = '☽'; // Empezar con luna

toggleTrack.appendChild(toggleThumb);
toggleContainer.appendChild(toggleTrack);
document.body.appendChild(toggleContainer);

// Variables de estado
let currentTheme = localStorage.getItem('ayudawp-theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Función para actualizar la UI
function updateToggleUI(darkMode) {
if (darkMode) {
toggleTrack.classList.add('active');
toggleThumb.innerHTML = '☀';
document.documentElement.setAttribute('data-theme', 'dark');
} else {
toggleTrack.classList.remove('active');
toggleThumb.innerHTML = '☽';
if (currentTheme === 'light') {
document.documentElement.setAttribute('data-theme', 'light');
} else if (!currentTheme) {
document.documentElement.removeAttribute('data-theme');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
}

// Determinar estado inicial
let initialDarkMode;
if (currentTheme === 'dark') {
initialDarkMode = true;
} else if (currentTheme === 'light') {
initialDarkMode = false;
} else {
// Sin preferencia guardada, usar sistema
initialDarkMode = systemPrefersDark;
}

// Aplicar estado inicial
updateToggleUI(initialDarkMode);

// Click para cambiar modo
toggleContainer.addEventListener('click', function() {
const isCurrentlyDark = toggleTrack.classList.contains('active');
const newTheme = isCurrentlyDark ? 'light' : 'dark';

currentTheme = newTheme; // Actualizar variable local
localStorage.setItem('ayudawp-theme', newTheme);
updateToggleUI(!isCurrentlyDark);

// Evento personalizado
document.dispatchEvent(new CustomEvent('ayudawp-theme-changed', { 
detail: { theme: newTheme } 
}));
});

// Doble click para modo automático
toggleContainer.addEventListener('dblclick', function() {
currentTheme = null; // Actualizar variable local
localStorage.removeItem('ayudawp-theme');
updateToggleUI(systemPrefersDark);

// Feedback visual
toggleContainer.style.transform = 'scale(0.9)';
setTimeout(() => {
toggleContainer.style.transform = 'scale(1)';
}, 200);
});

// Escuchar cambios del sistema
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
if (!currentTheme) { // Solo si está en modo automático
updateToggleUI(e.matches);
}
});
});
</script>
<?php
}
add_action('wp_head', 'ayudawp_complete_dark_mode_system');

// Hook adicional para desarrolladores
function ayudawp_dark_mode_active() {
return isset($_COOKIE['ayudawp-theme']) ? $_COOKIE['ayudawp-theme'] : 'auto';
}

// Permitir que otros plugins/temas detecten el modo oscuro
add_action('wp_head', function() {
echo '<script>window.ayudawp_dark_mode = true;</script>';
});

Este código es autónomo:

Incluye todo el CSS necesario basado en el CSS universal que vimos en la sección anterior, usando las mismas variables CSS y selectores de máxima prioridad

Cómo comprobar que funciona:

Debería aparecer un selector deslizante horizontal en la esquina inferior derecha con luna ☽ o sol ☀ dentro del mismo.
Sin tocar el selector: La web mantiene los estilos originales del tema (solo cambia a oscuro si tu sistema operativo prefiere modo oscuro)
Al hacer clic una vez, cambia entre modo claro forzado (luna ☽ a la izquierda) y modo oscuro forzado (sol ☀ a la derecha)
Haz doble clic para volver al modo automático (respeta tema original + preferencias del sistema), el selector se anima brevemente
Las preferencias manuales se mantienen al recargar la página o navegar por el sitio
En herramientas de desarrollador, deberías ver data-theme="dark" o data-theme="light" en <html> solo cuando hay selección manual

Pero, sobre todo, mira qué monada. ¿No me dirás que no queda genial?

Código para tiendas online

Código con añadidos para WooCommerce:

// Modo oscuro específico para WooCommerce
function ayudawp_woocommerce_dark_mode_styles() {
if (class_exists('WooCommerce')) {
?>
<style>
/* WooCommerce en modo oscuro - se añade al CSS universal de secciones anteriores */
@media (prefers-color-scheme: dark) {
/* Productos y tablas - usar mismas variables que CSS universal */
.woocommerce .product,
.woocommerce-page .product,
.woocommerce .shop_table,
.woocommerce .cart-collaterals {
background-color: var(--secondary-bg, #2d2d2d) !important; /* CSS universal define esta variable */
color: var(--text-color, #e1e1e1) !important; /* CSS universal define esta variable */
}

/* Botones WooCommerce */
.woocommerce .button,
.woocommerce-page .button,
.woocommerce input.button {
background-color: var(--link-color, #4f94cd) !important; /* CSS universal define esta variable */
color: var(--bg-color, #1a1a1a) !important; /* CSS universal define esta variable */
}

/* Precios */
.woocommerce .price,
.woocommerce-page .price {
color: var(--heading-color, #ffffff) !important; /* CSS universal define esta variable */
}
}

/* También aplicar cuando se activa manualmente con data-theme="dark" */
[data-theme="dark"] .woocommerce .product,
[data-theme="dark"] .woocommerce-page .product,
[data-theme="dark"] .woocommerce .shop_table {
background-color: var(--secondary-bg, #2d2d2d) !important; /* Coincide con código avanzado */
color: var(--text-color, #e1e1e1) !important;
}

[data-theme="dark"] .woocommerce .button,
[data-theme="dark"] .woocommerce input.button {
background-color: var(--link-color, #4f94cd) !important; /* Coincide con código avanzado */
color: var(--bg-color, #1a1a1a) !important;
}
</style>
<?php
}
}
add_action('wp_head', 'ayudawp_woocommerce_dark_mode_styles');

CSS necesario para este código:

Debes usar primero el CSS universal de la sección anterior (que define las variables CSS como --secondary-bg, --text-color, etc.) y después añadir este código para WooCommerce. Las variables CSS se reutilizarán automáticamente.

Cómo comprobar que funciona:

Ve a cualquier página de producto, carrito o pago de tu tienda
Activa el modo oscuro (con tu sistema operativo o el selector si tienes el código completo)
Los productos, tablas y botones de WooCommerce deberían adaptarse al modo oscuro
Los precios deberían ser legibles con colores contrastados

Cómo añadirlo a otros códigos:

// AÑADIR al final de cualquier código anterior (antes del ?>)

// Modo oscuro específico para WooCommerce 
function ayudawp_woocommerce_dark_mode_styles() {
if (class_exists('WooCommerce')) {
// [aquí va todo el código CSS del código WooCommerce]
}
}
add_action('wp_head', 'ayudawp_woocommerce_dark_mode_styles');

Simplemente copia el código del código WooCommerce y pégalo al final de cualquier otro código que estés usando. Las variables CSS se reutilizarán automáticamente.

Consejos para implementar los códigos PHP

Empieza con códigos simples: Comienza con detección básica y ve añadiendo complejidad gradualmente.
Usa prefijos consistentes: Siempre prefija tus funciones con algo único (ayudawp_) para evitar conflictos.
Prueba exhaustivamente: Prueba cada código en un entorno de desarrollo antes de subirlo a producción.
Documenta tu código: Comenta qué hace cada función para futuras modificaciones.
Implementa safeguards: Usa if (function_exists()) o similar para evitar conflictos.
Vigila la compatibilidad: Asegúrate de que funcione con diferentes temas y plugins.

Cuándo usar los códigos PHP

Tienes conocimientos sólidos de PHP y desarrollo de WordPress.
Necesitas funcionalidades muy específicas que ningún plugin ofrece.
Quieres integración profunda con el sistema de usuarios o base de datos.
Buscas máximo control sobre cada aspecto del comportamiento.
Planeas reutilizar el código en múltiples proyectos.
Necesitas que la funcionalidad sobreviva a cambios de temas o plugins.

Cómo implementar los códigos PHP

Hay muchas maneras de añadirlos, todas explicadas en el tutorial de cómo añadir códigos a WordPress, pero en este caso concreto mis recomendados serían, en este orden:

Plugin personalizado: Lo activas o desactivas cuando quieres, es exportable a otras webs, controlas su ejecución y puedes hacer tus propias versiones distinguibles.
Plugin de snippets: Lo más sencillo, activas o desactivas a voluntad. La parte mala es que por naturaleza estos plugins son inseguros.

Enfoque mixto: Plugin + CSS personalizado

A veces la solución perfecta no está en elegir una sola opción, sino en combinar lo mejor de dos mundos. El enfoque mixto usa un plugin como base y añade personalización específica para tu web.

Ventajas del enfoque mixto

Lo mejor de ambos mundos: Aprovechas la comodidad y funcionalidades de un plugin, pero mantienes control total sobre la apariencia visual.
Implementación rápida: El plugin se encarga de la lógica compleja (selector, detección de preferencias, guardado de datos), mientras tú te centras solo en el diseño.
Personalización sin límites: No estás limitado a los colores y estilos predefinidos del plugin. Puedes crear la estética exacta que necesitas.
Mantenimiento razonable: El plugin se actualiza automáticamente para compatibilidad, mientras que tu CSS personalizado permanece estable.
A prueba de fallos: Si tu CSS tiene algún problema, el plugin mantiene la funcionalidad básica funcionando.
Escalabilidad: Puedes empezar simple e ir añadiendo CSS personalizado gradualmente según tus necesidades.

Inconvenientes a considerar

Doble dependencia: Dependes tanto del plugin como de mantener tu CSS personalizado actualizado.
Posibles conflictos: El CSS del plugin y el tuyo pueden entrar en conflicto, requiriendo ajustes específicos.
Complejidad añadida: Tienes que entender tanto cómo funciona el plugin como gestionar tu CSS personalizado.
Depuración más compleja: Cuando algo no funciona, puede ser culpa del plugin, de tu CSS, o de la interacción entre ambos.
Actualizaciones delicadas: Las actualizaciones del plugin pueden afectar a tu CSS personalizado.

Cuándo usar el enfoque mixto

Quieres funcionalidad avanzada rápidamente pero con diseño totalmente personalizado.
Tienes conocimientos de CSS pero no quieres programar toda la lógica de JavaScript y PHP.
Necesitas características específicas de un plugin (como estadísticas, horarios programados, integración con usuarios) pero no te gusta su apariencia.
Trabajas en un proyecto con tiempo o presupuesto ajustado y necesitas encontrar un equilibrio entre velocidad de implementación, coste y personalización.
Tu web tiene elementos muy específicos que requieren estilos personalizados, pero quieres la robustez y actualizaciones de un plugin establecido.

Cuándo NO usar el enfoque mixto

Si eres principiante total: Mejor usa solo un plugin hasta ganar experiencia.
Si el plugin hace exactamente lo que necesitas: No añadas complejidad innecesaria.
Si no tienes tiempo para mantenimiento: El enfoque mixto requiere más atención.
Si tu web es muy simple: Para sitios básicos un plugin solo es suficiente.

WP Dark Mode + CSS personalizado básico

La combinación más recomendable, con todo lo que ofrece este genial plugin pero añadiendo toques de estilo personalizados sin tener que pagar por la versión premium.

Configuración del plugin base

Instalar WP Dark Mode desde el repositorio de WordPress
Configuración mínima:
- Activar «Enable Frontend Dark Mode»
- Activar «Enable OS Aware Dark Mode»
- Elegir posición base del selector
Dejar el resto por defecto – nos encargaremos de la personalización con CSS.

CSS personalizado para sobreescribir completamente los estilos

Dónde añadirlo: Apariencia > Personalizar > CSS adicional

/* Sobreescribir completamente los estilos del plugin con el CSS universal */

/* Variables CSS - iguales a las de la sección CSS universal */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --link-color: #0073aa;
  --border-color: #e1e1e1;
  --secondary-bg: #f8f9fa;
  --heading-color: #2c3e50;
}

/* El plugin añade .wp-dark-mode-active al body cuando está activo */
.wp-dark-mode-active {
  --bg-color: #1a1a1a !important;
  --text-color: #e1e1e1 !important;
  --link-color: #4f94cd !important;
  --border-color: #333333 !important;
  --secondary-bg: #2d2d2d !important;
  --heading-color: #ffffff !important;
}

/* También respetar preferencias del sistema cuando no hay clase del plugin */
@media (prefers-color-scheme: dark) {
  :root:not(.wp-dark-mode-active) {
    --bg-color: #1a1a1a;
    --text-color: #e1e1e1;
    --link-color: #4f94cd;
    --border-color: #333333;
    --secondary-bg: #2d2d2d;
    --heading-color: #ffffff;
  }
}

/* Aplicar estilos con máxima prioridad - igual que CSS universal */
body, html {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Fuerza bruta para elementos estructurales */
div, section, article, header, footer, nav, main, aside {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

a { color: var(--link-color) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--heading-color) !important; }

input, textarea, select {
  background-color: var(--secondary-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* Personalizar el selector del plugin si quieres */
.wp-dark-mode-switcher {
  /* Mantener funcionalidad pero cambiar apariencia */
  background: var(--link-color) !important;
  border-radius: 25px !important;
  padding: 8px 15px !important;
}

Cómo comprobar que funciona:

El plugin debería funcionar normalmente (se ve el selector y cambia la web)
Pero los colores deberían seguir tu paleta personalizada en lugar de los del plugin
En herramientas de desarrollador, el <body> debería tener la clase wp-dark-mode-active cuando el modo oscuro esté activo
Las variables CSS deberían cambiar según el estado del plugin

Dark Mode Toggle + función PHP personalizada

Para máximo control con implementación sencilla:

Configuración del plugin base

Instalar Dark Mode Toggle (el más ligero)
Configuración mínima:
- Posición del selector
- Activar «Save user’s choice»
- Todo lo demás por defecto

Código PHP que aprovecha el plugin pero añade funcionalidad propia

Dónde añadir: Archivo functions.php del tema hijo o plugin de snippets

function ayudawp_enhanced_dark_mode_with_plugin() {
    ?>
    <style>
    /* Variables CSS base */
    :root {
      --bg-color: #ffffff;
      --text-color: #333333;
      --link-color: #0073aa;
      --border-color: #e1e1e1;
      --secondary-bg: #f8f9fa;
      --heading-color: #2c3e50;
    }

    /* El plugin Dark Mode Toggle añade .dark-mode al body */
    body.dark-mode {
      --bg-color: #1a1a1a !important;
      --text-color: #e1e1e1 !important;
      --link-color: #4f94cd !important;
      --border-color: #333333 !important;
      --secondary-bg: #2d2d2d !important;
      --heading-color: #ffffff !important;
    }

    /* Preferencias del sistema cuando no hay clase del plugin */
    @media (prefers-color-scheme: dark) {
      :root:not(.dark-mode) {
        --bg-color: #1a1a1a;
        --text-color: #e1e1e1;
        --link-color: #4f94cd;
        --border-color: #333333;
        --secondary-bg: #2d2d2d;
        --heading-color: #ffffff;
      }
    }

    /* Aplicar estilos - igual que CSS universal */
    body, html {
      background-color: var(--bg-color) !important;
      color: var(--text-color) !important;
      transition: all 0.3s ease;
    }

    div, section, article, header, footer, nav, main, aside {
      background-color: var(--bg-color) !important;
      color: var(--text-color) !important;
    }

    a { color: var(--link-color) !important; }
    h1, h2, h3, h4, h5, h6 { color: var(--heading-color) !important; }

    input, textarea, select {
      background-color: var(--secondary-bg) !important;
      color: var(--text-color) !important;
      border-color: var(--border-color) !important;
    }

    /* Personalizar elementos específicos de tu tema */
    .hero-section {
      background: linear-gradient(135deg, var(--bg-color) 0%, var(--secondary-bg) 100%) !important;
    }

    .card, .post-item {
      background: var(--secondary-bg) !important;
      border: 1px solid var(--border-color) !important;
    }
    </style>

    <script>
    // Añadir funcionalidad extra que aprovecha el plugin
    document.addEventListener('DOMContentLoaded', function() {
      // Detectar cuando el plugin cambia el modo
      const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
            const isDarkMode = document.body.classList.contains('dark-mode');
            
            // Funcionalidad adicional cuando cambia el modo
            if (isDarkMode) {
              console.log('Modo oscuro activado');
              // Aquí puedes añadir lógica extra: cambiar imágenes, cargar recursos específicos, etc.
            } else {
              console.log('Modo claro activado');
            }
            
            // Enviar evento personalizado para otros scripts
            const event = new CustomEvent('theme-changed', { 
              detail: { isDark: isDarkMode } 
            });
            document.dispatchEvent(event);
          }
        });
      });
      
      observer.observe(document.body, { attributes: true });
    });
    </script>
    <?php
}
add_action('wp_head', 'ayudawp_enhanced_dark_mode_with_plugin');

Cómo comprobar que funciona:

El selector del plugin debería funcionar normalmente
Los colores deberían seguir tu paleta personalizada
En la consola del navegador deberías ver «Modo oscuro activado/desactivado» al cambiar
El <body> debería tener la clase dark-mode cuando esté activo
Tu CSS personalizado debería aplicarse por encima del plugin

Consejos para el enfoque mixto

Empieza con el plugin por sí solo: Instala y configura primero Dark Mode Toggle. Asegúrate de que funciona antes de añadir personalización.
Usa inspector de elementos: Las herramientas para desarrolladores del navegador son cruciales para ver qué clases añade el plugin y cómo interactúa con tu CSS.
Aprovecha las variables CSS: Como todos nuestros ejemplos usan las mismas variables, puedes combinar fácilmente código de diferentes secciones.
Prueba después de actualizaciones: Siempre verifica que tu personalización sigue funcionando después de actualizar el plugin.
Guarda backups del código: Guarda tu CSS/PHP personalizado por separado por si necesitas reinstalar el plugin.
Documenta las dependencias: Anota qué plugin y versión estás usando para futuras referencias.

Cuándo usar cada método

WP Dark Mode + CSS cuando:

Necesitas funcionalidades avanzadas del plugin (estadísticas, programación horaria, etc.)
Quieres personalización visual total.
Trabajas en sitios comerciales o profesionales.
Tienes conocimientos suficientes de CSS.

Dark Mode Toggle + PHP cuando:

Prefieres máximo control sobre el código.
Quieres funcionalidades específicas que ningún plugin ofrece.
Te importa más el rendimiento que las funciones avanzadas.
Tienes conocimientos de PHP, JavaScript y WordPress.

Implementación paso a paso

Instala el plugin elegido y configúralo básicamente
Prueba que funcione correctamente en su versión básica
Añade tu código personalizado (CSS o función PHP)
Prueba la combinación en diferentes páginas
Arregla conflictos de CSS si los encuentras
Haz pruebas exhaustivas antes de usarlo en producción

El enfoque mixto es perfecto para usuarios que quieren tener un pie en la comodidad de los plugins y otro en la libertad del código personalizado. Te da lo mejor de ambos mundos sin la complejidad de desarrollar todo desde cero.

Conclusiones y (mis) consejos finales

¿No crees que después de ver todas las opciones disponibles para implementar el modo oscuro en WordPress ya va tocando decidir cuál es la mejor para tu caso específico?

Pero tengo una mala o – según se mire – buena noticia, y es que no existe una solución única que funcione para todos, pero sí te puedo hacer alguna recomendación según tu perfil y necesidades.

Qué método usar para añadir el modo oscuro según tu perfil de usuario

Principiante total

Recomendación: Plugin especializado: WP Dark Mode.

Instalación inmediata sin conocimientos técnicos.
Funciona con cualquier tema automáticamente.
Soporte técnico disponible si algo falla.
Versión gratuita suficiente para la mayoría de casos.

Conocimientos básicos de CSS

Recomendación: CSS universal de modo oscuro.

Control sobre la apariencia sin complejidad excesiva.
Respeta las preferencias del sistema operativo.
No dependes de plugins externos.
Aprendes cómo funciona realmente el modo oscuro.

Desarrolladores y usuarios avanzados

Recomendación: Funciones PHP o CSS personalizado.

Máximo control sobre funcionalidad y apariencia.
Personalización sin límites.
Integración profunda con WordPress.
Solución profesional y escalable.

Sitios comerciales y profesionales

Recomendación: Enfoque mixto (Plugin + CSS personalizado).

Combina facilidad de uso con personalización.
Funcionalidad robusta del plugin + diseño único.
Balance perfecto entre tiempo de desarrollo y resultado.
Soporte profesional del plugin como respaldo.

Tiendas online (WooCommerce)

Recomendación: Plugin especializado + CSS específico para e-commerce

Compatibilidad garantizada con WooCommerce
Pruebas exhaustivas en páginas de producto y checkout
Funcionalidades avanzadas como modo oscuro programado
CSS adicional para elementos específicos de la tienda

Tabla comparativa de todos los métodos

Método	Dificultad	Tiempo	Personalización	Mantenimiento	Rendimiento	Coste	Recomendado para
Plugin WP Dark Mode	★☆☆☆☆	5 min	★★★☆☆	★★★★★	★★★★☆	Gratis – 79 €	Principiantes
Plugin Dracula Dark	★☆☆☆☆	5 min	★★☆☆☆	★★★★☆	★★★★★	Gratis – 49 €	Usuarios que buscan automatización
Plugin Dark Mode Toggle	★☆☆☆☆	3 min	★☆☆☆☆	★★★★☆	★★★★★	Gratis – 39 €	Sitios sencillos
CSS universal	★★☆☆☆	30 min	★★★★☆	★★★☆☆	★★★★★	Gratis	Aprendizaje, sitios personales
Código PHP básico	★★★☆☆	1 hora	★★★★☆	★★☆☆☆	★★★★★	Gratis	Usuarios técnicos, funciones específicas
Código PHP avanzado	★★★★☆	2 horas	★★★★★	★★☆☆☆	★★★★★	Gratis	Desarrolladores, proyectos complejos
Mixto (plugin + CSS)	★★☆☆☆	1 hora	★★★★★	★★★☆☆	★★★★☆	Plugin + tiempo	Sitios profesionales

Qué método elegir según el tipo de proyecto

Blog personal o porfolio creativo

Primera opción: CSS personalizado con gradientes y efectos.
Alternativa: Plugin simple (Dark Mode Toggle) + CSS para personalizar.
Por qué: Permite expresar tu personalidad creativa sin limitaciones.

Web corporativa o empresa

Primera opción: WP Dark Mode Pro + CSS personalizado para branding.
Alternativa: Enfoque mixto con colores corporativos.
Por qué: Equilibrio entre profesionalidad, soporte técnico y personalización.

Tienda online (e-commerce)

Primera opción: WP Dark Mode + CSS específico para WooCommerce.
Alternativa: Códigos PHP con integración completa de e-commerce.
Por qué: Funcionalidades específicas para ventas y compatibilidad garantizada.

Web de alto tráfico

Primera opción: CSS puro con variables + código mínimo.
Alternativa: Dark Mode Toggle (el más ligero).
Por qué: Máximo rendimiento, mínimo impacto en velocidad de carga.

Sitio multiidioma o internacional

Primera opción: Funciones PHP con integración de usuarios.
Alternativa: WP Dark Mode Pro con configuración por usuario.
Por qué: Gestión de preferencias por usuario registrado.

Proyecto con tiempo o presupuesto ajustado

Primera opción: Plugin WP Dark Mode (configuración básica).
Alternativa: CSS universal.
Por qué: Implementación rápida con resultado funcional garantizado.

No me aclaro ¿más cosas a tener en cuenta a la hora de elegir?

Nivel técnico, pero sé sincero

Principiante: Tira a por plugins, evita códigos personalizados.
Intermedio: CSS personalizado, es perfecto para aprender.
Avanzado: Funciones PHP, pues te dan control total.

Tiempo disponible

Poco tiempo: Plugin + ajustes mínimos.
Tiempo moderado: CSS personalizado o mixto.
Tiempo abundante: Desarrollo completo con código.

Mantenimiento futuro

No quieres tocar nada más: Plugin con soporte activo.
Te gusta trastear: CSS o funciones que puedas modificar.
Tienes desarrollador: Solución personalizada mantenida profesionalmente.

Necesidades de personalización

Básicas: Plugin estándar suficiente.
Moderadas: Plugin + CSS personalizado.
Específicas: Desarrollo personalizado prácticamente obligatorio.

Errores comunes que debes evitar

No probarlo en diferentes dispositivos: El modo oscuro puede verse muy diferente en móviles vs desktop.
Ignorar la accesibilidad: Contraste insuficiente puede hacer tu web ilegible para usuarios con problemas visuales.
Complicarlo en exceso desde el inicio: Empieza simple y ve añadiendo complejidad gradualmente.
No considerar las imágenes: Las fotos pueden necesitar ajustes específicos en modo oscuro.
No hacer backup antes: Siempre haz copia de seguridad antes de añadir código personalizado.
Mezclar múltiples plugins: Usar varios plugins de modo oscuro a la vez causa conflictos.
No documentar los cambios: Si personalizas código, documenta qué hace cada parte.

Mi recomendación final

Para la mayoría de usuarios, el enfoque mixto con WP Dark Mode + CSS personalizado ofrece el mejor equilibrio entre facilidad de uso, personalización y mantenimiento, pues te permite:

Implementar rápidamente una solución funcional.
Personalizar gradualmente según tus necesidades.
Tener soporte técnico como respaldo
Mantener control sobre el diseño visual.
Escalar la solución con el tiempo.

Para casos específicos:

Si eres principiante total: WP Dark Mode solo, sin personalizaciones.
Si eres desarrollador: Códigos PHP completos para máximo control.
Si tienes presupuesto limitado: CSS personalizado puro.
Si tienes una tienda: WP Dark Mode + CSS específico para WooCommerce.

Deja de leer y ponte ya con ello

Una vez que hayas elegido tu método:

Monta un entorno de pruebas antes de hacer pruebas en tu web real.
Haz pruebas exhaustivas en diferentes dispositivos y navegadores.
Pide opiniones de usuarios reales antes del lanzamiento final.
Revisa métricas como tiempo en página y tasa de rebote tras la implementación.
Actualiza y mejora basándote en el comportamiento real de los usuarios.

El modo oscuro no es solo una moda, es una mejora real de la experiencia de usuario cuando se implementa correctamente. Solo espero que con la información de esta guía te animes ya con ello, aquí tienes todas las herramientas para hacerlo bien desde el primer intento.