Gradientes no modo escuro: manter a profundidade sem ofuscar

Os gradientes do modo escuro ficam melhor quando lhes dás cores próprias em vez de reaproveitares as do tema claro. Sobre um fundo escuro o olho adapta-se e cada cor saturada parece mais brilhante, por isso um gradiente que parecia calmo sobre branco começa a ofuscar. Baixa o croma, limita a cor viva a áreas pequenas, tinge o fundo em vez de usares preto puro e troca os valores com prefers-color-scheme ou light-dark(). A profundidade fica; o brilho ofuscante desaparece.

Porque é que os gradientes do tema claro falham no escuro

Três coisas mudam quando a página escurece. As grandes áreas claras passam a ser a coisa mais brilhante da sala, o que se lê como ofuscação e não como cor. As sombras deixam de funcionar, por isso os gradientes que dependiam de arestas escurecidas para dar profundidade perdem-na. E os passos entre tons escuros ficam mais fáceis de ver, por isso os gradientes subtis começam a formar faixas. Design em modo escuro trata do tema em geral; esta página trata dos gradientes.

Cinco regras para gradientes no modo escuro

1. 1

   Tinge o fundo

   Usa um quase preto que tenda para o teu matiz, como #0b0a14 para marcas violeta, em vez de #000000. O preto puro faz a cor parecer colada.

2. 2

   Baixa o croma

   Reduz a saturação em cerca de um terço nas áreas grandes. Em OKLCH, mantém o matiz e reduz o valor de C.

3. 3

   Encolhe a parte brilhante

   Deixa a cor viva ocupar um canto ou um brilho, e deixa a maior parte da superfície perto do fundo.

4. 4

   Eleva, não projetes sombra

   Mostra a elevação com superfícies ligeiramente mais claras e gradientes que se iluminam para o topo, já que as sombras desaparecem em fundos escuros.

5. 5

   Acrescenta grão

   O ruído fino quebra os degraus visíveis nas misturas escuras. Gradientes com grão tem a receita.

Alternar gradientes com prefers-color-scheme

Guarda as cores do gradiente, não gradientes inteiros, em propriedades personalizadas. Assim o tema escuro só tem de redefinir as cores, e todos os componentes que as usam se atualizam. É o mesmo padrão descrito em variáveis CSS para temas.

:root {
  color-scheme: light dark;
  --ground: #faf8ff;
  --glow: #c4b5fd;
  --glow-2: #f9a8d4;
  --hero: radial-gradient(circle at 80% 15%, var(--glow) 0%, transparent 45%),
          radial-gradient(circle at 10% 90%, var(--glow-2) 0%, transparent 50%),
          var(--ground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0a14;
    --glow: #4c1d95;
    --glow-2: #1e3a8a;
  }
}

.hero {
  background: var(--hero);
}

Repara que os brilhos escuros são mais profundos, não mais brilhantes. Sobre um fundo escuro, uma cor só precisa de ser um pouco mais clara do que o que a rodeia para se ler como luz.

Usar light-dark()

A função light-dark() devolve a primeira cor num esquema claro e a segunda num esquema escuro. Precisa de color-scheme: light dark no elemento ou num antecessor, e é suportada no Chrome, Edge, Safari e Firefox atuais. Mantém os dois valores numa só linha, o que facilita rever uma paleta.

:root {
  color-scheme: light dark;
}

.card {
  background: linear-gradient(
    180deg,
    light-dark(#ffffff, #1a1530) 0%,
    light-dark(#f5f3ff, #0b0a14) 100%
  );
  color: light-dark(#1e1b2e, #e9e5f5);
}

Suportar um alternador manual de tema

Muitos sites deixam as pessoas sobrepor a definição do sistema. Põe a escolha no elemento raiz e limita as variáveis a ela. A media query trata do predefinido; o atributo ganha quando alguém escolhe.

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0a14;
  --glow: #4c1d95;
  --glow-2: #1e3a8a;
}

:root[data-theme="light"] {
  color-scheme: light;
}

Reajustar um gradiente para o modo escuro

Aqui fica o mesmo gradiente de marca ajustado paragem a paragem. Trabalhar em OKLCH torna isto previsível, porque a luminosidade e o croma são números separados; OKLCH explicado mostra porquê.

Texto sobre gradientes escuros

O texto claro sobre um gradiente escuro costuma ter contraste de sobra, mas verifica-o onde o gradiente é mais brilhante, não onde é mais escuro. Um título em #e2e8f0 sobre #0b0a14 está muito acima dos 4,5:1 que o WCAG pede ao texto corrido; o mesmo título sobre um brilho violeta intenso pode não estar. Evita também texto corrido em branco puro sobre quase preto: o contraste muito alto causa halação em alguns leitores, por isso um branco suave e sujo é mais gentil. Contraste de cor e acessibilidade tem os números.

Para mais paletas escuras, fundos de gradiente escuros tem um conjunto para copiar. E para publicações sociais e diapositivos, onde não consegues testar cada linha à mão, o Tinta automática do Gradiently escolhe texto claro ou escuro por linha a partir da paleta do próprio Mark, e o Mark move a sua zona mais calma para trás das palavras, por isso um design escuro nunca põe um título sobre o seu brilho mais forte.