Diseño de Modo Oscuro: La Guía Práctica
El modo oscuro no es el modo claro con los valores invertidos: es una segunda representación del mismo sistema de diseño, derivada de los mismos colores semilla bajo una física distinta: los colores se perciben más apagados contra un entorno oscuro, la elevación debe señalarse con luminosidad en lugar de sombra, y el contraste falla en lugares nuevos. Este hub reúne nuestras guías para hacerlo bien; la versión en una sola imagen es una paleta y su gemela oscura derivada, lado a lado.
La inversión es la trampa
Invertir una paleta clara coloca los valores de texto donde deberían ir las superficies, pone la elevación patas arriba y le quita al color de marca su saturación aparente. Cada guía de este hub parte de la alternativa: la derivación. La paleta oscura se calcula a partir del mismo color semilla —su propia curva de luminosidad, un aumento deliberado de saturación para contrarrestar cómo un entorno oscuro apaga el color— de modo que la marca sobrevive mientras cada valor se adapta a la nueva física. El modo oscuro no es inversión desarrolla ese argumento por completo y es la primera lectura natural; Adaptar los colores de marca al modo oscuro lo aplica al caso más difícil, el propio color de marca. La derivación es también cómo Scale Composer trata el modo oscuro: los mismos colores semilla que producen la paleta clara, la escala tipográfica y la rejilla producen también la paleta oscura, de modo que el tema oscuro es un resultado recalculado en lugar de un segundo archivo mantenido a mano.
La nueva física, en breve
Tres efectos determinan la mayoría de las decisiones de modo oscuro. La saturación percibida cae contra fondos oscuros, y por eso las rampas oscuras derivadas aumentan el croma. Las sombras pierden su señal sobre superficies oscuras, así que la altura se comunica mediante la luminosidad: las superficies elevadas son superficies más claras. Y el deslumbramiento se invierte: el texto blanco sobre casi-negro puede desbordarse, los escalones casi-negros se apiñan, y los fallos de contraste se trasladan a lugares donde el modo claro nunca los tuvo.
Cada efecto tiene su propia guía: Por qué los colores se ven más apagados en oscuro mide la caída de saturación y su compensación, La elevación en modo oscuro resuelve la lógica de más-claro-significa-más-cerca, y Errores de contraste en modo oscuro traza a dónde se trasladan los fallos. La intuición detrás de las tres es la misma: el sistema visual juzga el color y la profundidad en relación con su entorno, así que cambiar el entorno cambia cada juicio — ningún píxel necesita moverse para que la percepción sí lo haga.
El fondo mismo es una decisión, no algo dado. Nunca negro puro explica por qué la mayoría de los temas oscuros se sitúan unos escalones por encima de #000 —margen para que la elevación señale, menos deslumbramiento contra el texto claro— y OLED y negro verdadero le da un trato justo al único contraargumento genuino: el consumo y el contraste en paneles OLED.
Los tokens lo convierten en un modo, no en un proyecto
La mitad de ingeniería es una disciplina de nombres: los componentes referencian roles semánticos —background, surface, text-primary— y cada rol guarda un valor por tema. Cambia el tema y cada elemento vinculado lo sigue; ningún componente lleva una opinión sobre en qué modo está. La misma maquinaria se cubre desde el lado de los tokens en nuestra guía de design tokens y desde el lado de la paleta en escalas de color. Dentro de este hub, Tokens semánticos para el cambio de tema construye la capa de nombres, y prefers-color-scheme: hacerlo bien en CSS lo conecta con la preferencia del sistema del lector — más el interruptor manual que los usuarios esperan que prevalezca.
Lo que la derivación no cubre
Dos tareas siguen siendo manuales una vez derivada la paleta. Las fotografías, las ilustraciones y los logotipos llegan con sus propios fondos y sus propias suposiciones de contraste — Imágenes y medios en modo oscuro cubre el atenuado, los bordes transparentes y los casos en que un recurso necesita una segunda versión. Y una paleta derivada es un buen primer borrador, no un veredicto: Probar una paleta oscura es el repaso de comprobación —contenido real, pantallas reales, con el brillo bajado— que detecta lo que las matemáticas no pueden ver.
Guías de este hub
- Adaptar los colores de marca al modo oscuro
Adaptar los colores de marca al modo oscuro: por qué el valor canónico falla sobre el casi negro, qué paso de la rampa asume el trabajo y cómo volver a ejecutar la comprobación sobre relleno.
- El modo oscuro no es inversión
El diseño de modo oscuro empieza donde falla la inversión: lógica de rol volteada, elevación rota, color drenado. Qué significa derivar una paleta oscura de las mismas semillas.
- Elevación en modo oscuro: más claro significa más cerca
La elevación en modo oscuro funciona con luminosidad, no con sombra: las superficies se aclaran a medida que suben. Cómo construir la escalera de superficies con números reales y el límite del JND donde los pasos se agolpan.
- Imágenes y contenido multimedia en modo oscuro
Las imágenes en modo oscuro conservan sus propios píxeles: una foto brillante se convierte en deslumbramiento sobre una página casi negra. Atenuación, variantes oscuras, currentColor y el patrón de marco.
- Nunca negro puro: cómo elegir fondos oscuros
El negro puro es el color de fondo equivocado para el modo oscuro en la mayoría de las interfaces: sin margen debajo para la elevación, con brillo por halation. El rango de casi-negro que sí funciona.
- OLED y el negro puro: el debate
El OLED hace tentador un modo oscuro en negro puro: los píxeles negros se apagan y ahorran energía. Qué cuesta el #000 —elevación, arrastre, deslumbramiento— y por qué el casi negro sigue siendo el valor por defecto.
- Por qué los colores se ven más apagados en oscuro (y el ajuste del 20 %)
¿Colores lavados en modo oscuro? El mismo croma se lee más apagado sobre casi negro — el contraste simultáneo explica por qué, y un aumento de croma de ~20% restaura la viveza.
- prefers-color-scheme: cómo usarlo bien en CSS
Cómo funciona prefers-color-scheme: la media query como valor por defecto, una anulación con data-theme para el interruptor manual, color-scheme y el arreglo del destello del tema equivocado.
- Probar una paleta oscura
Pruebas de modo oscuro en siete comprobaciones: revisa el contraste por tema, la separabilidad de superficies, los estados, el deslumbramiento, la visión del color y el contenido con el brillo nocturno.
- Tokens semánticos para el cambio de tema
Los design tokens de modo oscuro explicados: roles semánticos que contienen un valor por tema, por qué el mapeo oscuro no es un espejo, y el CSS que cambia de tema.
- Trampas de contraste en modo oscuro
El contraste en modo oscuro conserva los mismos mínimos WCAG, pero los fallos se desplazan: los grises medios se hunden, los colores de marca se apagan y el blanco puro cumple la matemática pero deslumbra.
Observa una paleta cruzar al otro lado
La cura más rápida para el pensamiento de inversión es ver una derivación en acción: alterna una paleta completa entre el modo claro y su oscuro derivado —los mismos colores semilla, con el lado oscuro ejecutando su propia curva de luminosidad y el aumento de croma aplicado. Lo que cambia, y lo que deliberadamente no, es todo el tema de este hub en una sola interacción.