Dark Mode Avanzado

Invertir los colores hex del light mode en dark mode produce paletas inconsistentes y difíciles de mantener. La solución es mapear tokens semánticos: --color-surface, --color-text, --color-border. Cada token toma un valor distinto según el tema. Un cambio de tema es solo redefinir los tokens, no tocar los componentes.

En dark mode, las sombras oscuras sobre fondo oscuro son invisibles. La elevación se comunica con luminancia de superficie: los elementos más altos en la jerarquía visual son más claros. Base a #121212, card a #1e1e1e, modal a #2a2a2a, popover a #333333. Cada nivel sube ~8-10% de luminancia. Las sombras pueden coexistir como refuerzo sutil, pero la luminancia es el vehiculo principal de profundidad.

El negro puro #000000 como fondo y el blanco puro #ffffff como texto producen un ratio de contraste de 21:1 que, aunque tecnicamente perfecto, causa fatiga visual rápida y halación (smearing) en pantallas OLED. Los valores suavizados #121212 o #1a1a1a para fondo y #e5e5e5 o #ebebeb para texto mantienen un contraste de ~15:1, suficiente para WCAG AAA, sin la agresividad visual de los puros.

Los colores de acento que funcionan en light mode parecen apagados sobre fondo oscuro. El fondo oscuro "absorbe" el color visualmente. Incrementar la saturación (no la luminosidad) entre 10 y 20% en dark mode para que el acento mantenga su impacto visual. Verificar que el contraste WCAG siga siendo adecuado.

Las imagenes fotograficas con fondos blancos o brillantes en dark mode se convierten en "faros" visuales que rompen la armonia. Aplicar filter: brightness(0.85) a imagenes no-iconos en dark mode y anadir un borde sutil de 1px solid rgba(255,255,255,0.1) para integrarlas al contexto oscuro. Sin este tratamiento, una imagen luminosa compite con el contenido y rompe la coherencia del tema oscuro.

El dark mode no es solo cambiar backgrounds. Testear con un toggle rápido y un vistazo omite problemas criticos que solo emergen en revisión sistematica: texto que desaparece sobre fondos del mismo tono, bordes invisibles, sombras que no aportan profundidad, imagenes que deslumbran, focus rings que se pierden, y colores semánticos (error, success) que no cumplen contraste. Un checklist estructurado de 7 puntos cubre el 90% de los bugs recurrentes de dark mode.

En dark mode, diferenciar niveles de texto solo con tamaño no basta: todo compite visualmente cuando el color es uniforme. La jerarquía efectiva combina peso tipografico y opacidad progresiva. Headings a font-weight: 600 con opacity: 0.95, cuerpo a 400 con opacity: 0.85, captions a 400 con opacity: 0.6. Esto crea capas de atención claras sin necesidad de cambiar tamaños drasticamente. Material Design y Apple HIG usan esta técnica como base de sus sistemas tipograficos en modo oscuro.