El modo oscuro ya es una expectativa de base
El modo oscuro ha cruzado el umbral de característica a expectativa. Más del 55% de los usuarios ahora prefieren el modo oscuro como su configuración de interfaz principal, tanto en móvil como en escritorio. Los sistemas operativos lo activan por defecto. Las aplicaciones principales lo soportan. Los usuarios que en 2025 se encuentran con un producto que no lo soporta notan su ausencia como una señal de calidad, de la misma forma en que en 2018 se notaba la falta de una experiencia móvil.
La mayoría de las marcas que han implementado el modo oscuro lo han hecho como un interruptor superficial, invirtieron su paleta de colores y lo dieron por terminado. Esto produce interfaces que técnicamente funcionan en modo oscuro pero que pierden coherencia visual, consistencia de marca y, en algunos casos, cumplimiento de accesibilidad. Construir un sistema de modo oscuro genuino requiere repensar la arquitectura de color desde cero.
Por qué la inversión simple falla
El instinto de crear el modo oscuro invirtiendo los colores del modo claro falla por varias razones predecibles. Los colores que se ven preciosos sobre fondo blanco, ámbares cálidos, naranjas vibrantes, azules saturados, se vuelven visualmente agresivos o ilegibles sobre casi negro. Las sombras, que crean profundidad en modo claro, deben sustituirse por fuentes de luz en modo oscuro. Las relaciones de contraste de texto que cumplen WCAG en modo claro a menudo fallan en oscuro. Y los colores de marca calibrados para fondos claros se ven completamente distintos sobre fondos oscuros.
El modelo de elevación
En modo claro, la profundidad se comunica mediante sombras, los elementos más cercanos al espectador proyectan más sombra. En modo oscuro, este modelo se invierte: los elementos con mayor elevación son más claros, no más oscuros. Este es el modelo de elevación de Material Design, y es el enfoque correcto para construir una UI de modo oscuro coherente. Sin este modelo, las interfaces en modo oscuro tienden a verse planas e indiferenciadas.
"El modo oscuro no es el modo claro con las luces apagadas. Es un entorno visual distinto que requiere sus propias decisiones de diseño."
Construir un sistema de diseño de doble modo
Tokens de color semánticos
La base de un sistema de diseño de doble modo son los tokens de color semánticos, tokens definidos por su propósito en lugar de por su valor. En vez de usar `#ffffff` directamente, se usa `--color-surface-primary`, que se resuelve como `#ffffff` en modo claro y `#0a0a0a` en modo oscuro. Esta abstracción hace que el cambio de modo sea fiable y predecible a escala.
Probar la accesibilidad en ambos modos
Cada componente debe superar un ratio de contraste de 4,5:1 en ambos modos antes de publicarse. Esto no es negociable, y se omite con frecuencia. Los fallos más comunes son los colores de texto atenuados que pasan en modo claro y fallan en oscuro, y los colores de iconos que se vuelven invisibles sobre fondos oscuros. Pasa cada componente por un comprobador de contraste en ambos modos, siempre.
El modo oscuro como expresión de marca
Las implementaciones de modo oscuro más sofisticadas no son solo equivalentes funcionales del modo claro, se sienten como una expresión distinta e igualmente intencional de la marca. La forma en que funcionan las sombras, cómo se comportan los colores de acento, el peso de la tipografía, todo esto puede calibrarse para producir un modo oscuro con carácter propio y distintivo, manteniéndose a la vez coherente con la marca en modo claro.
Las marcas que lo han hecho bien, Linear, Vercel, Raycast, han convertido sus interfaces en modo oscuro en una declaración de calidad y atención al detalle. En un mercado donde el modo oscuro superficial es cada vez más común, un sistema de modo oscuro genuinamente bien ejecutado es un diferenciador.
