Dark mode para sitios personales: ¿conviene? Sí, si lo ofreces como opción y respetas la preferencia del dispositivo; activarlo por defecto puede restar comodidad a parte de tus visitas. La alternativa más segura es un ajuste sencillo que no añada código pesado ni perjudique los colores, el contraste o las conversiones.
✉
¿Quieres más información? Escríbenos y te orientamos
Decide según tu web, no por una moda
El tema oscuro aporta más a un portfolio visual que a un CV online o un blog de lectura larga, donde suele ganar el tema claro.
Portfolio visual: cuándo encaja bien
Un portfolio de fotografía, vídeo, desarrollo o diseño puede beneficiarse de una paleta oscura si hace destacar proyectos con mucho negro, color o luz. Aun así, revisa cada captura, logo y foto con transparencia, porque un borde que se veía sobre blanco puede desaparecer sobre un fondo oscuro.
Blogs y CV: la lectura manda
Un CV online también debe priorizar una lectura rápida. Un reclutador puede abrirlo desde un móvil, imprimirlo o verlo bajo una luz intensa, así que disponer de un diseño claro evita una barrera innecesaria.
Tipo de web Lectura habitual Opción aconsejada Prioridad de revisión
Portfolio [visual](https://wordpressplugins.es/accesibilidad-visual-sin-codigo/) Entre 1 y 3 minutos Claro y oscuro con selector Fotos, logos y galerías Blog personal Entre 5 y 15 minutos Claro por defecto, oscuro opcional Texto, enlaces y código CV online Entre 30 y 90 segundos Claro por defecto con opción Datos, PDF y formularios Marca personal Entre 2 y 8 minutos Según identidad y pruebas Botones y páginas de venta
Un sitio diseñado solo con modo oscuro puede funcionar en un portfolio visual de fotografía nocturna, música, videojuegos o desarrollo, cuando esa estética forma parte central de la marca. Sin embargo, es la alternativa menos flexible para un blog personal, un CV online o páginas con lectura prolongada: bajo mucha luz ambiental, parte del texto y de los controles puede resultar más difícil de consultar. El tema oscuro exclusivo tampoco respeta la preferencia de color del sistema de quien utiliza siempre una interfaz clara.
Por eso, salvo que la identidad visual lo justifique y se haya probado con usuarios reales, conviene ofrecer ambos temas mediante un selector o seguir la preferencia del sistema.
Selector y detección automática: la opción más segura
La combinación más equilibrada es aplicar prefers-color-scheme , una regla CSS que lee la preferencia de color del dispositivo, y dejar un selector para cambiarla.
Una regla CSS con prefers-color-scheme puede mostrar el diseño oscuro de forma automática. Para guardar la elección manual, normalmente hace falta un pequeño JavaScript o un plugin que almacene ese ajuste en el navegador.
Cómo elegir el comportamiento del tema
1. Automático
2. Selector visible
3. Preferencia guardada
La ruta recomendada: automático al entrar, selector accesible y preferencia guardada al elegir.
El selector debe poder encontrarse
Coloca el selector en la cabecera, dentro del menú o cerca del pie, pero siempre en la misma zona. Debe indicar con texto qué cambia, no solo con un icono de luna, y mostrar un borde de foco al navegar con teclado.
Si usas WordPress, revisa primero si tu tema ya incluye esta función antes de instalar un complemento adicional.
🎯
Útil para este tema
Un libro práctico sobre plugins de WordPress puede ayudarte a reconocer cuándo un ajuste ya existe en tu tema. Evitar un plugin duplicado reduce pruebas y posibles choques entre funciones.
Ayuda a comprobar si tu tema ya cubre colores globales o ajustes visuales
Facilita comparar plugins antes de añadir código extra a WordPress
Sirve como apoyo para hacer una copia de seguridad antes de cambiar el diseño
Encontrar en Amazon →
No necesitas un plugin para crear un tema oscuro ligero si tu plantilla permite añadir CSS y JavaScript propio. Define los colores principales como variables CSS, por ejemplo --fondo, --texto, --enlace y --borde, y cambia sus valores dentro de una consulta @media (prefers-color-scheme: dark). Así evitas duplicar reglas para cada bloque y mantienes un diseño web accesible más fácil de revisar. Cuando la persona use el selector, una clase como data-theme="dark" en el elemento html puede tener prioridad sobre la detección automática; guarda esa decisión como preferencia en localStorage para mantenerla al navegar entre páginas.
Comprueba también que el tema claro siga siendo la alternativa cuando el sistema no indique una preferencia.
Accesibilidad WCAG: oscuro no es invertir colores
Un tema oscuro correcto mantiene contraste, jerarquía visual y controles reconocibles en ambos modos, y las WCAG del W3C recomiendan un contraste mínimo de 4,5:1 para texto normal y 3:1 para texto grande.
Contraste y estados que suelen fallar
No uses negro #000000 con blanco #FFFFFF como solución rápida. Los grises muy oscuros y los blancos suavizados suelen dar una lectura menos agresiva, siempre que el contraste siga siendo suficiente.
Revisión antes de publicar
Revisa formularios, tablas, bloques de código, comentarios y buscadores. Comprueba también vídeos de YouTube, mapas, calendarios, iframes, chats, iconos SVG, logos, capturas e imágenes con fondo transparente.
✉
¿Quieres más información? Escríbenos y te orientamos
Plugins y rendimiento: evita costes ocultos
Un plugin de modo oscuro merece la pena solo si tu tema no ofrece la función y el plugin carga poco código, respeta la caché y no altera contenido externo.
CSS propio o plugin de WordPress
Un plugin es más sencillo para quien empieza, pero prueba primero en una copia de pruebas o después de hacer una copia de seguridad. Comprueba la compatibilidad con tu tema, constructor, caché y plugins de formularios antes de activarlo en la web pública.
Mide antes de decidir que funciona
Mide durante entre 2 y 4 semanas cuántas personas pulsan el selector y compara contactos, clics importantes y tiempo de lectura. Si menos de un pequeño grupo lo usa, no significa que haya fallado, pero indica que no debe ocupar tiempo antes que corregir navegación o velocidad.
No es prioritario añadir esta función si tu web aún carga lenta, tiene una navegación confusa, contenido débil, fallos de seguridad o un formulario que no convierte. Tampoco conviene si no puedes revisar el diseño completo en ambos temas, si tu identidad visual depende de colores difíciles de adaptar o si el plugin entra en conflicto con el tema y otros plugins.
El dark mode no es una señal directa de posicionamiento: Google no mejora el SEO de una página por usarlo. Su efecto depende de la ejecución. Si el navegador muestra primero un tema claro y cambia bruscamente a oscuro después de cargar JavaScript, puede aparecer un destello visual y aumentar el desplazamiento de elementos, algo que conviene vigilar en Core Web Vitals, especialmente CLS. Cargar dos bibliotecas de estilos completas, imágenes alternativas innecesarias o un plugin pesado también puede afectar la velocidad de carga.
Además de contactos y tiempo de lectura, compara por tema el uso del selector, la tasa de interacción, el rebote, conversiones y comentarios cualitativos; una preferencia elegida pocas veces puede ser normal, pero errores repetidos en formularios web o navegación requieren corrección.
Preguntas frecuentes
¿Me conviene activar modo oscuro en mi blog?
Sí, como opción, si revisas textos, enlaces y bloques de código en los dos modos. En un blog con lecturas de entre 5 y 15 minutos, el claro debería seguir disponible aunque prefieras una estética oscura.
¿El modo oscuro mejora el SEO de WordPress?
No, Google no posiciona una página mejor solo por tener tema oscuro. Puede ayudar de forma indirecta si evita abandono y no añade retrasos, destellos o problemas de lectura.
¿Necesito un plugin para poner modo oscuro?
No siempre, porque muchos temas y constructores ya permiten colores globales o CSS personalizado. Instala un plugin solo si compruebas que es compatible con tu tema, caché y formularios.
¿Cómo guardo la elección del visitante?
Puedes guardar la elección con JavaScript en el navegador o mediante un plugin que tenga esa función. El ajuste debe mantenerse al cambiar de página y no necesita recoger datos personales para funcionar.
¿El modo oscuro ahorra batería en todos los dispositivos?
No, el posible ahorro se nota sobre todo en pantallas OLED cuando se muestran zonas muy oscuras. En pantallas LCD el motivo principal debe ser comodidad visual, no batería.
Qué hacer ahora en tu web personal
Empieza por comprobar si tu tema de WordPress ya trae un selector o colores globales. Si no lo hace, crea un modo oscuro opcional con detección automática, guarda la preferencia y valida cada página importante antes de instalar un plugin.
La recomendación práctica es clara: usa claro y oscuro en portfolios con peso visual, mantén el claro como base en blogs y CV, y no conviertas una mejora estética en una fuente de errores.
