El modo oscuro no es inversión

El modo oscuro más rápido jamás lanzado es una línea de CSS: filter: invert(1) hue-rotate(180deg) sobre el elemento raíz. Un equipo contra el reloj lo prueba, y la primera captura parece casi plausible: las superficies claras se han oscurecido, el texto oscuro se ha aclarado, la maquetación está intacta. Luego alguien lo usa. Las fotos se ven como negativos hasta que se contra-invierte cada una. El azul de marca vuelve como una aproximación mareante de sí mismo. Los bordes que antes se leían como discretas líneas hundidas ahora parecen repujados, los botones en reposo parecen pulsados, y no hay nada concreto que alguien pueda señalar como roto: toda la pantalla simplemente está sutil y uniformemente mal.

El modo oscuro no es el tema claro invertido: es una segunda paleta derivada de las mismas semillas. La inversión reutiliza los valores del tema claro en posiciones espejadas y falla de tres maneras a la vez: las relaciones de rol se voltean en bloque, la elevación pierde su señal y el color se drena sobre el fondo oscuro. La derivación, en cambio, vuelve a ejecutar la construcción de la paleta para un contexto oscuro: su propia curva de luminosidad ascendiendo desde un suelo profundo, el croma reforzado para contrarrestar el apagamiento perceptual, y cada rol revisado de nuevo en cuanto a contraste. Esa distinción sustenta todo lo que hay en nuestra guía de modo oscuro; este artículo trata de por qué falla el enfoque obvio y qué hace en su lugar el que sí funciona.

¿Por qué falla invertir la paleta clara?

La inversión viene en dos grados. El grado tosco es el filtro CSS: invertir los canales RGB convierte cada color en su complementario, por lo que el truco necesita un hue-rotate(180deg) de remate, y aun así los tonos vuelven solo de forma aproximada, y toda imagen necesita rescate. El grado disciplinado conserva el tono y el croma y espeja solo la luminosidad, y vale la pena tomárselo en serio, porque falla por razones que enseñan.

La lógica de rol se rompe. En un tema claro, un borde sutil se sitúa ligeramente más oscuro que la superficie que delimita, y el ojo lo lee como una línea dibujada: un hundido. Espeja la luminosidad y el borde queda ahora ligeramente más claro que su superficie, lo que se lee como repujado: un relieve que capta la luz en vez de un surco que retiene sombra. Multiplica eso por cada relación intermedia —divisores, franjas de tabla, trazos de campos, tintes de hover, texto deshabilitado— y el tema se llena de pequeñas mentiras físicas. El problema más profundo es que algunas relaciones deberían voltearse (el texto oscuro sobre claro pasa con razón a texto claro sobre oscuro) mientras que otras no deben hacerlo, y la inversión no sabe distinguirlas. Las voltea todas, indiscriminadamente.

La elevación se voltea mal. El modo claro señala una superficie elevada con una sombra debajo. Sobre un fondo oscuro esa señal apenas se registra —casi no hay ningún sitio más oscuro adonde pueda ir una sombra—, así que los temas oscuros señalan la altura de la otra manera: las superficies se aclaran a medida que suben, la convención codificada en la guía de tema oscuro de Material. La inversión no hace nada para producir esto. Las sombras sobreviven al espejo, sin sentido, y las relaciones entre superficies aterrizan donde las coloque la aritmética en vez de donde las necesita la lógica de elevación del modo oscuro.

El color se drena. La coloridad percibida se juzga en relación con el entorno, y el mismo valor de croma se ve notablemente más apagado contra un casi-negro que contra blanco. Una paleta invertida traslada los valores de croma del tema claro sin cambiarlos, así que el color de marca llega lavado, y cada insignia y acento llega cansado con él. Las paletas oscuras derivadas contrarrestan esto reforzando el croma —en Scale Composer en torno a un 20 %— mientras que la inversión no sabe que algo necesita contrarrestarse.

¿Qué significa derivar una paleta oscura?

La derivación conserva las entradas y rehace la construcción. Las semillas —los colores de marca de los que creció la paleta— siguen siendo las mismas, así que el tema oscuro es reconociblemente la misma marca. Todo lo que hay aguas abajo se calcula de nuevo para el contexto oscuro.

La curva de luminosidad es el mayor cambio. Una rampa de modo claro va desde casi blanco hasta un escalón profundo —de L ≈ 0,97 a ≈ 0,25— porque las interfaces claras necesitan muchos tintes utilizables y un extremo oscuro modesto. La rampa oscura derivada no espeja eso. Recorre su propia curva, reascendiendo desde un suelo profundo: los escalones de clase-fondo se sitúan alrededor de L ≈ 0,13–0,19, y la rampa sube hasta ≈ 0,95 en el extremo de clase-texto. El croma se replanifica encima —reforzado alrededor de un 20 % respecto a los valores claros, acotado por lo que la gama permite en cada luminosidad—. Y los roles semánticos se rederivan en vez de reapuntarse: los roles de texto, borde y estado se eligen contra las nuevas superficies, con los mínimos de WCAG y APCA comprobados sobre el fondo oscuro, porque un emparejamiento que pasó en blanco no prueba nada sobre un casi-negro. La exportación de tokens entonces lleva los conjuntos de roles claro y oscuro lado a lado — una sección semantic y una semantic-dark — de modo que un cambio de tema intercambia valores resueltos sin recálculo en tiempo de ejecución.

¿Dónde discrepan la inversión y la derivación en cifras?

Toma la rampa azul sembrada desde #2563eb — oklch(0.546 0.215 262.9). La columna izquierda es la rampa clara generada; la del medio es el espejo disciplinado (L → 1 − L, croma conservado); la derecha es la rampa oscura derivada.

Lee primero los dos extremos. La rampa clara abarca de 0,97 → 0,25, así que su espejo abarca de 0,03 → 0,75: un rango construido para un tema claro, volteado, no un rango construido para uno oscuro. El suelo invertido en L 0,03 queda muy por debajo de la zona ≈ 0,13–0,18 donde funcionan los fondos oscuros, en territorio donde viven la halación y el detalle aplastado. Y el techo invertido se detiene en 0,75: el escalón que debería llevar el texto se renderiza como oklch(0.75 0.026 262.9) ≈ #A5AEBF, un gris-azul apagado, mientras que la rampa derivada alcanza ≈ 0,95 — ≈ #E6EFFF, un blanco roto que sí puede hacer el trabajo.

Luego lee el croma en el escalón de trabajo. La inversión conserva C 0,192 y lo baja a L 0,39: ≈ #0134A9, un azul oscuro y apagado que nunca eligió nadie. La rampa derivada coloca el núcleo interactivo en L ≈ 0,54 con el croma reforzado a ≈ 0,23: ≈ #1C5EF1, vívido sobre el fondo oscuro igual que la semilla era vívida sobre blanco.

Abre esta comparación en Scale Composer — la misma semilla azul renderizada dos veces, la inversión ingenua junto a la rampa oscura derivada, con las curvas de luminosidad trazadas una sobre otra para que el espejo y el reascenso sean visibles como formas.

¿Qué sigue necesitando a un diseñador?

La derivación automatiza los valores, no el criterio. Unas cuantas decisiones siguen siendo humanas. Qué elementos conservan toda su viveza es una: un tema oscuro donde cada relleno adopta el croma reforzado puede leerse más ruidoso que su contraparte clara, y decidir qué se mantiene discreto es una decisión de diseño. Las imágenes son otra: las fotografías y las ilustraciones ni se invierten ni se derivan, y elegir para ellas un tratamiento apropiado para lo oscuro es una tarea en sí misma. Y el anclaje de la página —si el fondo más oscuro sigue atado al escalón profundo de la marca o se desacopla en un neutro plano— cambia la temperatura de todo el tema. La derivación te da una paleta de partida correcta; estas decisiones la convierten en una diseñada.

Pruébalo en tu propia paleta

La diferencia entre espejada y derivada es más fácil de sentir que de leer. Deriva una paleta oscura a partir de tu propio color de marca — pega una semilla y observa cómo la rampa oscura sale con su propia curva, su croma reforzado y sus roles revisados, junto a lo que te habría dado una inversión.