Casi nunca, y merece la pena ver por qué con datos numéricos en lugar de como una regla general. Aquí tiene los fondos oscuros y las superficies de las tarjetas de cinco paletas de productos distintas, en HSL:

Tres patrones, todos coherentes, ninguno accidental.

• Nada tiene una luminosidad del 0%. El tono más oscuro es del 8%. El negro puro es el único valor que no deja margen inferior: en el momento en que necesita una superficie *por debajo* del fondo, no tiene a dónde ir.
• Las tarjetas son más claras que el fondo, por 3 a 5 puntos. En las interfaces oscuras, lo elevado es más claro. Esto invierte el instinto del modo claro, donde una tarjeta suele ser el elemento más claro sobre una página con tinte.
• Solo uno de los cinco es un gris puro. El resto tienen un matiz —30, 222, 128, 36— generalmente orientado hacia el color de acento. Un neutro oscuro con tinte se percibe como diseñado; uno sin tinte se percibe como un valor predeterminado, porque es el predeterminado.

La forma más rápida de conseguir un modo oscuro deficiente es invertir la luminosidad de cada valor del modo claro. Cuatro cosas específicas fallan, aproximadamente en este orden:

1. Las sombras dejan de funcionar. Una sombra es oscuridad proyectada sobre una superficie más clara. En una superficie oscura no queda nada que oscurecer, por lo que cada indicador de elevación desaparece silenciosamente y la interfaz se aplana.
2. El acento falla en el contraste. Un color de marca saturado de tono medio que se lee nítidamente sobre blanco suele ser demasiado oscuro frente a un fondo casi negro. Invertir los neutros no lo afecta, por lo que falla de forma sutil en lugar de obvia.
3. Los bordes desaparecen o resaltan demasiado. Un borde en modo claro es una línea ligeramente más oscura. Invertido, se convierte en una línea ligeramente más clara, que o bien desaparece contra la tarjeta o brilla contra el fondo, dependiendo de la superficie en la que se encuentre.
4. Los estados desactivados y atenuados colapsan. En el modo claro, estos son grises más claros. Invertidos, se convierten en grises oscuros sobre un fondo oscuro, y lo "atenuado" pasa a ser "invisible".

Dado que las sombras no están disponibles, las interfaces oscuras expresan la profundidad a través de la luminosidad de la superficie. Eso es lo que hace la diferencia entre el fondo y la tarjeta en la tabla anterior: cada nivel superior en la pila es un paso más en luminosidad.

Se necesitan al menos tres niveles, y conviene nombrarlos en lugar de improvisar: el fondo de la página, una superficie elevada (tarjetas, paneles) y una superficie de superposición (popovers, menús desplegables, diálogos) que se sitúa por encima de ambas. Espaciarlas entre 3 y 5 puntos de luminosidad mantiene los límites legibles sin convertir la pantalla en un conjunto de franjas. Por debajo de los 3 puntos, los niveles dejan de ser distinguibles con un brillo normal; muy por encima de los 6, la superficie superior empieza a parecer un panel de modo claro insertado por error.

Observe de nuevo los colores primarios de esos mismos cinco kits: 12 71% 46%, 46 85% 60%, 225 63% 80%, 114 47% 50%, 23 92% 60%. Todos son tonos claros o medios. Ninguno es una versión profunda y saturada del matiz, porque un color profundo y saturado sobre una superficie casi negra es difícil de leer y fatigoso para la vista.

La regla general es que un acento de modo claro debe aclararse y, generalmente, desaturarse para el modo oscuro. Aclararlo aporta contraste; desaturarlo evita que vibre contra el neutro oscuro, que es el efecto que hace que algunos temas oscuros resulten físicamente agotadores. Además, el acento necesita su propia decisión de primer plano: un color lo suficientemente brillante para leerse sobre oscuro suele ser lo suficientemente brillante como para requerir texto *oscuro* encima, lo cual es lo opuesto a la combinación del modo claro.

Verifique ambas direcciones frente a un objetivo de contraste. El texto del cuerpo sobre el fondo es el más obvio; los dos que suelen olvidarse son el texto atenuado sobre una tarjeta y el primer plano del acento sobre el propio acento.

Aquí es donde la mayoría de las galerías de paletas le dejan. Una fila de cinco códigos hex le indica el estado de ánimo, pero no responde a casi ninguna de las preguntas que plantea una pantalla real: ¿de qué color es el borde de una tarjeta?, ¿cómo se ve el texto atenuado en una superposición?, ¿cómo es un botón destructivo cuando está desactivado?, ¿de qué color es el anillo de un campo de entrada enfocado?

La lista de roles es la misma en ambos modos, que es precisamente el objetivo: background, foreground, card, card-foreground, popover, popover-foreground, muted, muted-foreground, primary, primary-foreground, secondary, accent, destructive, border, input, ring, además de las series de gráficos. Defínalos una vez por modo y cada componente se resolverá sin que nadie tenga que elegir. Si se omiten, cada pantalla nueva volverá a elegir, y de forma distinta. La lista completa y la función de cada rol se encuentran en explicación de los design tokens de color semántico.

Todo lo anterior es una regla. Estos son cuatro conjuntos oscuros que la siguen, elegidos porque resuelven el mismo problema de maneras visiblemente diferentes. Observe el par background y card en cada una: esa diferencia es el modelo de elevación, y es la decisión que más determina si una UI oscura se percibe como diseñada o como invertida.

Cada vez más interfaces son creadas por agentes de código que trabajan a partir de un brief escrito, y el modo oscuro es el elemento que más suele faltar en dichos briefs. Analizamos 299 archivos DESIGN.md públicos —el archivo que lee un agente de código antes de escribir la UI— y medimos qué aspectos cubren.

La consecuencia es previsible. Si se le pide una variante oscura sin instrucciones escritas, el agente invierte los grises, que es precisamente el movimiento que rompe los cuatro puntos mencionados anteriormente. Produce algo plausible en la primera pantalla e inconsistente hacia la quinta y, como cada pantalla individual parece correcta, nadie lo nota hasta que la aplicación está totalmente construida.

1. 1

   Apile tres superficies

   Coloque una superposición sobre una tarjeta y esta sobre el fondo, con un borde de un píxel en cada una. Si algún límite desaparece, los pasos de luminosidad están demasiado juntos o el rol del borde está cumpliendo una doble función.

2. 2

   Renderice texto atenuado en cada superficie

   No solo en el fondo. El texto atenuado sobre tarjeta es donde suele fallar una paleta invertida, y es el estado de texto más común en una interfaz densa.

3. 3

   Cree una confirmación destructiva

   Esto pone a prueba el color destructivo, su primer plano, su estado hover y su borde simultáneamente: el grupo de roles que la gente define al final y utiliza primero.

4. 4

   Enfoque un elemento

   Use la tecla Tab para ir a un input. El anillo de enfoque es un color que nadie elige deliberadamente, por lo que termina siendo el color de acento haciendo un trabajo para el que no es apto, o un valor predeterminado del navegador que nadie eligió.

5. 5

   Observe una tabla densa

   Tener tres grises contiguos es lo más difícil para una paleta oscura. Una paleta que sobrevive a una tabla de ajustes sobrevive trivialmente a una página de marketing; lo contrario no ocurre.

• Empezar con negro puro. Elimina el nivel inferior a su fondo antes de que se dé cuenta de que lo necesita.
• Reutilizar el acento del modo claro sin cambios. Normalmente necesita aclararse, a menudo desaturarse y puede requerir texto oscuro encima.
• Mantener las sombras y añadir pasos de luminosidad. Elija un único lenguaje de elevación. Hacer ambas cosas hace que las superficies elevadas parezcan borrosas.
• Definir solo lo que necesitaba la primera pantalla. Los roles que omite son los que la siguiente pantalla inventará, y los inventará de forma distinta.
• Probar en una página de marketing. Las secciones hero favorecen cualquier paleta. Pruebe en la pantalla más densa que tenga.