Tu app o web tiene dark mode. O lo estás planteando. Y en algún punto del proceso alguien pregunta: ¿cómo se hace bien? Porque implementar dark mode no es cambiar los fondos de blanco a negro y los textos de negro a blanco. El resultado de eso se ve mal, cansa la vista y tiene problemas de accesibilidad que son peores que no tener dark mode.
Implementar dark mode bien requiere decisiones de diseño y técnicas que van más allá de la inversión de colores. Y hay criterios concretos — tanto de diseño como de código — que marcan la diferencia entre un dark mode que funciona y uno que hace que el usuario prefiera el modo claro.
En este post: qué hay que tener en cuenta para implementar dark mode de forma que realmente mejore la experiencia, con criterios técnicos y de diseño que se pueden aplicar desde el inicio del proyecto o en un proyecto ya existente.
Por qué el dark mode mal implementado es peor que no tenerlo
La implementación simplista de dark mode — invertir todos los colores, o poner un fondo negro y texto blanco — tiene problemas reales. El texto blanco sobre negro puro (#FFFFFF sobre #000000) tiene un contraste tan alto que genera halos visuales y fatiga ocular, especialmente en entornos con poca luz. Las imágenes con fondo transparente diseñadas para modo claro quedan con halos blancos en modo oscuro. Los colores de marca que funcionan sobre blanco pierden legibilidad o vibran sobre fondos oscuros.
Un dark mode bien implementado no es un tema oscuro — es un sistema de color paralelo diseñado específicamente para entornos de poca luz.
Criterios de diseño para un dark mode que funciona
Criterio 1 — Evitar el negro puro como fondo
Los sistemas de diseño de referencia — Material Design de Google, Human Interface Guidelines de Apple — usan fondos oscuros que no son negro puro. El fondo base de dark mode en Material Design es #121212, no #000000. La razón: el negro puro genera un contraste tan alto con el texto blanco que produce el efecto «bleeding» (halos de luz alrededor de los caracteres) en condiciones de poca luz, que es exactamente cuando más se usa el dark mode.
El rango recomendado para fondos en dark mode: #0D0D0D a #1E1E1E. Para superficies elevadas (cards, modales, dropdowns): ligeramente más claro que el fondo, no con sombras (que no se ven bien en modo oscuro) sino con diferencia de valor de color.
Criterio 2 — Sistema de elevación por valor de color, no por sombras
En modo claro, la jerarquía visual entre fondo y elementos se consigue con sombras. En modo oscuro, las sombras apenas son visibles. La solución es usar un sistema de elevación por valor de color: los elementos que están «más arriba» en la jerarquía visual tienen un valor de gris ligeramente más claro. Fondo: #121212, primera capa de superficie: #1E1E1E, segunda capa (modal, drawer): #242424. Esta gradación crea profundidad sin necesidad de sombras.
Criterio 3 — Los colores de marca necesitan variantes de dark mode
Un color de acento que funciona sobre fondo blanco raramente funciona igual sobre fondo oscuro. Los colores saturados y brillantes que son vibrantes en modo claro pueden resultar agresivos o perder legibilidad en modo oscuro. En el sistema de diseño hay que definir variantes de dark mode para los colores de marca — normalmente versiones menos saturadas o con más luminosidad — no simplemente usar los mismos valores.
Criterios técnicos de implementación
Tip técnico: implementación con CSS custom properties y prefers-color-scheme
La forma correcta de implementar dark mode en CSS es con custom properties (variables CSS) y la media query `prefers-color-scheme`. Define las variables de color en `:root` para el modo claro y sobreescríbelas dentro de `@media (prefers-color-scheme: dark)`. Así el sistema respeta automáticamente la preferencia del sistema operativo del usuario sin JavaScript. Para apps que permiten al usuario elegir independientemente de la preferencia del sistema, añade una clase `.dark` al elemento `` con las mismas variables sobreescritas — y gestiona el toggle con JavaScript. Este enfoque es el más performante porque el CSS se aplica sin FOUC (flash of unstyled content) y sin dependencia de JavaScript para el estado inicial.
Dark mode en imágenes y contenido generado
Las imágenes son el elemento más problemático en dark mode. Una imagen con fondo blanco diseñada para modo claro tiene un halo brillante sobre el fondo oscuro del dark mode. Las soluciones técnicas:
Accesibilidad en dark mode: los criterios que no se pueden ignorar
Dark mode y accesibilidad son inseparables. El contraste mínimo de texto sobre fondo según WCAG 2.1 AA es 4,5:1 para texto normal. Muchas implementaciones de dark mode fallan este criterio porque usan grises de texto demasiado oscuros o fondos demasiado claros que reducen el contraste por debajo del mínimo.
La herramienta más útil para verificarlo: Chrome DevTools tiene un inspector de contraste integrado que muestra en tiempo real si la combinación de color de texto y fondo cumple WCAG. En proyectos de diseño UX/UI, incluimos la verificación de contraste en dark mode como parte del sistema de diseño — no como una comprobación final.
Cuándo implementar dark mode y cuándo no es prioritario
Dark mode tiene sentido en apps y webs que los usuarios usan con frecuencia y en distintas condiciones de luz. Apps de productividad, lectores de contenido, dashboards y herramientas de gestión son contextos donde dark mode tiene un impacto real en la experiencia.
Para webs corporativas o landing pages que el usuario visita puntualmente — no de forma habitual —, implementar dark mode es un plus que no debería ser la prioridad frente a otros problemas de UX o rendimiento más impactantes.
Preguntas frecuentes sobre dark mode
¿Es obligatorio implementar dark mode en apps iOS y Android?
No es obligatorio, pero Apple y Google lo incluyen en sus guías de diseño como práctica recomendada. En iOS, una app que no respeta la preferencia de dark mode del sistema puede generar una experiencia inconsistente para el usuario. No está penalizado en el App Store, pero sí afecta a la percepción de calidad del producto.
¿El dark mode afecta al SEO?
No directamente. Lo que sí puede afectar al SEO es si la implementación de dark mode introduce cambios de layout que impactan en los Core Web Vitals (CLS, en particular) o si hay contenido que se oculta o cambia entre modos. Una implementación solo con CSS que no altera el DOM no tiene impacto en SEO.
¿Puedo implementar dark mode en un proyecto existente sin rediseño completo?
Sí, si el sistema de diseño usa variables de color de forma sistemática. Si los colores están hardcodeados en el CSS, la implementación requiere refactorización. En proyectos con CSS bien estructurado con custom properties, añadir dark mode puede hacerse en pocos días. Sin esa base, puede requerir una revisión más extensa.
