Sites institucionais

Dark mode no site: tendência, gosto ou conversão?

A pergunta vem quase sempre depois de um cliente abrir o Instagram às 23h e reparar que está tudo em modo escuro. "O nosso site também devia ter, não?". Curta resposta: às vezes, mas raramente pelos motivos certos. O dark mode é uma feature técnica simples mas conceptualmente carregada — significa manter duas versões do design para sempre, com tudo o que isso implica em contraste, marca, ilustrações e fotografia.

Este guia separa o que sabemos sobre dark mode em sites de PME — onde ajuda mesmo, onde é só gosto pessoal do dono, e o que tem de estar tecnicamente certo para não partir o site quando o utilizador alterna.

O que é dark mode (e o que não é)

Antes de decidir, fixar o terreno:

  • Dark mode genuíno = duas versões completas do design (cores, texto, imagens, sombras, gradientes), com switch que respeita preferência do utilizador (sistema operativo + escolha manual).
  • Dark mode falso = inverter cores via filtro CSS. Resulta em fotos desbotadas, ilustrações estranhas, contrastes maus. Não fazer.
  • Tema escuro permanente = site sempre em modo escuro (ex.: portfolios de design). É decisão de marca, não dark mode.

Aqui falamos do primeiro: dark mode opcional, com versão clara como base.

Tendência: é mesmo o que parece?

Sim e não. Os dados sustentam isto:

  • Maioria dos utilizadores experimentou dark mode — telefones (iOS/Android), Slack, Twitter/X, YouTube oferecem-no há anos. Conforto familiar.
  • Preferência varia muito por contexto — leitura à noite, telemóvel, ecrãs grandes em ambiente escuro tendem para dark. Trabalho ao monitor, leitura técnica longa, ambientes claros tendem para light.
  • B2C jovem (15-35) tem maior taxa de preferência por dark. B2B 45+ tende a indiferente ou ligeira preferência por light.

A conclusão honesta: não é moda passageira, mas também não é "todos querem". É feature que um subconjunto do teu ICP vai apreciar.

Conversão: o que os dados (não) mostram

Aqui é onde se desfaz o mito. Não existem estudos públicos sólidos que mostrem que dark mode aumenta conversão em sites de PME. Há sim:

  • Estudos de UX que mostram menos fadiga visual em ambientes pouco iluminados (irrelevante para 60% do dia).
  • Estudos de bateria que mostram economia em ecrãs OLED (~30% em dark). Marginal para conversão.
  • Estudos de acessibilidade contraditórios: utilizadores com astigmatismo muitas vezes leem pior em dark mode (efeito halation).

Tradução prática: dark mode não te traz mais leads. Pode aumentar tempo de leitura noturna em blogs. Pode reduzir taxa de saída em públicos específicos. Mas como ferramenta de conversão, é categoria diferente de um botão CTA bem desenhado.

Quando faz sentido — 4 casos

Onde realmente vale o investimento:

  1. Portfolio criativo, agência de design, fotógrafo, branding — coerência com gosto do mercado (design tem afinidade com dark).
  2. Site técnico com leitura longa — documentação, blog técnico, ferramentas. Utilizador passa horas a ler; dark reduz fadiga.
  3. Aplicação web (área de cliente, dashboard) — utilizador volta diariamente; expectativa de feature moderna.
  4. B2B tech com ICP developer/maker — base de utilizadores que espera dark mode (e nota a falta).

Quando NÃO faz sentido

Onde dá trabalho e não retorna nada:

  1. Restaurante, clínica, advogado, contabilista, comércio local — utilizador visita 2x para informar-se e marcar. Dark mode é tempo morto de desenvolvimento.
  2. Loja online com fotografia de produto rica — dark muda a perceção de cor do produto; mau para conversão.
  3. Sites de turismo, hospitalidade — fotografia exuberante perde força em fundo escuro.
  4. Quando ainda não tens o site claro bem desenhado — não fazer dark mode antes de o light estar polido.

A regra: se o teu ICP usa o site uma ou duas vezes em ambiente normal (escritório, café), é desperdício.

O que muda no design (mais do que pensas)

Implementar dark mode não é "trocar fundo de branco para preto". É repensar:

  • Paleta inteira — cinzentos do dark mode são diferentes dos do light. Não é só inverter.
  • Cor de marca — pode parecer berrante em fundo escuro. Versão dessaturada para dark.
  • Sombras — sombras pretas em fundo escuro desaparecem. Substituídas por brilho subtil ou bordas.
  • Imagens com fundo branco — destacam-se como holofotes. Precisam de fundo transparente ou tratamento.
  • Ilustrações — versões claras precisam de adaptação para o dark.
  • Screenshots — capturados em light mode parecem fora de contexto. Versão dark ou fundo neutro.
  • Logo — versão para fundos claros + versão para fundos escuros (já necessária, mas mais visível aqui).

Tradução em horas de design: + 30-50% sobre o site só em modo claro.

Contraste: o detalhe não-negociável

Erro mais comum em dark mode mal feito: texto cinzento-claro sobre fundo cinzento-escuro. Parece estético; é ilegível.

Regras WCAG 2.2 a respeitar:

  • Texto normal: contraste mínimo 4.5:1 sobre fundo.
  • Texto grande (18px+): contraste mínimo 3:1.
  • Elementos interativos (botões, links): contraste mínimo 3:1.

Em dark mode, evitar:

  • Preto puro (#000) como fundo — cansa mais e cria halation. Usar #0E0E10 ou similar (cinza muito escuro).
  • Branco puro (#FFF) como texto — demasiado brilhante. Usar #E5E5E5 ou similar.
  • Cores saturadas vivas sobre escuro — pulsam visualmente, ferem o olho.

Ferramentas para testar: WebAIM Contrast Checker, DevTools do Chrome (detalhes em acessibilidade web em PT).

Implementação técnica: o caminho moderno

A parte boa: tecnicamente, dark mode em 2026 é simples. Stack típico:

  1. CSS custom properties (variáveis) para cores. Tema light define as variáveis; dark sobrescreve.
  2. Media query prefers-color-scheme — respeita preferência do sistema operativo por defeito.
  3. Switch manual (data-attribute no <html>) que sobrepõe a preferência.
  4. LocalStorage para guardar a escolha do utilizador.
  5. Aplicação no servidor (SSR) para evitar "flash" de tema errado ao carregar.

Exemplo simplificado:

:root { --bg: #fff; --text: #0E0E10; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0E0E10; --text: #E5E5E5; }
}
[data-theme="dark"] { --bg: #0E0E10; --text: #E5E5E5; }
[data-theme="light"] { --bg: #fff; --text: #0E0E10; }

WordPress: temas modernos (Astra, Kadence) suportam via plugin. No-code (Webflow, Framer): nativo. Sites à medida (Next.js, React): biblioteca tipo next-themes resolve.

Switch ou auto? A UX do toggle

Três modelos comuns:

  1. Só auto (segue sistema) — simples, sem botão, respeita preferência do utilizador. Bom para sites pequenos.
  2. Auto + toggle manual — segue sistema por defeito, mas utilizador pode sobrepor. Padrão recomendado.
  3. Só manual — ignora sistema. Friction extra; só faz sentido em casos muito específicos.

Onde pôr o toggle:

  • Header, à direita perto do CTA. Ícone sol/lua (universal).
  • Rodapé, para sites onde é feature secundária.
  • Não no menu principal — desperdiça slot.

Animação de transição: subtil (200-400ms). Sem animação fica abrupto; com mais cansa.

Performance: o que não muda (quase)

Boa notícia: dark mode bem implementado não tem custo de performance significativo. A mesma CSS, com cores diferentes. Cuidados:

  • Não carregar imagens diferentes para dark e light sem necessidade (duplica peso).
  • Usar prefers-color-scheme em <picture> quando há imagens mesmo diferentes.
  • Evitar transições em todas as propriedades ao mudar de tema — só background-color, color, border-color.

Para conteúdo crítico (logo, hero), considerar versões SVG inline que adaptam com currentColor — leve, rápido, perfeito em ambos os modos.

Manutenção: o custo escondido

Aqui está o que ninguém vê no orçamento inicial:

  • Cada elemento novo tem de ser testado em dark e light.
  • Imagens novas (banners, posts) podem precisar de versão dark.
  • Capturas de ecrã, infografias — duplica trabalho de design.
  • Bugs visuais aparecem em dark sem ninguém reparar — utilizadores não reportam, saem.
  • Plugins de terceiros (formulários, chat, mapas) podem não respeitar o tema.

Custo prático: +15-25% de tempo em qualquer atualização visual do site. Vale a pena? Depende de quão presente o dark é no teu ICP.

Em resumo

  • Dark mode não é moda passageira nem aumenta conversão por si só.
  • Faz sentido em portfolio criativo, sites técnicos, dashboards, B2B tech.
  • Não faz sentido em comércio local, restaurante, e-commerce com foto-driven.
  • Implementação é tecnicamente simples com CSS variables + prefers-color-scheme.
  • Contraste WCAG 4.5:1 é não-negociável. Sem preto puro, sem branco puro.
  • Paleta dark redesenha-se, não se inverte. + 30-50% no design.
  • Toggle no header, ícone sol/lua, animação subtil.
  • Manutenção sobe +15-25% — orçar antes de aprovar.

No sitesfixe.pt desenhamos sites com sistema de design completo — light por defeito, com dark mode quando faz sentido para o teu ICP, contraste WCAG e zero flash de tema. Sites desde 1.500€. Pedir orçamento.

Lê também:

Fontes

Precisas de um site ou loja online?

Agência digital portuguesa. Sites e lojas online rápidos, otimizados para o Google e feitos para resultado.

Pedir orçamento