Dark Modo e conforto visual

1) Por que um tema escuro

Conforto ocular em baixa iluminação, menos blitzes e «flash de luz».
Energia: Com OLED/AMOLED, as telas escuras gastam menos bateria.
Foco de dados: foco em conteúdo, não em fundo.
A expectativa do usuário é de um padrão de facto.

2) Princípios

1. Fundo cinza escuro> preto puro para superfícies UI (melhor leitura e gradação).
2. O contraste de conteúdo não é «branco em preto», mas tons suaves para textos longos.
3. «Luminosidade» cuidadosa: realce/sotaque suave, mas diferente.
4. Profundidade ≠ sombra: Operamos com uma sombra clara/esverdeada, em vez de um contraste acentuado.
5. Disponibilidade: WCAG AA (mínimo), foco visível e estados compreensíveis.
6. As configurações de sistema são primárias: câmbio automático e movimento reduzido.

3) Painel e tokens (exemplo)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• O sotaque no modo escuro é + 8% a 12% mais claro do que no modo claro.
• Use escala de cinza (4-5 passos) para evitar o # 000 absoluto para grandes áreas (a exceção é o modo AMOLED).

4) Texto e leitura

O texto principal é cinza claro '# E6E8EB' em '# 0E1116'.
Texto secundário: '# A6AEB8'; dicas - um passo mais escuro/transparente.
Leitura longa: tons ligeiramente quentes (reduzindo «galo»).
Links - ênfase + sublinhar padrão; a cor ≠ o único hospedeiro de sentido.

5) Superfícies, profundidade e vidro

Elevations: `base` → `elev1` → `elev2`; cada camada está 2-4% mais clara/quente.
Sombras - suaves, largas, com pouca opacidade; evitar traços «luminosos».
Os painéis de transmissão (blur) são apropriados moderadamente; forneça um contraste de texto com o suprimento.
Os separadores são limites "-bd-soft' ou" hares "pouco visíveis.

6) Estados e foco

Hover: + 2-3% fundo mais claro; Ativo: - 2-3% (mais escuro).
Focus: anel claro (por exemplo, 'outline: 2px solid # 6EA0FF; outline-offset: 2px; '), visível também nos botões de ênfase.
Disabled: reduza o contraste com cuidado; não fique abaixo do nível de leitura do texto.

7) Botões, formulários e tabelas

Primary: fundo '--accent', texto '# 0E1116'.
Segundary: fundo '--bg-elev1', border '--bd-strong', texto '-fg-primary'.
Campos de entrada: fundo '-bg-elev1', com foco em border acentuado; o placeholder é mais tenso, mas lemos.
Tabelas: fundo de zebra mal visível, a seleção da linha é hover - + 2-3% mais clara.

8) Ilustrações, logos e fotos

Logótipos e ícones - versões inversas no escuro; evite linhas de luz finas em fundos saturados.
Foto: Adicione uma máscara escura (40-60%) para cabeçalhos contrastantes acima.
Ícones: espessura unificada, contorno + preenchimento - não são cores «venenosas».

9) Data-visualização em temas escuros

Cores de fila - saturação moderada; pelo menos 5 tons diferentes.
As malhas e eixos são abafados (alfa 20-30%) e as assinaturas são '-fg-muted'.
Anotações/incidentes - brilhantes, mas legíveis; sublinhar com o formulário/marcador, não apenas com a cor.
Dados em branco/liga - «nevoeiro» suaves, não campos brancos.

10) Desempenho e bateria

O OLED realmente economiza preto puro (# 000) - use a opção do usuário no modo AMOLED.
Evite velas grandes sólidas/blur em GPU fracos.
Respeite 'preferers-reduced-motion': simplifique a animação/transição.

11) Comportamento e mudança

O padrão é seguir 'preferers-cor-scheme'.
Dê um botão explícito ao usuário (Light/Dark/System) e guarde a seleção (cookie/localStorage).
Ao mudar de assunto - sem flash: adição prévia da classe de tema ao render.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Disponibilidade (A11y)

Contraste de texto ≥ 4. 5:1 (normal), ≥ 3:1 (grande).
Não codifique o estado apenas em cores: use ícone/pattern/assinatura.
Os estilos de foco e navegação por teclado são obrigatórios.
Papéis, editoras, tabas.

13) Anti-pattern

Um texto totalmente branco em um fundo totalmente negro em grandes praças é «cheio» e fadiga.
Sotaques de neon no escuro - «ruído de luz».
Sombras de alto contraste («cinza em preto» com limite rígido).
Texto transparente na foto sem máscara.
Placeholder em extinção (alfa baixo demais).

14) Exemplos de componentes

Botão

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

Cartão

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Plano de teste

Iluminação: sala escura/luz do dia/noite de rua.
Definições OLED e IPS, móvel/descompasso, densidades diferentes.
A11y: cheque de contraste, passagem de teclado, lisura placeholder 'ov.
Percepção: teste de fadiga ocular ab e erros de digitação à noite.
Perfomance: métricas RUM (INP/CLS) após a inclusão do tema escuro; carga de GPU (efeitos blur/sombra).

16) Métricas de qualidade

Contrast Violations/1k elementos (alvo: → 0).
Complaint Rate em «escuro e brilhante demais».
Night Sessions Complition (métricas comportamentais das sessões 22: 00-06: 00).
INP/CLS p75 em Dark Modo vs Light (igual ao básico).
Opt-in Dark Modo e retenção dos usuários que selecionaram o tema.

17) Folha de cheque de lançamento

• Painel de tópico escuro com 4 a 5 níveis de superfícies
• O contraste texto/ícone/limite corresponde ao WCAG AA
• Estilos de foco e estados visíveis (hover/ativo/disabled)
• Logos/ícones/foto adaptados, máscaras adicionadas à foto
• Gráficos - grades abafadas, assinaturas de leitura, filas não venenosas
• Botão Light/Dark/System, salvar a seleção sem «flash»
• Respeitar 'preferers-cores-scheme' e 'preferers-reduced-motion'
• RUM/perf-dashboard, alertas de regressão

18) Plano de implementação (3 iterações)

Iteração 1 - Fundações (1-2 semanas)

Painel/tokens, superfícies básicas (base/elev1/elev2), texto/borda, botões/campos/tabela, botões de assunto.

Iteração 2 - Detalhamento (3-4 semanas)

Gráficos e ilustrações no escuro, máscaras na foto, foco/estado, animações considerando reduced-motion, auditoria de perf.

Iteração 3 - Otimização (contínua)

Modo AMOLED como opção, configuração fina de contrastes, testes de usability à noite, comparação RUM Light vs Dark, roteiros regulares/OX.

19) Mini-FAQ

Fazer um fundo preto?
Para a UI é melhor o cinza escuro profundo; # 000 limpo deixar a opção «modo AMOLED».

É preciso aumentar a intensidade do sotaque?
No escuro, geralmente, o contrário é ligeiramente iluminado e diminui a saturação para não «brilhar».

Como estar com as imagens dos banners?
Adicione um suprimento escuro/máscara, verifique o contraste entre o texto e o logotipo.

Resultado

Um tema escuro não é uma inversão de cores, mas um modo de design separado, como painel elaborado, níveis de superfícies, leitura, estados corretos, gráficos e mídia adaptados, e respeito às configurações do sistema. Baseie-se em tokens, controle de contraste e perfomance - e Dark Modo será uma ferramenta confortável, estável e bonita para usuários noturnos e diurnos.