O dark mode deve ser preto puro?
Quase nunca, e vale a pena entender o porquê com números em vez de apenas como uma regra prática. Aqui estão os fundos escuros e superfícies de cards de cinco paletas de produtos distintos, em HSL:
| Fundo | Card | Matiz neutro | |
|---|---|---|---|
| Industrial quente | 30 8% 10% | 24 7% 14% | Laranja-acastanhado quente |
| Produto neutro | 0 0% 10% | 0 0% 15% | Cinza puro |
| Azul de arquivo | 222 31% 11% | 222 34% 15% | Azul profundo |
| Verde suave | 128 40% 8% | 137 26% 11% | Verde floresta |
| Dashboard Earth | 36 10% 10% | 36 7% 14% | Areia quente |
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 que não deixa margem abaixo dele. No momento em que você precisa de uma superfície *abaixo* do fundo, você não tem 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.
O único caso para o quase-preto
Telas OLED realmente consomem menos energia em #000000, e uma interface de mídia ou fotografia pode querer que a moldura desapareça. Essa é uma troca deliberada em favor de abrir mão de uma escala de elevação, e funciona quando o conteúdo fornece o contraste. Não é um padrão de uso geral, nem é o que a maioria das pessoas quer quando busca o preto.
O modo escuro não é uma inversã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:
- 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 indício de elevação desaparece silenciosamente e a interface fica plana.
- A cor de destaque perde o contraste. Uma cor de marca saturada em tom médio 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.
- 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 está posicionada.
- 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" torna-se "invisível".
Uma paleta escura é um segundo design, não um filtro aplicado ao primeiro.
Elevação sem sombra
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.
Superfície vs superfície tonal
Alguns sistemas distinguem uma superfície elevada neutra de uma *tonal*, que mistura um pouco da matiz da marca na elevação. Ambas são legítimas. A versão tonal faz com que toda a interface pareça deliberadamente colorida, em vez de "cinza com um destaque"; a versão neutra reserva o significado da cor para as coisas que realmente precisam dela. Escolha uma e aplique em tudo: misturá-las é o que faz um tema escuro parecer dois temas diferentes.
Cores de destaque precisam mudar
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.
Cinco amostras não são uma paleta
É 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 fica um botão destrutivo quando está desativado, qual a cor do anel de foco em um input.
Token specimen · real values
Ambient Sage
Live renderAmbient Sage's actual tokens — the same values its exports use.
A lista de funções é a mesma em ambos os modos, que é justamente 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 de design tokens de cores semânticas.
Ambient Sage
Live renderRendered from the kit's actual tokens, fonts, and treatments
Typography
Plus Jakarta Sans
Color system
28 semantic roles, light + dark
Agent outputs
DESIGN.md, CSS, Tailwind, shadcn
Quatro paletas escuras completas e o que as diferencia
Tudo acima é uma regra. Estes são quatro conjuntos escuros que a seguem, escolhidos porque resolvem o mesmo problema de formas visivelmente diferentes. Leia o par background e card em cada um: essa diferença é o modelo de elevação, e é a decisão que mais determina se uma UI escura parece planejada ou apenas invertida.
Token specimen · real values
Files Archival
Live renderFiles Archival's actual tokens — the same values its exports use.
Token specimen · real values
The Social Club
Live renderThe Social Club's actual tokens — the same values its exports use.
Como ler quatro paletas rapidamente
Ignore o destaque primeiro; é a parte que você lembrará e a que menos importa estruturalmente. Compare background com card para ver o modelo de elevação, depois muted-foreground com card para ver se o texto secundário sobrevive em uma superfície elevada. Essas duas comparações preveem a maior parte do comportamento da paleta em uma tela real.
Por que isso se tornou urgente
As interfaces são cada vez mais construídas por agentes de código trabalhando a partir de um briefing escrito, e o dark mode é a única coisa que mais falta nesses briefings. Analisamos 299 arquivos DESIGN.md públicos, o arquivo que um agente de código lê antes de escrever a UI, e medimos o que eles cobrem.
| Proporção de arquivos | |
|---|---|
| Sem dark mode | 69% |
| Sem papéis de cor semânticos: apenas hex puro | 86% |
| Sem proibições, apenas preferências | 76% |
A consequência é previsível. Ao solicitar uma variante escura sem nada escrito, um agente inverte os cinzas. O movimento exato que quebra todos os quatro pontos listados anteriormente. Ele produz algo plausível na primeira tela e inconsistente na quinta e, como cada tela individual parece boa, ninguém percebe até que todo o app esteja pronto.
Um teste de dez minutos
- 1
Empilhe três superfícies
Coloque um overlay sobre um card sobre o background, com uma borda de um pixel em cada um. Se qualquer limite desaparecer, seus passos de luminosidade estão muito próximos ou seu papel de borda está acumulando funções.
- 2
Renderize texto muted em cada superfície
Não apenas no background. O muted-on-card é onde uma paleta invertida geralmente desmorona, e é o estado de texto mais comum em uma interface densa.
- 3
Crie uma confirmação destrutiva
Ela exercita o destrutivo, seu foreground, seu hover e sua borda juntos: o grupo de papéis que as pessoas definem por último e usam primeiro.
- 4
Foque algo
Dê tab em um input. Um anel de foco é uma cor que ninguém escolhe deliberadamente, então ou é o seu accent fazendo um trabalho para o qual não é bom, ou é um padrão do navegador que ninguém escolheu.
- 5
Olhe para uma tabela densa
Três cinzas um ao lado do outro é a coisa mais difícil que uma paleta dark faz. Uma paleta que sobrevive a uma tabela de configurações sobrevive a uma página de marketing trivialmente; o inverso não é verdadeiro.
Erros comuns
- Começar com preto puro. Isso remove o nível abaixo do seu background antes mesmo de você descobrir que precisa de um.
- Reutilizar o accent do light mode sem alterações. Ele geralmente precisa clarear, muitas vezes precisa dessaturar e pode precisar de texto escuro sobre ele.
- Manter sombras e adicionar passos de luminosidade. Escolha uma linguagem de elevação. Fazer ambos faz com que superfícies elevadas pareçam borradas.
- Definir apenas o que a primeira tela precisava. Os papéis que você pula são os que a próxima tela inventa, e ela os 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.
Navegue por paletas dark completas, não por linhas de swatches
Cada kit aqui define todos os seus papéis de cor tanto em light quanto em dark, além de tipo, raios e movimento: instalável como um item de registro do shadcn. Kits gratuitos não exigem conta.
FAQ
Devo usar preto puro no dark mode?
Geralmente não. Em cinco paletas implementadas, o fundo mais escuro possui 8% de luminosidade HSL e nenhuma possui 0%. O preto puro não deixa superfície abaixo do fundo, então você perde a capacidade de mostrar elementos recuados. A exceção é um contexto de economia de energia em telas OLED ou de visualização de mídia, onde a moldura deve desaparecer.
O dark mode é apenas a inversão da paleta clara?
Não. Quatro coisas deixam de funcionar: as sombras param de surtir efeito porque não há nada mais escuro para escurecer, a cor de destaque geralmente falha no contraste, as bordas ou desaparecem ou brilham dependendo da superfície onde estão, e os estados desativados ou sutis tornam-se invisíveis. Uma paleta escura é um segundo design, não um filtro.
Como mostro elevação no dark mode sem usar sombras?
Através da luminosidade da superfície. Defina pelo menos três níveis (fundo, superfície elevada, overlay) espaçados por aproximadamente 3 a 5 pontos de luminosidade HSL. Abaixo de 3 pontos, os níveis deixam de ser distinguíveis; muito acima de 6, a superfície superior começa a parecer um painel de light mode.
Qual a diferença entre uma superfície neutra e uma superfície tonal?
Uma superfície neutra aumenta apenas a luminosidade; uma superfície tonal também mistura parte da matiz da marca conforme a luminosidade sobe. O tonal faz com que toda a interface pareça deliberadamente colorida; o neutro mantém o significado das cores disponível para elementos que realmente precisam delas. Ambos funcionam, mas misturá-los em um único tema não funciona.
As cores da minha marca funcionam no dark mode?
Geralmente não sem alterações. Um tom médio saturado que funciona bem no branco tende a ser escuro e vibrante demais contra uma superfície quase preta. Aumente a luminosidade para gerar contraste, dessature levemente para evitar a vibração visual e verifique se agora o texto sobre ela deve ser escuro em vez de claro.
De quantas cores uma paleta escura precisa?
Cerca de 28 funções nomeadas, e não apenas cinco amostras: background e foreground, card, popover, muted, primary, secondary, accent, destructive e seus respectivos foregrounds, além de border, input, ring e séries de gráficos. Qualquer coisa que você deixe indefinida será inventada a cada tela, de forma diferente a cada vez.