Sistema de Diseño para Modo Oscuro

¿Qué hace Sistema de Diseño para Modo Oscuro?

Propósito

El Sistema de Diseño para Modo Oscuro proporciona una metodología para traducir interfaces web de tema claro a sus contrapartes de tema oscuro. Diseñar un modo oscuro no es simplemente invertir valores de color. Hacerlo rompe las metáforas físicas de iluminación, causa fatiga visual severa y crea interfaces ilegibles y de alto resplandor.

Este sistema establece las reglas visuales y espaciales del diseño de baja luminosidad:

• Inversión de Elevación: Transmitir profundidad en modo oscuro aclarando los fondos de las superficies elevadas en lugar de usar sombras oscuras.
• Desaturación de Color: Adaptar los colores de acento vibrantes de la marca a niveles de bajo contraste para evitar "vibración" visual y fatiga ocular.
• Contraste y Prevención de Halación: Evitar combinaciones de blanco puro sobre negro puro que causan un resplandor extremo (halación) para lectores con astigmatismo o dislexia, optando en su lugar por blancos y negros apagados.
• Calibración de Peso Tipográfico: Contrarrestar la "irradiación" (la ilusión óptica donde el texto claro sobre fondo oscuro parece más grueso y negrita que el texto oscuro sobre fondo claro).
• Atenuación de Medios: Adaptar imágenes, videos y diagramas vectoriales para que no "cieguen" visualmente al usuario en condiciones de baja luminosidad.

---

Casos de Uso

• Diseño de Kits de UI de Doble Tema: Establecer la arquitectura de tokens de diseño semántico para un sistema que soporte de forma nativa tanto modo claro como modo oscuro.
• Rediseño de Paneles de SaaS y Entornos de Lectura: Crear interfaces de baja fatiga optimizadas para visualización prolongada, flujos de trabajo de desarrolladores o uso nocturno.
• Auditoría de Temas Oscuros Inaccesibles: Identificar y corregir problemas de contraste, acentos vibrantes, pesos tipográficos ilegibles y activos multimedia cegadores.
• Generación de Especificaciones de Entrega Multitema: Producir especificaciones limpias y listas para desarrolladores que muestren exactamente cómo se comportan los elementos en todos los temas.

---

Cuándo NO Usarlo

• Entornos Oscuros por Defecto (Cinematográficos): Si una aplicación es exclusivamente oscura (por ejemplo, Spotify, Netflix o plataformas de transmisión de juegos) y nunca admitirá un tema claro. En este caso, un sistema de diseño de doble tema es una sobrecarga innecesaria.
• Microcampañas Altamente Expresivas / Artísticas: Páginas de aterrizaje independientes donde la disrupción visual, paletas de alta saturación extrema o una marca artística tienen prioridad sobre la comodidad de visualización prolongada o las reglas de accesibilidad estrictas.
• Frameworks Heredados Estrictamente Estáticos: Aplicaciones cuyas arquitecturas frontend no pueden cargar hojas de estilo dinámicas o carecen de soporte para variables CSS, lo que impide una adaptación sistemática del tema.

---

Entradas

1. Paleta Principal de Modo Claro y Estilos de Marca: Los colores primarios existentes de la marca, colores secundarios, escalas tipográficas y tokens de espaciado fluido.
2. Inventario de Componentes y Jerarquía de Profundidad: Una lista completa de los diseños de página y capas de UI (fondos, barras laterales, tarjetas, modales, menús desplegables).
3. Contexto del Entorno de Iluminación: El entorno físico típico del usuario objetivo (por ejemplo, lectura nocturna en la cama frente a un suelo de control industrial brillantemente iluminado).
4. Objetivo de Accesibilidad: Estándar WCAG 2.2 AA (mínimo) o AAA (mejorado), incluyendo consideraciones para astigmatismo y daltonismo.

---

Salidas

1. Mapa Unificado de Tokens Semánticos: Una especificación sistemática que vincula los valores del modo claro directamente con sus equivalentes del modo oscuro.
2. Escala de Superficie Basada en Elevación: Una escala de 5 a 6 pasos que define cómo los valores de fondo de la superficie se aclaran a medida que flotan más alto en el eje Z.
3. Paleta de Acentos Desaturados: Un conjunto calibrado de colores primarios, secundarios y de estado semántico desaturados para fondos oscuros.
4. Correcciones de Hoja de Estilo Tipográfica: Reglas específicas para el peso de fuente, el espaciado entre letras y los ajustes de color del texto para contrarrestar el efecto de irradiación.
5. Especificaciones de Atenuación de Medios: Técnicas CSS y HTML para reducir el contraste/brillo de imágenes y ajustar gráficos vectoriales.

---

Flujo de Trabajo

1. Establecer la Base: Seleccionar Negro Apagado y Blanco Apagado

Evite el #000000 absoluto (negro puro) para fondos y el #FFFFFF absoluto (blanco puro) para el texto del cuerpo.

• El Fondo Base: Establecer un neutral oscuro y matizado (por ejemplo, pizarra profunda, carbón o gris azul marino oscuro entre #121212 y #1A1A1A). Esto reduce la fatiga visual, evita el parpadeo de la pantalla y conserva cierta profundidad visual.
• La Base del Texto: Elegir un blanco apagado o gris claro (por ejemplo, #E2E8F0 o #EAEAEA con una opacidad del 85% al 90%). Esto garantiza un contraste cómodo sin causar halación (dispersión de la luz en el ojo del lector).

2. Traducir la Profundidad Mediante el Aclaramiento por Elevación

En un tema claro, indicamos que un elemento está elevado proyectando una sombra más oscura. En un tema oscuro, una sombra oscura es invisible sobre un fondo oscuro.

• El Principio de Aclaramiento: A medida que un elemento se eleva más en el eje Z, se acerca más a la fuente de luz ambiental virtual y se vuelve más claro, no más oscuro.
• Crear una Escala de Superficie por Elevación:
  • Nivel 0 (Base del Lienzo): Color más oscuro (por ejemplo, #121212).
  • Nivel 1 (Tarjeta/Elemento de Lista): Ligeramente más claro (por ejemplo, #1D1D1D).
  • Nivel 2 (Cabecera Fija/Acción Flotante): Aún más claro (por ejemplo, #242424).
  • Nivel 3 (Ventana Modal/Cuadro de Diálogo): Superficie más clara (por ejemplo, #2C2C2C).
• Apoyar con Sombras Suaves: Usar sombras muy sutiles, de gris oscuro o negro translúcido en capas elevadas (por ejemplo, rgba(0, 0, 0, 0.5)) para proporcionar separación en superficies más grandes que se asientan sobre elementos de Nivel 1.

3. Calibrar y Desaturar los Colores de Acento

Los colores altamente saturados que se ven vibrantes sobre un lienzo blanco "vibrarán" sobre un lienzo oscuro, creando fatiga visual severa y fallando en las pruebas de contraste.

• Desaturar los Acentos de Marca: Desplazar los colores de la marca a equivalentes más claros, suaves y pastel. (Por ejemplo, un azul primario vibrante #0055FF sobre fondo claro debe asignarse a un azul desaturado #66A3FF o #80B3FF sobre fondo oscuro).
• Mantener Acentos Seguros para el Contraste: Verificar que los colores de acento desaturados sobre superficies oscuras aún cumplan con los estándares WCAG 2.2 AA (relación mínima de 4.5:1 para texto, 3:1 para estados interactivos).
• Evitar Grandes Bloques Saturados: En lugar de renderizar botones completos o pancartas en colores sólidos saturados, usarlos con moderación, como en enlaces de texto, bordes o indicadores sutiles.

4. Ajustar la Tipografía para la Irradiación Óptica

El texto claro sobre fondo oscuro sufre de irradiación: el texto blanco parece "sangrar" en la oscuridad circundante, haciendo que las letras parezcan más negritas, más gruesas y más juntas que sus equivalentes de claro sobre oscuro.

• Calibración de Peso: Reducir el peso de fuente de los encabezados en negrita del tema claro en un nivel (por ejemplo, cambiar 700 (Negrita) a 600 (Seminegrita) o incluso 500 (Media) en oscuro).
• Calibración de Espaciado entre Letras: Aumentar ligeramente el espaciado entre letras (tracking) para el texto del cuerpo en modo oscuro (por ejemplo, letter-spacing: 0.02em; o 0.015em;) para evitar que las letras individuales se fusionen.
• Jerarquía Secundaria/Terciaria: Controlar la jerarquía ajustando la opacidad del color del texto, no solo el tamaño. Usar opacidad: 0.87 para texto de cuerpo de alta prioridad, opacidad: 0.60 para texto de ayuda secundario y opacidad: 0.38 para indicadores deshabilitados.

5. Adaptar Medios y Contenido Rico

Las fotos, gráficos y diagramas sin modificar pueden arruinar una experiencia de modo oscuro que de otro modo sería perfecta, cegando al usuario con blancos brillantes y de alto contraste.

• Atenuación de Fotos: Aplicar una reducción sutil de brillo y contraste a las fotografías para integrarlas en la atmósfera de baja luminosidad.

  [data-theme="dark"] img:not(.avatar) {
    filter: brightness(0.85) contrast(0.95);
  }
  

• Activos Vectoriales e Ilustraciones: Intercambiar colores de fondo brillantes en SVG o usar filtros SVG para invertir trazados específicos. Para gráficos ilustrativos, usar <picture> con consultas de medios para cargar activos de tema oscuro personalizados.
• Visualizaciones de Datos: Redefinir las series de colores de los gráficos para usar líneas desaturadas y rellenos de área semitransparentes que sigan siendo legibles sin luminancia excesiva.

---

Reglas de Decisión

La Regla de Luminosidad por Elevación

Siempre que se establezca el fondo de un contenedor visual, consulte el nivel de elevación. Nunca haga un modal o menú desplegable elevado más oscuro que el fondo de la página debajo de él.

Nivel de Elevación	Fondo en Modo Claro	Fondo en Modo Oscuro	Indicación de Elevación Implícita
Nivel 0 (Lienzo)	#FFFFFF (Blanco) o #F8F9FA	#121212 (Negro apagado)	Nivel del suelo / base
Nivel 1 (Tarjeta/Sección)	#FFFFFF (Blanco) con borde	#1E1E1E (Superficie 1)	Flotando 1-2dp
Nivel 2 (Cabecera/Fija)	#FFFFFF o tono translúcido sutil	#252525 (Superficie 2)	Flotando 4-8dp
Nivel 3 (Modal/Diálogo)	#FFFFFF con sombra fuerte	#2D2D2D (Superficie 3)	Flotando 12-24dp

El Límite de Saturación

• Los acentos utilizados como fondos para estados interactivos (por ejemplo, un contenedor de chip secundario) deben tener una saturación del 10% al 15% en modo oscuro.
• Los acentos utilizados como texto o iconos en primer plano deben tener una saturación del 40% al 60% para garantizar que se destaquen sin vibrar contra la superficie oscura.

El Amortiguador de Contraste

Debido a que el resplandor de la pantalla y las pantallas de baja calidad degradan la visibilidad del modo oscuro más severamente que el modo claro, apunte siempre a una relación de contraste de 5.0:1 para el texto del cuerpo en modo oscuro (superando el mínimo de WCAG 4.5:1) para que sirva como amortiguador para entornos físicos deficientes.

---

Restricciones

• Accesibilidad (WCAG AA): Los elementos de texto deben alcanzar al menos 4.5:1 de contraste (3:1 para texto grande). Los bordes de UI, anillos de enfoque e iconos funcionales deben alcanzar al menos 3:1 de contraste. Los indicadores de enfoque deben permanecer altamente visibles y no ser ahogados por el resplandor del fondo oscuro (WCAG 2.2 SC 2.4.11).
• Adaptación al Resplandor Responsivo: Los colores del texto deben ser resistentes al resplandor ambiental alto (como pantallas móviles usadas al aire libre), lo que significa que se deben evitar los niveles de contraste mínimos absolutos.
• Sin Jerarquía Basada Solo en Color: No confiar únicamente en el tono de un color desaturado para transmitir estado (por ejemplo, advertencia vs. error en gráficos). Integrar patrones distintos, etiquetas de texto o iconografía.

---

Patrones de Falla Comunes

• El "Inversor Literal": Ejecutar un filtro de inversión de color automatizado en un tema claro. Esto convierte los elementos elevados del modo claro con sombras oscuras en elementos hundidos del modo oscuro con anillos blancos brillantes, rompiendo todos los modelos de iluminación natural.
• La Pesadilla "Neón Vibrante": Colocar colores de marca completamente saturados (por ejemplo, #00FF00 o #FF00FF) directamente sobre un fondo negro puro. Esto desencadena fatiga visual, haciendo que el texto sea casi imposible de leer durante más de unos segundos.
• El Extremo OLED (Resplandor Negro Puro): Usar texto #FFFFFF directamente sobre fondos #000000. Esto crea un fuerte efecto de halo/resplandor en muchas pantallas, reduciendo la velocidad de lectura y causando fatiga visual.
• El Anillo de Enfoque Desaparecido: Diseñar un hermoso modo oscuro pero dejando los indicadores de enfoque predeterminados del navegador, que a menudo son azul oscuro y se vuelven completamente invisibles sobre fondos de pizarra oscura.
• La Ilustración Cegadora: Crear una UI oscura impecable, pero dejando fondos blancos de alto contraste dentro de gráficos SVG, logotipos o iconos ilustrativos.

---

Criterios de Validación

• Valores Base: No se usa negro puro absoluto (#000) para el fondo del lienzo principal, y no se usa blanco puro absoluto (#FFF) para el texto del cuerpo.
• Modelo de Elevación: Las superficies se vuelven progresivamente más claras (valor de luminosidad más alto) a medida que se elevan más en el eje Z.
• Verificación de Contraste: Cada color de texto, incluido el texto de ayuda atenuado, cumple o supera la relación de contraste WCAG 2.2 AA (4.5:1 normal, 3:1 grande).
• Acentos No Vibrantes: Los colores de acento y estado están desaturados para oscilar entre el 10% y el 60% de saturación según la aplicación, evitando la vibración visual.
• Visibilidad del Enfoque: Los elementos interactivos tienen indicadores de enfoque de alto contraste y distintos, claramente visibles sobre superficies oscuras.
• Calibración Tipográfica: El texto en negrita se ajusta (se reduce un nivel de peso o se espacia) para compensar la irradiación.
• Filtro de Medios: Se especifica un mecanismo responsivo (filtros CSS o intercambio de activos oscuros) para reducir el brillo y el contraste de los medios enriquecidos y los activos vectoriales.