# Design em modo escuro: fundos, cor e contraste

[Canonical HTML page](https://gradiently.design/pt-br/guide/dark-mode-design)

O modo escuro não é o modo claro invertido. Superfícies, texto, destaques e gradientes precisam de valores próprios, e as regras são diferentes das que você conhece.

## The short version

- Um bom design em modo escuro usa cinza-escuro em vez de preto puro nas superfícies principais, o que suaviza o contraste e deixa espaço para mostrar profundidade.
- Em interfaces escuras, a elevação se mostra pela luminosidade: superfícies mais próximas de quem vê são um pouco mais claras, porque as sombras quase não aparecem em fundos escuros.
- O texto sobre fundos escuros se lê com mais conforto em off-white do que em branco puro, com o texto secundário ainda acima de 4,5:1 de contraste.
- Cores de destaque saturadas que funcionam no branco costumam ficar pesadas no escuro, então os temas escuros usam tons mais claros e suaves dos mesmos matizes.
- Gradientes brilham sobre fundos escuros, mas fazem banding com facilidade ali, então gradientes escuros ganham com uma camada leve de grão.

**Design em modo escuro** significa criar um conjunto separado de valores para superfícies, texto, destaques e imagens, e não inverter as cores do modo claro. Fundos escuros mudam o comportamento da cor: matizes saturados parecem mais pesados, as sombras somem, o texto branco forte ofusca e os gradientes lisos fazem banding. A boa notícia é que as mesmas propriedades deixam os temas escuros lindos quando bem tratadas: a cor brilha, a profundidade parece em camadas e o conteúdo fica calmo à frente.

## Por que evitar fundos de preto puro

O preto puro, `#000000`, com texto branco puro dá o contraste máximo possível de 21:1. Parece ideal, mas muitas vezes é desconfortável: muitos leitores veem o texto claro estourar ou vibrar contra o preto puro, sobretudo em trechos longos. O preto também não deixa lugar mais escuro para ir, então você não consegue mostrar uma superfície abaixo da outra. E em alguns celulares OLED, o conteúdo que rola sobre preto verdadeiro pode deixar um rastro breve quando os pixels ligam. Por esses motivos, as diretrizes do Material Design do Google usam `#121212` como superfície escura de base.

- Base: #0e0f12
- Superfície: #121417
- Elevado: #1a1d22
- Cartão: #22262c
- Menu e popover: #2b3038
- Texto: #e6e8ec
- Texto secundário: #9aa1ad

Uma escala neutra escura. Cada superfície é um pouco mais clara que a de baixo. O texto mede 15:1 e o texto secundário 7,1:1 sobre a cor da Superfície.

## Mostrando elevação com luminosidade

No modo claro, as sombras separam um cartão da página. Num fundo escuro, uma sombra escura quase não aparece. Por isso os temas escuros invertem a lógica: quanto mais perto de quem vê, mais clara é a superfície. A página é a mais escura, os cartões são um degrau mais claros, menus e diálogos ainda mais claros. Mantenha os degraus pequenos e constantes e acrescente uma borda fina num tom um pouco mais claro onde duas superfícies parecidas se encontram.

| Camada | Cor | Separação extra |
| --- | --- | --- |
| Fundo da página | `#0e0f12` | Nenhuma |
| Superfície principal | `#121417` | Nenhuma |
| Cartões | `#22262c` | Borda de 1px `rgb(255 255 255 / 0.06)` |
| Menus e popovers | `#2b3038` | Borda, mais uma sombra escura suave |
| Diálogos | `#2b3038` | Uma camada escurecida sobre tudo que está embaixo |

Elevação por luminosidade. Os valores são um ponto de partida; mantenha os seus degraus regulares.

## Cor do texto e contraste no modo escuro

Use um off-white como `#e6e8ec` no texto corrido em vez de branco puro. Ele ainda dá contraste altíssimo, 15:1 sobre `#121417`, e ofusca menos. O texto secundário pode descer a um cinza-médio, mas confira: `#9aa1ad` fica em 7,1:1 na mesma superfície e em 5,5:1 num cartão mais claro. A WCAG pede pelo menos 4,5:1 para texto normal, seja qual for o tema; o [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica como conferir.

> **O peso parece maior no escuro** Texto claro sobre fundo escuro tende a parecer mais forte que o mesmo peso em escuro sobre claro. Se o texto corrido parece pesado no modo escuro, experimente um peso um pouco mais leve ou um toque a mais de espaçamento entre letras.

## Dessaturando as cores de destaque

Um violeta forte como `#7c3aed` funciona como botão sobre branco. Numa superfície escura ele parece pesado e mede só 3,2:1, baixo demais para links de texto. O tom mais claro `#a78bfa` mede 6,8:1 sobre o mesmo fundo e continua lendo como a mesma cor da marca. A regra geral: deixe os destaques mais claros e um pouco menos saturados nos temas escuros e mantenha o matiz.

### Destaque do modo claro sobre escuro

- Violeta `#7c3aed`: 3,2:1 sobre `#121417`
- Azul `#2563eb`: 3,6:1 sobre `#121417`
- Bordas pesadas e vibrantes em áreas grandes
- Reprova como texto de link

### Tom do modo escuro do mesmo matiz

- Violeta `#a78bfa`: 6,8:1 sobre `#121417`
- Azul `#93c5fd`: 10,2:1 sobre `#121417`
- Suave, luminoso e claramente da marca
- Passa como texto de link

## Gradientes no design em modo escuro

Fundos escuros são onde os gradientes brilham. Um fundo profundo faz a cor parecer luz e não tinta, e é por isso que brilhos, auroras e misturas neon aparecem tanto sobre quase-preto. Mantenha a maior parte da superfície escura e deixe a cor surgir em um ou dois lugares: um brilho atrás do herói, uma borda de gradiente num cartão em destaque, uma lavagem suave no topo da página.

- Brilho no topo de uma superfície escura: `radial-gradient(ellipse at 50% 0%, #3b2a7a, #121417 60%)`
- Luz de canto: `radial-gradient(circle at 85% 15%, #0e7490, #121417 45%)`
- Lavagem violeta suave: `linear-gradient(180deg, #1a1033, #121417 70%)`
- Brasa no horizonte: `radial-gradient(ellipse at 50% 120%, #9d174d, #1a1033 45%, #121417 75%)`

Gradientes de modo escuro que brilham e ainda terminam na cor da superfície, então ficam dentro da interface e não por cima dela.

O problema é o banding. Esmaecimentos escuros e lentos usam poucos tons distintos numa tela de 8 bits, então os degraus ficam visíveis. Uma camada leve de grão os esconde; veja o [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) e, para a web, a [textura de ruído em CSS](https://gradiently.design/pt-br/guide/css-noise-texture). Para fundos construídos inteiramente no escuro, os [fundos de gradiente escuros](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds) trazem paletas.

## Construindo o modo escuro em CSS

Defina as cores uma vez como propriedades personalizadas e troque os valores por tema. O `color-scheme` diz ao navegador para renderizar os próprios controles e barras de rolagem no tema correspondente, e a função `light-dark()` escolhe entre dois valores conforme o esquema ativo.

```css
:root {
  color-scheme: light dark;
  --surface: light-dark(#ffffff, #121417);
  --card: light-dark(#f6f7f9, #22262c);
  --text: light-dark(#16181d, #e6e8ec);
  --text-muted: light-dark(#5b6270, #9aa1ad);
  --accent: light-dark(#7c3aed, #a78bfa);
}

body {
  background: var(--surface);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  img:not([src$=".svg"]) {
    filter: brightness(0.9);
  }
}
```

Um conjunto de tokens, dois temas. Escurecer um pouco as fotos no modo escuro evita que ofusquem contra a página mais escura.

Ofereça um botão manual além de seguir a configuração do sistema e lembre de tudo que vai além da interface: gráficos, ilustrações, logotipos e e-mail precisam ser conferidos nos dois temas. Os [gradientes em e-mail](https://gradiently.design/pt-br/guide/gradients-in-email) mostram como os apps de e-mail tratam o modo escuro.

## Uma checklist de modo escuro

- Superfícies em cinza-escuro, não preto puro, com um degrau claro de luminosidade por elevação.
- Texto corrido off-white com alto contraste; texto secundário ainda acima de 4,5:1.
- Destaques mais claros e suaves, mantendo o matiz da marca.
- Bordas, e não sombras, para separar superfícies parecidas.
- Cor usada como luz em poucos lugares, não em todos.
- Grão em gradientes escuros grandes para evitar o banding.
- Logotipos com uma versão clara para fundos escuros; veja o [logotipo sobre fundo de gradiente](https://gradiently.design/pt-br/guide/logo-on-gradient-background).
- Os dois temas revisados num celular de verdade, numa sala escura e à luz do dia.

## FAQ

### O modo escuro deve usar preto puro?

Em geral não nas superfícies principais. Um cinza-escuro, como #121212 ou parecido, reduz o ofuscamento, deixa espaço para superfícies elevadas mais claras e evita rastros em algumas telas OLED.

### Qual é a melhor cor de texto para o modo escuro?

Um off-white como #e6e8ec em vez de branco puro. Ele ainda dá contraste altíssimo e ofusca menos.

### Como mostrar profundidade no modo escuro?

Deixe as superfícies mais claras à medida que se aproximam de quem vê e use bordas sutis entre superfícies parecidas, porque as sombras quase não aparecem em fundos escuros.

### Por que as cores da minha marca ficam estranhas no modo escuro?

Cores saturadas escolhidas para fundos brancos parecem pesadas no escuro e podem falhar no contraste. Use tons mais claros e suaves dos mesmos matizes.

### Gradientes funcionam no modo escuro?

Muito bem: a cor brilha em fundos escuros. Use em poucos lugares, termine na cor da superfície e acrescente grão leve para evitar o banding.