Elevación en modo oscuro: más claro significa más cerca

En modo oscuro, la elevación se señala con luminosidad en lugar de sombra: cuanto más alta se sitúa una superficie, más clara se vuelve. El suelo de la página es el valor más oscuro del tema; las tarjetas, los elementos elevados y las superposiciones se aclaran progresivamente por encima de él, y los diálogos son los más claros de todos. El “elevado significa sombra debajo” del modo claro apenas se percibe sobre un fondo oscuro, así que los temas oscuros invierten el canal — y esa inversión convierte la elevación de un adorno en un sistema: una escalera de valores de superficie casi oscuros que hay que presupuestar, espaciar y comprobar como cualquier otra escala.

Este artículo cubre el mecanismo — por qué fallan las sombras, qué aspecto tiene la escalera en números y dónde empiezan a agolparse sus pasos. Da por sentado el marco de nuestra guía del modo oscuro. Un tema oscuro es una paleta derivada con sus propias reglas, no un tema claro recoloreado.

¿Por qué las sombras no señalan altura en superficies oscuras?

Una sombra funciona por ser más oscura que lo que la rodea. En una página blanca hay muchísimo espacio por debajo del valor de la superficie — una tarjeta en el extremo alto del rango de luminosidad puede proyectar una sombra gris suave varios pasos más oscura y el ojo lee la diferencia al instante. En una página casi negra ese espacio desaparece: el fondo se sitúa cerca del extremo inferior del rango, y una sombra proyectada sobre él es oscuro sobre oscuro, una señal casi sin espacio para existir. La sombra se sigue dibujando; simplemente no tiene nada que decir.

Así que los temas oscuros reclutan el canal opuesto. La convención — popularizada por el sistema de elevación de Material, que superpone cantidades crecientes de blanco sobre las superficies oscuras elevadas — es que las superficies se aclaran a medida que suben. La intuición física se sostiene: en una habitación oscura, lo que se sitúa más cerca de la fuente de luz capta más de ella. Más claro se lee como más cerca, y el ojo acepta la gramática sin que se lo enseñen.

¿Qué aspecto tiene una escalera de elevación oscura en números?

Como sistema, la inversión significa que un tema oscuro necesita algo que los temas claros obtienen casi gratis de las sombras: una escalera explícita de valores de superficie. Esta es una escalera de cuatro niveles construida sobre un ancla teñida por la marca — un croma susurrado de 0,02 al tono del azul de marca #2563eb:

La aritmética es el diseño. Cuatro niveles que abarcan ≈ 0,12 de luminosidad significan tres huecos de ≈ 0,04 cada uno — cómodamente el doble del umbral de ≈ 0,02 donde dos superficies oscuras se vuelven difíciles de distinguir. Cada nivel se distingue de su vecino, y toda la pila se mantiene por debajo del punto donde una superficie deja de leerse como oscura.

Abre esta escalera en Scale Composer — los cuatro niveles de superficie apilados sobre el ancla, con el hueco de luminosidad entre cada par medido y mostrado frente al umbral de 0,02.

¿Cuántos niveles de elevación puede sostener un tema oscuro?

Menos de los que te gustaría, y la aritmética dice por qué. La escalera vive en una banda estrecha: empieza en el ancla de la página (≈ 0,13–0,18) y debería terminar mientras la superficie más alta aún se lee como una superficie oscura y no como una gris — en la práctica no mucho más arriba de L ≈ 0,3. Llamemos al tramo utilizable ≈ 0,12.

Cuatro niveles en ese tramo daban huecos de ≈ 0,04. Empuja a seis niveles y el mismo tramo se divide en cinco huecos de ≈ 0,024 — rozando la diferencia apenas perceptible de ≈ 0,02, el punto donde las superficies adyacentes se difuminan en una misma cosa y la historia de la elevación deja de poder contarse. Aquí es donde las paletas oscuras generadas necesitan instrumentación: Scale Composer avisa cuando dos pasos caen a menos de 0,02 L el uno del otro, y una pila de superficies oscuras es el lugar más común para desencadenarlo.

La escapatoria tentadora — ensanchar el tramo en lugar de estrechar los huecos — cambia un fallo por otro: un diálogo a L ≈ 0,35 tiene una separación limpia de todo lo que hay debajo, pero tiende a leerse como un panel gris claro de visita en un tema oscuro en lugar de como la superficie más alta del propio tema. La conclusión honesta es que los niveles de elevación en modo oscuro son un presupuesto. Gastarlos en niveles que los usuarios pueden distinguir de verdad supera a una escalera de seis peldaños que nadie puede leer.

¿Siguen teniendo un papel las sombras y los bordes?

Ambos — la inversión degrada las sombras, no las despide.

En las elevaciones más altas, una sombra suave combinada con el paso de luminosidad todavía se gana su sitio: un diálogo que flota sobre un diseño cargado se beneficia de un borde que lo separa de aquello que solapa, y a esa altura por fin hay algo debajo lo bastante claro como para que una sombra se registre contra ello. El patrón que hay que evitar son las sombras en lugar de pasos de luminosidad, no las sombras además de ellos.

Los bordes finísimos son la otra señal legítima. Un borde de un píxel con un valor ligeramente más claro marca el límite de una superficie sin gastar nada del presupuesto de luminosidad — los lenguajes de diseño plano se apoyan en esto, y es más barato y nítido que un paso de escalera, a costa de la atmósfera: los bordes dibujan un mapa de la elevación en lugar de crear la profundidad en sí. Muchos temas oscuros mezclan ambos — pasos de escalera para la pila principal, bordes donde los niveles deben anidarse unos dentro de otros.

Somete a prueba tu propia escalera

La aritmética del presupuesto convence más cuando son tus superficies las que se agolpan. Empuja una escalera de elevación oscura a seis niveles — añade peldaños y observa cómo los huecos se encogen hacia el umbral de 0,02 hasta que salta el aviso, luego decide cuántos niveles necesita de verdad tu tema.