Modo oscuro en tu web: ¿vale la pena o es una moda cara?

El modo oscuro llegó a los sistemas operativos, después a las apps, y desde entonces aparece en casi todos los briefs de diseño web. La petición suele venir en la misma forma: "queremos que tenga modo oscuro, se ve más moderno".

Y ahí está el problema del planteamiento. El modo oscuro no es un efecto visual que se activa: es un segundo diseño completo que hay que decidir, construir y mantener en paralelo. Vale la pena en algunos sitios y es dinero tirado en otros, y la diferencia se puede razonar.

El mito: "descansa la vista"

Es la justificación que más se repite y es, en el mejor de los casos, incompleta. Para muchas personas leer texto claro sobre fondo oscuro es más difícil, no menos: aparece un efecto de halo alrededor de las letras que difumina los bordes. Le pasa especialmente a quien tiene astigmatismo, que es muchísima gente.

Lo que sí es cierto: en penumbra, una pantalla clara deslumbra, y ahí el modo oscuro resulta más cómodo. Y en pantallas OLED consume algo menos de batería. Son ventajas reales pero acotadas — no convierten al modo oscuro en universalmente superior.

Cuándo sí vale la pena

El patrón es bastante claro: el modo oscuro rinde donde la gente pasa mucho rato mirando la pantalla, y sobre todo donde la usa de noche.

• Aplicaciones y paneles que alguien tiene abiertos horas seguidas mientras trabaja.
• Productos digitales para público técnico, donde la expectativa ya está instalada y su ausencia se nota.
• Sitios de lectura larga — documentación, artículos extensos — consumidos con frecuencia de noche.
• Marcas cuya identidad ya es oscura: ahí el tema oscuro es el principal y el claro puede ser el añadido.

Cuándo no compensa

En la mayoría de las webs de empresa, sencillamente no se paga. Una web de servicios se visita durante dos o tres minutos, casi siempre de día, con una decisión concreta en la cabeza. Duplicar el diseño para esa visita no cambia ninguna conversión.

Lo que cuesta de verdad: no es el interruptor

Construir el conmutador es la parte fácil. El costo real está en todo lo que hay que decidir dos veces y revisar dos veces, para siempre.

• Cada color de la paleta necesita su equivalente oscuro, y no es "invertir": los tonos de marca suelen perder contraste sobre negro.
• Las imágenes con fondo blanco aparecen como recuadros brillantes flotando en la oscuridad.
• El logo casi nunca funciona en ambos temas; suele hacer falta una segunda versión.
• Las sombras dejan de servir. En oscuro, la profundidad se comunica con capas de luminosidad, no con sombras.
• Cada página nueva se revisa dos veces, y ahí es donde el mantenimiento se vuelve permanente.

Si lo haces: cuatro decisiones que evitan casi todos los problemas

El detalle técnico varía según la tecnología, pero las decisiones de fondo son las mismas en todos los casos.

1. 01Respeta la preferencia del sistema por defecto. Si el visitante ya eligió oscuro en su teléfono, no le impongas claro.
2. 02Ofrece un conmutador visible y recuerda su elección. Quien quiere cambiarlo, quiere cambiarlo en tu sitio, no en su sistema.
3. 03Nunca uses negro puro. Un gris muy oscuro reduce el efecto de halo y hace el texto bastante más legible.
4. 04Baja la saturación de los colores de marca en el tema oscuro. Un color vibrante que funciona sobre blanco suele vibrar de forma molesta sobre negro.

El contraste no se puede improvisar en ninguno de los dos temas

El error más común al pasar a oscuro es dejar el texto en un gris medio "para que no sea tan duro". El resultado es texto por debajo del contraste mínimo legible — y como es la parte que todo el mundo mira, el daño es grande.

Los dos temas tienen que cumplir los mismos mínimos de contraste, y hay que comprobarlo por separado en cada uno: pasar el claro no dice nada sobre el oscuro. El fondo del asunto está en accesibilidad web y por qué importa.

¿Afecta a la velocidad?

Bien implementado, casi nada: son variables de color, no recursos extra. Mal implementado sí pesa — cuando cada tema carga su propia hoja de estilos, o cuando se duplican imágenes para tener versión clara y oscura sin optimizarlas.

Hay además un detalle visible: si el tema se decide con JavaScript después de pintar la página, el usuario ve un destello blanco antes de que aparezca el oscuro. Es molesto y afecta a la percepción de calidad. Lo que sí mueve la aguja en velocidad está en Core Web Vitals.

El veredicto práctico

Si estás construyendo una web de empresa y el presupuesto es finito, hay diez cosas que rinden más que el modo oscuro: velocidad, textos, páginas de servicio, formularios, fotos reales. El modo oscuro es de las últimas de esa lista, no de las primeras.

Si en cambio estás construyendo algo que la gente va a usar durante horas, entra en la conversación desde el principio — porque añadirlo después, cuando la paleta y los componentes ya están decididos, cuesta bastante más que haberlo previsto. Los rangos generales están en cuánto cuesta una página web profesional.