Quase nunca, e vale a pena entender o porquê através de números, e não apenas como uma regra geral. Aqui estão os fundos dark e as superfícies de card de cinco paletas distintas em produção, em HSL:

Três padrões, todos consistentes, nenhum deles acidental.

• Nada está com 0% de luminosidade. O tom mais escuro é 8%. O preto puro é o único valor sem margem abaixo dele — no momento em que você precisa de uma superfície *abaixo* do fundo, não há para onde ir.
• Os cards são mais claros que o fundo, por 3 a 5 pontos. Em interfaces escuras, o que está elevado é mais claro. Isso inverte o instinto do light mode, onde um card costuma ser o elemento mais claro sobre uma página colorida.
• Apenas um dos cinco é cinza puro. Os demais possuem matiz — 30, 222, 128, 36 — geralmente puxados para a cor de destaque. Um neutro escuro com matiz parece planejado; um sem matiz parece um padrão, porque ele é o padrão.

A maneira mais rápida de criar um dark mode ruim é inverter a luminosidade de cada valor do light mode. Quatro coisas específicas quebram, aproximadamente nesta ordem:

1. As sombras param de funcionar. Uma sombra é a escuridão projetada sobre uma superfície mais clara. Em uma superfície escura, não resta nada para escurecer, então cada pista de elevação que você tinha desaparece silenciosamente e a interface fica plana.
2. O destaque falha no contraste. Uma cor de marca em tom médio saturado que funciona bem no branco costuma ser escura demais contra um fundo quase preto. Inverter os neutros não a afeta, então ela falha de forma sutil, em vez de óbvia.
3. As bordas somem ou gritam. Uma borda no light mode é uma linha ligeiramente mais escura. Invertida, ela se torna uma linha ligeiramente mais clara — que ou desaparece contra o card ou brilha contra o fundo, dependendo de onde estiver.
4. Estados desativados e silenciados colapsam. No light mode, estes são cinzas mais claros. Invertidos, tornam-se cinzas escuros sobre um fundo escuro, e o "silenciado" vira "invisível".

Como as sombras não estão disponíveis, interfaces escuras expressam profundidade através da luminosidade da superfície. É isso que a diferença entre fundo e card na tabela acima está fazendo: cada nível acima na pilha é um nível acima em luminosidade.

Você precisa de pelo menos três níveis, e vale a pena nomeá-los em vez de improvisar: o fundo da página, uma superfície elevada (cards, painéis) e uma superfície de sobreposição (popovers, dropdowns, diálogos) que fica acima de ambas. Espaçá-los entre 3 a 5 pontos de luminosidade mantém as fronteiras legíveis sem transformar a tela em listras. Abaixo de 3 pontos, os níveis deixam de ser distinguíveis em brilho normal; muito acima de 6, a superfície superior começa a parecer um painel de light mode que alguém inseriu ali.

Observe novamente as cores primárias daqueles mesmos cinco kits: 12 71% 46%, 46 85% 60%, 225 63% 80%, 114 47% 50%, 23 92% 60%. Todas são tons claros ou médios. Nenhuma é uma versão profunda e saturada da matiz, porque uma cor profunda e saturada em uma superfície quase preta é difícil de ler e cansativa de olhar.

A regra geral é que um destaque de light mode deve clarear e, geralmente, dessaturar para o dark mode. Clarear garante contraste; dessaturar impede que a cor "vibre" contra o neutro escuro, que é o efeito que torna alguns temas escuros fisicamente cansativos. E o destaque precisa de sua própria decisão de primeiro plano: uma cor brilhante o suficiente para ser lida no escuro costuma ser brilhante o suficiente para exigir texto *escuro* sobre ela, o inverso da combinação do light mode.

Verifique ambas as direções contra uma meta de contraste. O texto do corpo sobre o fundo é o óbvio; os dois que costumam ser esquecidos são o texto silenciado em um card e o primeiro plano do destaque sobre o próprio destaque.

É aqui que a maioria das galerias de paletas te deixa. Uma linha de cinco hexes indica o clima, mas não responde a quase nenhuma das perguntas que uma tela real faz: qual a cor de uma borda em um card, como fica o texto silenciado em uma sobreposição, como é um botão destrutivo quando está desativado, qual a cor do anel em um input com foco.

A lista de funções é a mesma em ambos os modos, que é o ponto: background, foreground, card, card-foreground, popover, popover-foreground, muted, muted-foreground, primary, primary-foreground, secondary, accent, destructive, border, input, ring, além de séries de gráficos. Defina-os uma vez por modo e cada componente se resolve sem que ninguém precise escolher. Ignore isso e cada nova tela escolherá cores diferentes. A lista completa e a finalidade de cada função estão em explicação sobre design tokens de cores semânticas.

Tudo acima é uma regra. Estes são quatro conjuntos escuros que a seguem, escolhidos porque resolvem o mesmo problema de maneiras visivelmente diferentes. Leia o par background e card em cada um: esse intervalo é o modelo de elevação, e é a decisão que mais determina se uma UI escura parece planejada ou apenas invertida.

As interfaces são cada vez mais construídas por agentes de código a partir de briefings escritos, e o dark mode é a lacuna mais comum nesses documentos. Analisamos 299 arquivos DESIGN.md públicos — o arquivo que um agente de código lê antes de escrever a UI — e medimos a cobertura de cada um.

A consequência é previsível. Quando solicitado a criar uma variante dark sem diretrizes escritas, o agente inverte os tons de cinza — exatamente a ação que quebra os quatro pontos listados anteriormente. Ele produz algo plausível na primeira tela e inconsistente na quinta; e como cada tela individual parece correta, ninguém percebe o erro até que todo o app esteja pronto.

1. 1

   Empilhe três superfícies

   Coloque um overlay sobre um card sobre o fundo, com uma borda de um pixel em cada. Se qualquer limite desaparecer, seus degraus de luminosidade estão muito próximos ou sua função de borda está acumulando tarefas demais.

2. 2

   Renderize texto muted em todas as superfícies

   Não apenas no fundo. O 'muted-on-card' é onde as paletas invertidas geralmente falham, e é o estado de texto mais comum em interfaces densas.

3. 3

   Crie uma confirmação destrutiva

   Isso testa a cor destrutiva, seu foreground, seu hover e sua borda simultaneamente — o grupo de funções que as pessoas definem por último e usam primeiro.

4. 4

   Foque em algo

   Use o Tab para navegar até um input. O anel de foco é uma cor que ninguém escolhe deliberadamente; então, ou é a sua cor de destaque fazendo um trabalho para o qual não serve, ou é um padrão do navegador que ninguém escolheu.

5. 5

   Analise uma tabela densa

   Três tons de cinza lado a lado é o maior desafio de uma paleta dark. Uma paleta que sobrevive a uma tabela de configurações sobrevive facilmente a uma página de marketing; o inverso não é verdadeiro.

• Começar com preto puro. Isso elimina o nível abaixo do seu fundo antes mesmo de você descobrir que precisa de um.
• Reutilizar a cor de destaque do light mode sem alterações. Geralmente, ela precisa de mais luminosidade, frequentemente de menos saturação e pode exigir texto escuro sobre ela.
• Manter sombras e adicionar degraus de luminosidade. Escolha uma única linguagem de elevação. Usar ambas faz com que superfícies elevadas pareçam borradas.
• Definir apenas o que a primeira tela exigia. As funções que você ignora são aquelas que a próxima tela irá inventar, e ela as inventará de forma diferente.
• Testar em uma página de marketing. Seções hero favorecem qualquer paleta. Teste na tela mais densa que você tiver.