Dark mode de verdade

A forma mais rápida (e mais errada) de implementar dark mode é pegar cada cor do modo claro e inverter o valor de luminância. O resultado costuma ficar com contraste exagerado em uns lugares e insuficiente em outros, porque dark mode não é o modo claro de cabeça pra baixo — é um sistema com regras próprias de contraste e, principalmente, de elevação.

Elevação se inverte, não some

No modo claro, um elemento "elevado" (um card, um menu flutuante, um modal) costuma ficar branco ou quase branco, destacado do fundo por uma sombra — o convívio da sombra com um fundo claro sugere que aquele elemento está mais perto de quem olha. No modo escuro, sombra praticamente não aparece sobre um fundo já escuro — a convenção que substitui a sombra é a superfície ficar progressivamente mais clara quanto mais "elevada" (mais perto de quem olha) ela for.

:root[data-theme="dark"] {
  --bg-base: #121212;
  --surface-1: #1e1e1e; /* card */
  --surface-2: #2a2a2a; /* menu, popover */
  --surface-3: #383838; /* modal */
}
/* no modo claro a lógica é oposta: a superfície mais elevada tende a ficar
   mais próxima do branco, apoiada por sombra, não por ficar mais escura */

Por que preto puro cansa mais do que cinza bem escuro

Usar #000000 puro como fundo parece a escolha "mais escura possível", mas o contraste extremo entre preto absoluto e texto claro (branco puro, por exemplo) é desconfortável de sustentar por muito tempo — o olho precisa reajustar constantemente entre uma área com luminância zero e uma com luminância máxima bem ao lado. Um cinza bem escuro, como #121212, mantém contraste suficiente pra legibilidade sem esse salto extremo, e também disfarça melhor pequenas variações de tom entre elementos empilhados.

Contraste também precisa ser recalculado, não invertido

Uma cor de destaque saturada que funciona bem no modo claro (por exemplo, um azul vibrante sobre fundo branco) pode ficar com contraste insuficiente ou "vibrar" desconfortavelmente sobre um fundo escuro. Cores de destaque em dark mode geralmente precisam de ajuste de saturação e luminosidade — não é o mesmo hex reaproveitado direto do modo claro.