Design de Modo Escuro: Como Lançar um Segundo Tema Sem Quebrar o Primeiro

A maioria dos modos escuros não é projetada, é invertida. Um designer joga o fundo para quase preto, pinta o texto de quase branco e dá o trabalho por encerrado. O resultado é um tema que parece áspero, lê pior que a versão clara e faz a marca parecer outro produto sob a iluminação errada.

Este paper é a versão de trabalho. A matemática de cor que faz um tema escuro parecer intencional, as armadilhas de componentes que quebram no escuro e a estrutura de tokens que mantém os dois temas sincronizados conforme o produto cresce. Nada de gradientes de Dribbble, só um tema escuro que conquista seu próprio lugar no design system.

O que o modo escuro realmente é

Modo escuro é um segundo tema completo, não uma inversão de cores. Ele tem sua própria lógica de superfícies, suas próprias regras de contraste e seus próprios ajustes de peso tipográfico. Um modo escuro de verdade é projetado do zero sobre o mesmo conjunto de componentes e depois reconciliado com o tema claro por meio de tokens compartilhados.

O atalho da inversão falha por um motivo específico. O modo claro depende de superfícies brancas que refletem profundidade para cima. O modo escuro não consegue inverter isso, porque superfícies de preto puro absorvem profundidade em vez de criá-la. Todo o sistema de elevação precisa ser reconstruído. A análise do guia de design systems explica por que isso precisa acontecer dentro dos tokens, e não dentro de componentes individuais.

Por que o modo escuro importa em 2026

Três motivos. Nenhum deles é estético.

Duração da bateria em telas OLED. Todo pixel preto em um painel OLED consome zero energia. Uma interface escura no celular pode reduzir o consumo da tela em 30 a 60 por cento em configurações de brilho alto. Para usuários mobile, um tema escuro é um recurso de bateria antes de ser um recurso visual.

Acessibilidade para sensibilidade à luz. Usuários com enxaqueca, astigmatismo ou fotofobia não conseguem usar uma interface clara por longos períodos com conforto. Lançar o modo escuro é um compromisso de acessibilidade, não uma preferência. O checklist de acessibilidade web mostra onde o tema se encaixa em uma auditoria completa.

Expectativa do usuário. Os sistemas operacionais trazem um seletor de modo escuro que vale para o sistema inteiro. Um produto que ignora a configuração do sistema parece velho. Usuários filtram lojas de apps e diretórios de extensões por suporte a modo escuro. A falta de um tema escuro é um problema de marketing, não só uma lacuna de UI.

A primeira regra: nunca use preto puro

O preto puro (#000000) é o erro mais comum em um modo escuro novo. Parece correto porque parece a superfície mais escura possível. Parece errado na prática porque o olho humano não consegue julgar profundidade contra o preto perfeito.

A correção: use um cinza escuro com um leve matiz da marca como superfície base. Algo na faixa de #0B0B10 a #121218 para a maioria dos produtos, às vezes até #1A1A1F. O valor exato depende da temperatura de cor da marca. Uma marca quente vai para um escuro levemente quente. Uma marca fria vai para um escuro levemente frio. Neutro puro parece sem vida.

A mesma regra vale para o texto de maior contraste. Branco puro (#FFFFFF) sobre uma superfície escura cria halação, um efeito de borrão de bordas brilhantes que cansa a leitura de textos pequenos. Baixe o texto para cerca de #E8E8EA ou aplique um branco com 85 a 92 por cento de opacidade. A diferença é invisível ao olho, mas enorme para a legibilidade.

---

Elevação de superfícies no modo escuro

O modo claro usa sombras para mostrar que um card está acima do fundo. O modo escuro não pode, porque sombras são engolidas por superfícies escuras. A solução é elevação por luminosidade.

Cada degrau de elevação clareia a superfície, não a escurece. Um card acima da superfície base é ligeiramente mais claro que a base. Um modal acima de um card é ainda mais claro. A profundidade em uma interface escura se lê como um gradiente de superfícies subindo em direção ao usuário, e não como sombras caindo por baixo delas.

O Material Design formalizou isso com uma escala de elevação de cinco degraus, e a ideia geral vale para qualquer design system. Uma escala funcional para a maioria dos produtos:

Os números específicos variam por marca, mas a lógica não. Toda superfície elevada é mais clara que a de baixo, toda sombra é sutil, e a hierarquia se lê como superfícies empilhadas no espaço, e não como caixas desenhadas em uma página.

A matemática do contraste em temas escuros

O glossário de taxa de contraste cobre a base da WCAG: 4,5 para 1 para texto normal e 3 para 1 para texto grande. O modo escuro não relaxa essas regras, mas muda a forma de cumpri-las.

No modo claro, texto de corpo em torno de #222 sobre fundo branco chega a cerca de 16 para 1. Designers estão acostumados a ter uma folga enorme acima do mínimo. O modo escuro é mais apertado. Texto de corpo em #E0E0E0 sobre #0E0E12 chega a cerca de 13 para 1, o que ainda é forte, mas a margem de erro é menor. Baixar o texto para #B0B0B0 para suavizar o visual pode empurrar silenciosamente uma seção para menos de 4,5 para 1.

A disciplina: toda decisão de cor do modo escuro passa por um verificador de contraste. Não uma vez por tema, uma vez por par de tokens. Texto sobre superfície base, texto sobre card, texto sobre modal, texto de placeholder, texto desabilitado, texto de link. Cada par é uma verificação separada.

Uma armadilha comum é o token de texto atenuado. No modo claro, texto atenuado em #666 sobre branco se lê claramente a 5,7 para 1. Invertido para #999 sobre #0E0E12, a taxa cai para cerca de 4,2 para 1, o que reprova no WCAG AA. O atalho da inversão quebra a conformidade de acessibilidade em silêncio, e a maioria das equipes só percebe quando uma auditoria encontra.

Cor no modo escuro: saturação, não só valor

Cores de marca que brilham sobre fundo branco muitas vezes parecem lamacentas ou elétricas sobre fundo escuro. O motivo é que superfícies escuras amplificam a saturação percebida. Um destaque 100 por cento saturado sobre uma superfície clara parece confiante. O mesmo destaque sobre uma superfície escura parece radioativo.

A regra é dessaturar as cores de destaque no tema escuro, geralmente em 10 a 20 por cento, e clareá-las um pouco. Um botão primário que é #3455FF no branco pode virar #5C78FF no escuro. Mesma família de matiz, ajustada para o novo ambiente de contraste. A marca continua sendo a marca. Só para de machucar os olhos.

O glossário de paleta de cores cobre a estrutura base em que esse ajuste vive. Um bom modo escuro não inventa cores novas, ele entrega um conjunto paralelo das mesmas cores da marca, calibradas para o novo contexto de superfície.

---

Armadilhas de componentes que quebram no escuro

A maioria dos componentes precisa de pelo menos um ajuste para o modo escuro. Alguns quebram por completo sem ele. Aqui estão os infratores habituais.

Bordas viram o separador principal

No modo claro, uma sombra sutil ou uma borda quase invisível separa os componentes. No modo escuro, as sombras somem e a maioria das bordas desaparece. A borda passa a ser a ferramenta principal para definir os limites dos componentes, e muitas vezes precisa subir de algo como #EEE no modo claro para algo em torno de #2A2A30 no escuro para continuar visível.

O teste é ver a UI com 80 por cento de brilho em um notebook. Se as bordas dos componentes começam a sumir, o token de borda precisa de um valor mais claro no tema escuro.

Sombras invertem seu propósito

Sombras no modo claro empurram as superfícies para baixo e para longe. Sombras no modo escuro precisam sugerir superfícies subindo e vindo para a frente. Isso normalmente se consegue combinando uma superfície levemente mais clara (elevação) com uma sombra escura quase invisível por baixo, que adiciona peso sem aparecer.

Um par de sombras funcional para o modo escuro:

• Externa: 0 4px 12px rgba(0, 0, 0, 0.5) para ancorar o elemento
• Destaque interno no topo: inset 0 1px 0 rgba(255, 255, 255, 0.05) para sugerir uma borda elevada

Usados juntos, o componente parece elevado em vez de recortado. Usado sozinho, nenhum dos efeitos aparece.

Estados desabilitados desaparecem

Um botão desabilitado no modo claro costuma ser um cinza dessaturado sobre branco. O mesmo tratamento no modo escuro funde o botão com a superfície por completo. A correção é aumentar a opacidade do estado desabilitado, não diminuir. Algo como 40 por cento de opacidade sobre a cor da superfície elevada, em vez de cair para um cinza desbotado. O estado desabilitado ainda deve parecer um botão, só que inativo.

Imagens e ilustrações precisam de tratamento próprio

Uma foto de produto feita sobre fundo branco parece quebrada sobre uma superfície escura. Uma ilustração de marca desenhada com traço branco some por completo. Imagens precisam de uma passada própria para o modo escuro, seja por um asset separado, uma troca de fundo ou um filtro bem calibrado. Essa é a parte mais cara de entregar direito no modo escuro, e é a parte que a maioria das equipes corta.

A correção pragmática para equipes que não conseguem entregar assets de imagem paralelos: adicione um fundo suave a todo contêiner de imagem no modo escuro, algo em torno de #F5F5F7 com cantos arredondados. As imagens feitas sobre branco agora ficam em um contêiner claro, e o resto da UI continua escuro.

Estados de foco em inputs precisam de mais contraste

Um anel de foco azul que funciona sobre fundo branco perde impacto contra superfícies escuras. O glossário de estado de foco cobre o indicador focus-visible exigido pela WCAG. No modo escuro, o anel de foco muitas vezes precisa ser 10 a 20 por cento mais brilhante ou mais grosso que seu gêmeo do modo claro. O requisito de acessibilidade não muda, mas o tratamento visual precisa se ajustar para continuar cumprindo.

---

Estrutura de tokens para temas duplos

Um modo escuro que vive em overrides de CSS é um modo escuro que vai derivar. Cada componente novo vai lidar com o tema de um jeito, e em seis meses o produto terá três padrões de tema brigando entre si.

A estrutura correta são os tokens semânticos. O glossário de design token cobre o conceito base. O modo escuro é o caso de uso que prova que tokens não são opcionais.

Três camadas de tokens:

Camada um: primitivos. Valores de cor brutos. color.neutral.900, color.brand.500. Sem opinião, sem contexto.

Camada dois: semântica. Nomes baseados em função. color.surface.base, color.surface.raised, color.text.primary, color.text.muted, color.border.default. Cada token semântico aponta para um primitivo.

Camada três: tema. Dois mapas completos, um por tema, decidindo para qual primitivo cada token semântico resolve. O tema claro mapeia color.surface.base para color.neutral.50. O tema escuro mapeia color.surface.base para color.neutral.900.

Os componentes consomem apenas tokens semânticos. Nunca referenciam um primitivo diretamente, e nunca fixam um tema no código. O seletor de tema troca o mapa, os componentes se redesenham e nada quebra. Esse é o único padrão que escala além de uma equipe de dois designers.

Respeitando as preferências do sistema

O navegador expõe prefers-color-scheme por meio de media queries CSS. O produto precisa respeitá-lo. A experiência padrão para um usuário com modo escuro ativado no nível do sistema operacional é o tema escuro, ponto. Um seletor dentro do app é um refinamento, não uma substituição.

Três regras para uma implementação correta:

Use a preferência do sistema como padrão no primeiro carregamento. Nunca sobrescreva a escolha do SO do usuário com um tema claro só porque o designer prefere os mockups claros.

Persista a escolha do usuário dentro do app. Se o usuário alterna para escuro dentro do app, essa escolha sobrevive a recarregamentos e vence a preferência do sistema até que ele a redefina.

Ofereça uma opção "seguir o sistema". Usuários que querem que a configuração do SO mande precisam de um caminho de volta a esse comportamento. O seletor de três estados (claro, escuro, sistema) é o padrão esperado e deve ser entregue por padrão.

Testando o modo escuro

Bugs de modo escuro se escondem. Um componente parece ótimo no arquivo de design, passa no code review no tema claro e é lançado com uma falha de contraste que só aparece quando um usuário o abre à noite. A disciplina de teste precisa ser agressiva.

O teste de brilho. Abra o produto em um notebook com 30 por cento de brilho em um quarto escuro. Tudo que desaparece, tudo que borra, tudo que brilha de forma desconfortável vira um bug registrado. Isso pega bordas sutis demais, texto brilhante demais e cores de destaque ainda saturadas demais.

A auditoria de contraste. Toda mudança de tema dispara uma verificação completa de contraste em todos os pares semânticos. Ferramentas como axe, WAVE ou o verificador de contraste nativo do Figma pegam as regressões que uma revisão visual deixa passar.

O diff de screenshots. Screenshots dos modos claro e escuro são capturados para cada tela-chave a cada release. Diffs visuais expõem a deriva não intencional de tema antes que um usuário a encontre.

O teste em dispositivo real. Celulares OLED renderizam superfícies escuras de forma diferente de notebooks LCD. Um modo escuro que parece perfeito em um MacBook muitas vezes revela banding ou transições duras em um iPhone. Teste em celulares de verdade, não só no emulador de dispositivos do navegador.

---

Falhas comuns de modo escuro

Três padrões causam a maioria dos problemas de qualidade no lançamento do modo escuro. Os três são evitáveis com a estrutura de tokens acima.

A UI meio invertida. As superfícies principais viram escuras, mas componentes escondidos (modais, tooltips, páginas de marketing, telas de admin legadas) continuam saindo no modo claro. O usuário ativa o escuro e metade do produto volta para o branco ao clicar. A correção é uma auditoria de cada superfície do produto, com um checklist que acompanha a cobertura de tema por tela.

O momento de marca quebrado. Landing pages de marketing que continuam claras enquanto o produto fica escuro, ou o contrário. A identidade de marca se fragmenta ao longo da jornada do usuário, e o produto parece duas empresas. A correção é combinar de antemão se o site de marketing terá modo escuro. As duas escolhas são válidas, mas as duas superfícies precisam combinar.

A regressão de acessibilidade. O modo claro sai conforme o WCAG AA, o modo escuro falha em três lugares, e ninguém verifica até uma auditoria de conformidade. A correção é a camada de tokens semânticos mais verificação automática de contraste no CI. Todo PR roda uma checagem de contraste. Falhas bloqueiam o merge.

Se você quer uma equipe que entrega o modo escuro como uma decisão de sistema de primeira classe, dos tokens aos testes, contrate a Brainy. O modo escuro raramente é o problema difícil. O problema difícil é entregar o par sem deriva.

FAQ

O preto puro é o melhor fundo para o modo escuro?

Não. O preto puro (#000000) cria um contraste áspero com texto branco e remove as pistas de profundidade visual de que o olho precisa para ler a elevação. Use um cinza escuro com um leve tom da marca, geralmente na faixa de #0B0B10 a #121218. A profundidade em uma interface escura se lê como superfícies subindo em direção ao usuário, o que exige uma superfície inicial que não seja preto puro.

Como fazer elevação no modo escuro sem sombras?

A elevação no modo escuro vem da luminosidade, não de sombras. Cada superfície elevada é ligeiramente mais clara que a de baixo, criando um gradiente de superfícies que se empilham em direção ao usuário. Uma sombra escura sutil e um destaque muito tênue no topo podem reforçar o efeito, mas a pista principal é a própria cor da superfície.

O modo escuro deve simplesmente inverter as cores do tema claro?

Não. Inverter satura as cores de destaque a níveis desconfortáveis, derruba o texto atenuado abaixo dos limites de contraste da WCAG e quebra o modelo de elevação que depende de sombras. O modo escuro é um segundo tema projetado do zero sobre o mesmo conjunto de componentes e depois reconciliado por meio de tokens semânticos compartilhados.

Como lidar com imagens e fotos no modo escuro?

Imagens feitas sobre fundo branco quebram a continuidade do tema. Opções: entregar assets paralelos para o modo escuro, adicionar um contêiner claro sutil ao redor de cada imagem quando o modo escuro está ativo ou aplicar filtros com cuidado. Ilustrações muitas vezes precisam de uma variante separada para o escuro. Essa é a parte mais cara do modo escuro e a mais pulada.

Como estruturar tokens para suportar dois temas?

Três camadas. Primitivos (valores de cor brutos), tokens semânticos (nomes baseados em função como color.surface.base) e mapas de tema (um por tema, resolvendo cada token semântico para um primitivo). Os componentes consomem apenas tokens semânticos, então o seletor de tema troca o mapa e nada quebra. Esse padrão é o que faz o modo escuro escalar além de uma equipe pequena.

O modo escuro melhora a acessibilidade?

Para usuários com sensibilidade à luz, enxaqueca ou fotofobia, sim. Para usuários que precisam de texto de alto contraste ou têm percepções de cor específicas, não necessariamente. O modo escuro é uma opção de acessibilidade, não uma vitória automática de acessibilidade. Um tema escuro bem implementado cumpre as regras de contraste da WCAG com o mesmo rigor do tema claro, e um mal implementado falha nelas.

Modo escuro é uma decisão de sistema, não um seletor

Um produto com um tema e um segundo tema quebrado é pior que um produto com um único tema limpo. O modo escuro ou sai como um paralelo totalmente projetado, totalmente testado e totalmente tokenizado do tema claro, ou não sai.

Construa a camada de tokens primeiro. Faça a matemática de contraste em segundo. Projete o tema escuro para cada elevação, cada componente, cada contêiner de imagem. Teste com brilho baixo em dispositivos reais. Lance os dois temas juntos ou nenhum.

Se você quer trabalho de marca, web e UI que trate o modo escuro como um compromisso de nível de sistema em vez de um seletor de preferência, contrate a Brainy. Dois temas, um produto, uma decisão de design coerente.

Leitura relacionada

• Guia de Design Systems
• Contraste de Cor Acessível
• Checklist de Acessibilidade Web
• Teoria das Cores para Designers
• Design de Hierarquia Visual