# Design em modo escuro: fundos, cor e contraste

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

O modo escuro não é o modo claro invertido. Superfícies, texto, acentos e gradientes precisam de valores próprios, e as regras são diferentes das que já conheces.

## The short version

- Um bom design em modo escuro usa cinzento escuro em vez de preto puro nas superfícies principais, o que suaviza o contraste e deixa espaço para mostrar profundidade.
- Nas interfaces escuras, a elevação mostra-se com luminosidade: as superfícies mais próximas de quem vê são ligeiramente mais claras, porque as sombras quase não se veem em fundos escuros.
- O texto em fundos escuros lê-se com mais conforto em branco-sujo do que em branco puro, e o texto secundário deve manter mais de 4,5:1 de contraste.
- As cores de acento saturadas que funcionam sobre branco costumam parecer pesadas no escuro, por isso os temas escuros usam tons mais claros e suaves dos mesmos matizes.
- Os gradientes brilham em fundos escuros mas criam faixas com facilidade, por isso beneficiam de uma camada leve de grão.

**Design em modo escuro** significa construir um conjunto separado de valores para superfícies, texto, acentos e imagens, e não inverter as cores do modo claro. Os fundos escuros mudam o comportamento da cor: os matizes saturados parecem mais pesados, as sombras desaparecem, o texto branco brilhante encadeia e os gradientes suaves criam faixas. A boa notícia é que as mesmas propriedades tornam os temas escuros bonitos quando bem tratadas: a cor brilha, a profundidade parece feita de camadas e o conteúdo fica calmamente à frente.

## Porque 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 espalhar-se ou vibrar sobre preto puro, sobretudo em passagens longas. O preto também não deixa nada mais escuro para onde ir, e por isso não dá para mostrar uma superfície abaixo de outra. E nalguns telemóveis OLED, o conteúdo que se desloca sobre preto verdadeiro pode deixar um rasto breve quando os píxeis acendem. As diretrizes do Material Design da Google usam `#121212` como superfície escura de base por estas razões.

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

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

## Mostrar 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 se vê. Por isso os temas escuros invertem a lógica: quanto mais perto de quem vê está uma superfície, mais clara é. A página é a mais escura, os cartões são um degrau mais claros, os menus e diálogos mais claros ainda. Mantém os degraus pequenos e coerentes e junta uma borda fina num tom ligeiramente 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 película escurecida sobre tudo o que fica por baixo |

Elevação por luminosidade. Os valores são um ponto de partida; mantém os teus degraus uniformes.

## Cor do texto e contraste no modo escuro

Usa um branco-sujo como `#e6e8ec` no texto corrido em vez de branco puro. Continua a dar um contraste muito alto, 15:1 sobre `#121417`, e encadeia menos. O texto secundário pode descer para um cinzento médio, mas verifica: `#9aa1ad` mantém 7,1:1 sobre a mesma superfície e 5,5:1 sobre um cartão mais claro. A WCAG pede pelo menos 4,5:1 para texto normal, seja qual for o tema; o guia de [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica como verificar.

> **O peso parece maior no escuro** O texto claro sobre fundo escuro tende a parecer mais grosso do que o mesmo peso a escuro sobre claro. Se o texto corrido parecer pesado no modo escuro, experimenta um peso ligeiramente mais leve ou um pouco mais de espaçamento entre letras.

## Dessaturar as cores de acento

Um violeta forte como `#7c3aed` funciona como botão sobre branco. Numa superfície escura parece pesado e mede apenas 3,2:1, baixo demais para ligações em texto. O seu tom mais claro `#a78bfa` mede 6,8:1 sobre o mesmo fundo e lê-se como a mesma cor da marca. A regra geral: passa os acentos para mais claros e um pouco menos saturados nos temas escuros, mantendo o matiz.

### Acento do modo claro sobre escuro

- Violeta `#7c3aed`: 3,2:1 sobre `#121417`
- Azul `#2563eb`: 3,6:1 sobre `#121417`
- Arestas pesadas e vibrantes em áreas grandes
- Falha como texto de ligação

### Tom do modo escuro do mesmo matiz

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

## Gradientes no design em modo escuro

Os 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 néon aparecem tantas vezes sobre quase preto. Mantém a maior parte da superfície escura e deixa a cor aparecer em um ou dois sítios: um brilho por trás de um cabeçalho, uma margem em gradiente num cartão em destaque, uma mancha suave no topo de uma 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%)`
- Mancha violeta suave: `linear-gradient(180deg, #1a1033, #121417 70%)`
- Brasa no horizonte: `radial-gradient(ellipse at 50% 120%, #9d174d, #1a1033 45%, #121417 75%)`

Gradientes do modo escuro que brilham e ainda assim acabam na cor da superfície, para ficarem dentro da interface e não por cima dela.

O problema são as faixas. Os desvanecimentos escuros e lentos usam poucos tons distintos num ecrã de 8 bits, e os degraus tornam-se visíveis. Uma camada leve de grão esconde-os; vê [faixas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) e, para a web, [textura de ruído em CSS](https://gradiently.design/pt-pt/guide/css-noise-texture). Para fundos construídos por inteiro no escuro, os [fundos com gradiente escuro](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) têm paletas.

## Construir o modo escuro em CSS

Define as cores uma vez como propriedades personalizadas e troca os valores por tema. O `color-scheme` diz ao navegador para desenhar os seus próprios controlos e barras de deslocação 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 só conjunto de tokens, dois temas. Escurecer ligeiramente as fotografias no modo escuro evita que encadeiem contra a página mais escura.

Dá às pessoas um interruptor manual além de seguir a definição do sistema, e lembra-te de tudo o que fica para além da interface: gráficos, ilustrações, logótipos e email precisam de ser verificados nos dois temas. Os [gradientes em email](https://gradiently.design/pt-pt/guide/gradients-in-email) explicam como as apps de correio tratam o modo escuro.

## Uma lista de verificação do modo escuro

- Superfícies em cinzento escuro, não preto puro, com um degrau claro de luminosidade por elevação.
- Texto corrido em branco-sujo com contraste alto; texto secundário sempre acima de 4,5:1.
- Acentos 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 sítios, não em todo o lado.
- Grão nos gradientes escuros grandes para evitar faixas.
- Logótipos com uma versão clara para fundos escuros; vê o [logótipo sobre um fundo em gradiente](https://gradiently.design/pt-pt/guide/logo-on-gradient-background).
- Os dois temas revistos num telemóvel real, numa sala com pouca luz e à luz do dia.

## FAQ

### O modo escuro deve usar preto puro?

Normalmente não nas superfícies principais. Um cinzento escuro, como #121212 ou parecido, reduz o encadeamento, deixa espaço para superfícies elevadas mais claras e evita rastos em alguns ecrãs OLED.

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

Um branco-sujo como #e6e8ec em vez de branco puro. Continua a dar um contraste muito alto e encadeia menos.

### Como se mostra profundidade no modo escuro?

Faz as superfícies mais claras à medida que se aproximam de quem vê e usa bordas subtis entre superfícies parecidas, porque as sombras quase não se veem em fundos escuros.

### Porque é que as cores da minha marca parecem erradas no modo escuro?

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

### Os gradientes funcionam no modo escuro?

Muito bem: a cor brilha em fundos escuros. Usa-os em poucos sítios, termina-os na cor da superfície e junta grão leve para travar as faixas.