Dark mode no app: tema do sistema, contraste e imagens

Usuários de iOS e Android ativam o tema escuro e esperam que os apps acompanhem. Um app sempre claro às 23h incomoda; um app escuro mal feito incomoda ainda mais.

Siga o sistema, com opção de escolha

No React Native, useColorScheme() informa o tema atual. Ofereça também a escolha manual: claro, escuro ou automático.

Tokens de cor, não cores soltas

Defina nomes semânticos — fundo, superficie, texto, textoSecundario, borda, sucesso, erro — com valores para cada tema. Nenhuma tela deve usar uma cor fixa diretamente. É a mesma base do design system web (Design System na prática: como padronizar a UX/UI de produtos digitais ao nível Apple/Stripe).

Cuidados específicos do escuro

1. 1.Evite preto puro e branco puro em grandes áreas.
2. 2.Hierarquia por camadas: superfícies mais elevadas ficam levemente mais claras.
3. 3.Cores de estado ajustadas para manter contraste (Contraste de cores e WCAG: como checar em cinco minutos).
4. 4.Imagens e ícones: versões para fundo escuro, sem quadrados brancos.
5. 5.Barra de status e navegação acompanhando o tema.
6. 6.Mapas, gráficos e WebViews também.

Teste nos dois temas

Toda tela nova precisa ser verificada em claro e escuro, em iOS e Android.

As regras de acessibilidade do tema escuro na web valem aqui também (Dark mode e acessibilidade: como construir interfaces inclusivas sem comprometer o design), assim como as diretrizes de cada sistema (Human Interface Guidelines e Material Design 3: um app, duas plataformas).

Veja aplicativos nativos da We Codex ou fale com a gente.