Dark Mode Por Que Dois Estados São Suficientes (E Três Podem Prejudicar a UX)

A Armadilha do Toggle de Três Estados

Você já viu: um seletor de tema com as opções Claro, Escuro e Sistema. Parece completo, mas muitas vezes adiciona carga cognitiva sem benefício real. A pergunta central: o usuário realmente precisa de um botão dedicado para 'Sistema' quando um controle de dois estados bem projetado pode expressar todos os três?

O argumento é simples: se o usuário não tem preferência explícita, use a configuração do sistema operacional. Ofereça uma substituição apenas quando o usuário escolher ativamente. Armazene essa escolha no localStorage para sessões futuras. Isso reduz a poluição visual e respeita a intenção principal do usuário—ler seu conteúdo, não mexer com temas.

Um bom controle de dois estados pode expressar todos os três estados—o usuário só precisa aplicar a substituição na primeira vez que ela se tornar relevante.

Não é só minimalismo. É entender que a troca de tema é tangencial ao objetivo do usuário. Menos UI que realiza a mesma tarefa é sempre melhor. Vamos lá!

Implementando o Padrão de Dois Estados

Aqui vai uma implementação prática com JavaScript puro e CSS. O toggle mostra apenas o oposto do tema efetivo atual. Se o sistema está claro, mostre um botão 'Escuro'; se escuro, mostre 'Claro'. Clicar define uma substituição explícita no localStorage.

// theme-toggle.js
const getPreferredTheme = () => {
  const stored = localStorage.getItem('theme');
  if (stored === 'light' || stored === 'dark') return stored;
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};

const applyTheme = (theme) => {
  document.documentElement.setAttribute('data-theme', theme);
  // Atualiza o rótulo do toggle para mostrar a *outra* opção
  const toggle = document.getElementById('theme-toggle');
  toggle.textContent = theme === 'dark' ? '☀️ Claro' : '🌙 Escuro';
};

const toggleTheme = () => {
  const current = getPreferredTheme();
  const next = current === 'dark' ? 'light' : 'dark';
  localStorage.setItem('theme', next);
  applyTheme(next);
};

// Inicialização
document.addEventListener('DOMContentLoaded', () => {
  applyTheme(getPreferredTheme());
  document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
});

// Ouve mudanças do sistema se não houver substituição
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  if (!localStorage.getItem('theme')) {
    applyTheme(e.matches ? 'dark' : 'light');
  }
});

/* styles.css */
:root {
  --bg: #ffffff;
  --text: #000000;
}

[data-theme="dark"] {
  --bg: #121212;
  --text: #e0e0e0;
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.2s, color 0.2s;
}

O botão pode ser um simples <button id="theme-toggle">🌙 Escuro</button> no cabeçalho. Sem terceira opção. Olha só que simplicidade!

Quando Três Estados Realmente Fazem Sentido

O toggle de dois estados não é lei universal. Existem dois cenários em que um controle de três estados (Claro / Escuro / Sistema) é justificado:

1. Painel de configurações dedicado – Se o toggle fica em uma página separada de preferências, não na navegação principal, os usuários esperam mais controle granular. O custo cognitivo é menor porque já estão em um contexto de 'configurações'.
2. Mais de dois esquemas de cores – Se seu site oferece múltiplos temas (ex.: sépia, alto contraste, etc.), um toggle de dois estados não consegue expressar todas as opções. Aí um dropdown ou controle tri-state se faz necessário.

Armadilhas a Evitar

• Não mostre a opção 'Sistema' no cabeçalho – Distrai do conteúdo principal. Usuários raramente precisam reverter explicitamente para o sistema após definir uma substituição.
• Trate o caso 'reverter para o sistema' com cuidado – Se o usuário alterna de Claro (sistema) para Escuro, e depois volta para Claro, seu código deve armazenar 'claro' como substituição explícita ou limpar a substituição. Ambos são aceitáveis; seja consistente. A maioria dos usuários não vai notar até o tema do SO mudar, e corrigir é um clique.
• Teste com prefers-color-scheme – Garanta que seu CSS respeite a media query quando não houver substituição. Use localStorage apenas para escolhas explícitas.

Lembre-se: o toggle de tema não é a intenção principal do usuário. Otimize para o conteúdo, não para o controle.

O Melhor Toggle Pode Ser Nenhum Toggle

A conclusão definitiva: se seu site respeita prefers-color-scheme e você não oferece substituição manual, já está à frente. Um toggle de dois estados é um bom compromisso quando você quer dar controle sem poluição. Um toggle de três estados raramente vale a carga cognitiva extra.

Próximos passos: Audite seu seletor de tema atual. Pergunte: a opção 'Sistema' agrega valor real ou é só ruído? Experimente o padrão de dois estados e meça o feedback dos usuários. Para saber mais sobre design com incerteza e pensamento probabilístico em interfaces de IA, confira nosso insight sobre design com incerteza. E se você está escalando modernização com agentes de IA, veja como Azure e GitHub Copilot estão mudando o jogo.

Fonte: CSS-Tricks