Modo oscuro y confort visual

1) Por qué el tema oscuro

Confort ocular en poca luz, menos deslumbramiento y «destellos de luz».
Energía: en OLED/AMOLED, las pantallas oscuras gastan menos batería.
Enfoque en los datos: énfasis en el contenido, no en el fondo.
Expectativas del usuario: el indicador del sistema 'prefers-color-scheme' es el estándar de facto.

2) Principios

1. Fondo gris oscuro> negro puro para superficies UI (mejor legibilidad y gradación).
2. Contraste de contenido: no «blanco por negro», sino tonos suaves para textos largos.
3. «Luminosidad» cautelosa: resaltes/acentos silenciados, pero distinguibles.
4. Profundidad ≠ sombra: trabajamos con luz/sombra borrosa, no con contraste agudo.
5. Disponibilidad: WCAG AA (mínimo), enfoque visible y estados comprensibles.
6. Los ajustes del sistema son primarios: conmutación automática y «movimiento reducido».

3) Paleta y tokens (ejemplo)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• Acentos en modo oscuro en + 8-12% más claro que en modo claro.
• Use gradaciones de grises (4-5 pasos), evitando el # 000 absoluto para áreas grandes (la excepción es el modo AMOLED).

4) Texto y legibilidad

Texto principal: gris claro '# E6E8EB' en '# 0E1116' (contraste ~ 12:1).
Texto secundario: '# A6AEB8'; pistas - un paso más oscuro/más transparente.
Lectura larga: tonos ligeramente cálidos (reducen el «halo»).
Referencias - acento + subrayado predeterminado; el color ≠ el único portador de significado.

5) Superficies, profundidad y vidrio

Elevations: `base` → `elev1` → `elev2`; cada capa es más clara/más cálida en un 2-4%.
Las sombras son suaves, anchas, con baja opacidad; evitar los trazos «luminosos».
Los paneles trans (blur) son apropiados moderadamente; proporcione el contraste del texto con el sustrato.
Los separadores son bordes semi-finos de '--bd-soft' o «heiras» apenas perceptibles.

6) Estados y enfoque

Hover: + 2-3% más claro que el fondo; Active: −2 -3% (más oscuro).
Focus: anillo claro (por ejemplo, 'outline: 2px solid # 6EA0FF; outline-offset: 2px; '), también se puede ver en los botones de acento.
Disabled: reduzca el contraste suavemente; no descienda por debajo del nivel de lectura del texto.

7) Botones, formularios y tablas

Primario: fondo '--accent', texto '# 0E1116'.
Secondary: fondo '--bg-elev1', border '--bd-strong', texto '--fg-primary'.
Campos de entrada: fondo '--bg-elev1', con enfoque - acento border; placeholder es más tenue, pero leemos.
Tablas: el fondo cebra es apenas perceptible, resaltando la fila en hover es + 2-3% más claro.

8) Ilustraciones, logotipos y fotos

Logotipos y pictogramas - versiones de inversión en oscuro; evite las líneas de luz delgadas en los fondos saturados.
Foto: añadir una máscara oscura (40-60%) para los titulares de contraste en la parte superior.
Iconos: espesor único, contorno + relleno - según el estado, no «venenosos» colores.

9) Fecha-visualización en tema oscuro

Los colores de las filas son de saturación moderada; un mínimo de 5 tonos distinguibles.
Las mallas y ejes son silenciados (alfa 20-30%), las firmas son '--fg-muted'.
Anotaciones/incidentes - brillantes, pero legibles; subrayar con forma/marcador, no sólo con color.
Los datos en blanco son «nieblas» suaves, no campos blancos.

10) Rendimiento y batería

En OLED realmente ahorra negro puro (# 000) - utilizar en el modo AMOLED por la opción del usuario.
Evite las velas/blur grandes sólidas en las GPU débiles.
Respeta 'prefers-reduced-motion': simplifica las animaciones/transiciones.

11) Comportamiento y conmutación

Por defecto, sigue 'prefers-color-scheme'.
Dé al usuario un interruptor explícito (Light/Dark/System), almacene la selección (cookie/localStorage).
Al cambiar un tema, no hay flashes: agregue previamente la clase del tema al renderizado.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Accesibilidad (A11y)

Contraste de texto ≥ 4. 5:1 (normal), ≥ 3:1 (grande).
No codifique el estado sólo en color: utilice el icono/patrón/firma.
Estilos de enfoque y navegación por teclado son obligatorios.
VoiceOver/TalkBack: roles, etiquetas, orden tabú.

13) Anti-patrones

Un texto absolutamente blanco sobre un fondo absolutamente negro en grandes superficies es el «parpadeo» y el cansancio.
Los acentos de neón en el oscuro son «ruido de luz».
Sombras de alto contraste («gris sobre negro» con frontera dura).
Texto transparente en la foto sin máscara.
Placeholder en peligro de extinción (alpha demasiado baja).

14) Ejemplos de componentes

Botón

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Plan de prueba

Iluminación: habitación oscura/luz del día/noche al aire libre.
Dispositivos: OLED e IPS, móvil/escritorio, diferentes densidades.
A11y: comprobador de contraste, pasaje de teclado, legibilidad placeholder's.
Percepción: prueba ab de «fatiga ocular» y errores de entrada por la noche.
Perfomance: métricas RUM (INP/CLS) después de incluir un tema oscuro; carga GPU (efectos blur/sombra).

16) Métricas de calidad

Contrast Violations/1k elementos (objetivo: → 0).
Complaint Rate en «demasiado oscuro/brillante».
Compleción de sesión nocturna (métricas de comportamiento por sesión 22: 00-06: 00).
INP/CLS p75 en Dark Mode vs Light (no peor que los básicos).
Opt-in Dark Mode y retener a los usuarios que han elegido un tema.

17) Lista de comprobación de inicio

• Paleta de tema oscuro con 4-5 niveles de superficie
• El contraste de texto/iconos/límites corresponde a WCAG AA
• Estilos y estados de enfoque visibles (hover/active/disabled)
• Logotipos/iconos/fotos adaptadas, máscaras añadidas a la foto
• Gráficos - rejillas silenciadas, firmas legibles, filas no «venenosas»
• Interruptor Light/Dark/System, guardar la selección sin «flash»
• Respetuoso 'prefers-color-scheme' y 'prefers-reduced-motion'
• RUM/perf dashboard, alertas por regresiones

18) Plan de implementación (3 iteraciones)

Iteración 1 - Fundación (1-2 semanas)

Paleta/tokens, superficies base (base/elev1/elev2), texto/bordes, botones/márgenes/tablas, interruptor de tema.

Iteración 2 - Detalles (3-4 semanas)

Gráficos e ilustraciones en oscuro, máscaras en la foto, enfoque/estado, animaciones con reducción de movimiento, auditoría de perfume.

Iteración 3 - Optimización (continua)

Modo AMOLED como opción, ajuste de contraste fino, pruebas de usabilidad por la noche, comparación RUM Light vs Dark, auditorías regulares de marca/UX.

19) Mini preguntas frecuentes

¿Hacer un fondo negro?
Para IU es mejor el gris oscuro profundo; neto # 000 dejar con la opción «Modo AMOLED».

¿Es necesario aumentar la saturación de acentos?
En el oscuro - por lo general al contrario iluminan ligeramente y reducen la saturación para no «brillar».

¿Qué pasa con las imágenes de las pancartas?
Agregue un sustrato/máscara oscura, compruebe el contraste entre el texto y el logotipo.

El tema oscuro no es la inversión de colores, sino un modo de diseño separado: paleta pensada, niveles de superficie, legibilidad, estados correctos, gráficos y medios adaptados, y respeto a la configuración del sistema. Confía en los tokens, controla el contraste y la perfomance, y Dark Mode se convertirá en una herramienta cómoda, estable y hermosa para los usuarios nocturnos y diurnos.