Paleta para modo claro e modo escuro

Para ter modo claro e modo escuro, não inverta as cores. Defina os mesmos papéis (fundo, texto, cor de ação) e escolha uma cor para cada papel em cada modo. Em geral, a cor de ação precisa ficar mais clara no modo escuro para manter o contraste, e o texto não deve ser branco puro sobre preto puro. Depois confira o contraste das duas versões separadamente, porque uma cor que passa no claro pode falhar no escuro.

Por que inverter as cores não funciona

Imagine que sua paleta clara tem fundo bege e botão azul-médio. Se você apenas trocar fundo por escuro e texto por claro, o botão azul-médio vira uma mancha apagada sobre o fundo escuro. Em fundo claro, as cores escuras se destacam. Em fundo escuro, acontece o contrário: as cores claras é que se destacam.

Por isso o modo escuro tem de ser pensado como uma segunda paleta, ligada à primeira pelos papéis. Cada papel tem duas cores, e o resto do design usa só o nome do papel.

Como o site sabe qual modo usar

O sistema operacional da pessoa (Windows, Android, iPhone) tem uma configuração de tema claro ou escuro. O navegador repassa essa preferência ao site, e o CSS pode reagir. Segundo o MDN, a regra prefers-color-scheme detecta se a pessoa pediu tema claro ou escuro, e está disponível nos principais navegadores desde janeiro de 2020. Os valores são light (claro, ou sem preferência) e dark (escuro).

Outra peça é a propriedade color-scheme. Ela avisa ao navegador que a página aceita os dois temas, para que ele ajuste elementos que você não pintou, como barras de rolagem e campos de formulário. O MDN mostra o uso color-scheme: light dark; na raiz da página.

Um exemplo mínimo, em que cada papel tem uma variável (um apelido para a cor):

:root {
  color-scheme: light dark;
  --fundo: #F8F5F0;
  --texto: #1F2430;
  --acao: #2F5D8A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #161A22;
    --texto: #F8F5F0;
    --acao: #8DB8E8;
  }
}

O resto do site usa var(--fundo), var(--texto) e var(--acao). Trocar o modo muda só essas três linhas. Esse jeito de nomear as cores por papel é o que o artigo sobre tokens de cor aprofunda.

Duas paletas para a oficina de bicicletas

Vamos montar a paleta “Azul de dia e de noite” para o site de uma oficina de bicicletas.

1. Papel de fundo. Claro: #F8F5F0, um branco quente. Escuro: #161A22, um azul quase preto.
2. Papel de texto. Claro: #1F2430, azul bem escuro. Escuro: #F8F5F0, o mesmo branco quente.
3. Papel de ação. Claro: #2F5D8A, azul médio. Escuro: #8DB8E8, azul claro.
4. Confira o contraste de cada modo. A WCAG, o conjunto de regras de acessibilidade do W3C, pede no nível AA 4,5:1 para texto normal e 3:1 para texto grande (a WCAG 2.2, de outubro de 2023, manteve esses valores). Calculei os números:

Modo	Par	Razão
Claro	#1F2430 sobre #F8F5F0	14,27:1
Claro	#2F5D8A sobre #F8F5F0	6,32:1
Escuro	#F8F5F0 sobre #161A22	16,03:1
Escuro	#8DB8E8 sobre #161A22	8,43:1
Escuro	#2F5D8A sobre #161A22	2,53:1

A última linha mostra o motivo de a cor de ação mudar. O azul médio, que passa com folga no modo claro (6,32:1), cai para 2,53:1 sobre o fundo escuro, abaixo até do mínimo de 3:1. Trocando para o azul claro #8DB8E8, a razão sobe para 8,43:1. A cor continua a “mesma família”, só que ajustada para o outro fundo.

Cinco detalhes do tema escuro que a inversão esquece

Evite o par preto puro e branco puro. Texto branco puro sobre fundo preto puro tem contraste altíssimo (21:1) e muita gente acha cansativo em textos longos. Um fundo quase preto, como #161A22, e um texto branco quente ficam mais suaves e continuam acima de 16:1.

Cores muito vivas vibram no escuro. Uma cor saturada (muito intensa) sobre fundo escuro costuma parecer que brilha. Se um vermelho forte incomoda a vista, reduza a saturação.

Níveis de superfície. Cartões e menus costumam ficar um degrau mais claros que o fundo no modo escuro, para criar profundidade. Teste que a diferença apareça, sem virar uma cor nova.

Imagens e logos. Um logo escuro some sobre fundo escuro. Tenha a versão clara, como explicado em paleta de cores para o logo. Fotos com fundo branco também ficam estranhas no escuro: prefira fotos recortadas ou com fundo transparente.

Bordas. Uma borda cinza-clara sobre fundo branco pode virar uma linha berrante no escuro. Ajuste para um tom um pouco acima do fundo.

Cinco descuidos ao entregar os dois temas

• Testar só o modo claro porque “é o que eu uso”.
• Esquecer os estados (passar o mouse, foco, desativado) no segundo modo.
• Deixar o navegador inverter as cores sozinho. O MDN registra que o recurso de tema escuro automático do Chrome pode ser desligado com color-scheme: only light, mas o ideal é entregar as duas paletas prontas.
• Usar preto puro para a sombra dos cartões, que no escuro some.
• Escolher só pela tela do seu computador. Um fundo escuro que parece bom num monitor calibrado pode ficar quase preto num celular com brilho baixo, e os tons próximos deixam de se distinguir. Teste também no aparelho que seu público mais usa.

Roteiro de teste: tema claro, depois tema escuro

Abra o site com o sistema em tema claro e depois em tema escuro. Em cada um, navegue pela página inicial, por um formulário e por uma página de texto longo. Confira se os botões aparecem, se os links se distinguem do texto e se os campos têm borda visível. O roteiro geral está em como testar uma paleta antes de usar, e o cuidado específico com acessibilidade está em modo escuro: cuidados com o contraste.