Implementação de Dark Mode: CSS, JavaScript e Preferência do Sistema

O que é Dark Mode e por que importa?

Dark mode (tema escuro) é um modo de interface que exibe fundos escuros com texto claro. Reduz a fadiga visual em ambientes com pouca luz.

Em telas OLED, dark mode pode prolongar a duração da bateria em 30-60% porque pixels escuros são desligados. Vantagem significativa para dispositivos móveis.

Preferência do usuário: Com suporte de dark mode a nível de sistema (macOS, Windows, iOS, Android), os usuários esperam uma experiência consistente em todos os aplicativos.

Acessibilidade: Alguns usuários (fotofobia, enxaqueca) preferem temas escuros. Dark mode fornece benefícios de acessibilidade para esses usuários.

Gestão de Temas com Variáveis CSS

Custom properties do CSS (variáveis) permitem gerenciar cores de tema de forma centralizada. Defina o tema padrão (light) em :root, tema dark em [data-theme="dark"].

Exemplo: :root { --bg: #ffffff; --text: #1a1a1a; } [data-theme="dark"] { --bg: #1a1a1a; --text: #e0e0e0; }. Todos os estilos usam essas variáveis.

Transições de cor: body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; } fornece transição suave de tema.

Controle de contraste: Siga as ratios de contraste WCAG também em dark mode. Texto claro sobre fundo escuro requer ratio de contraste 4.5:1.

Sombras e bordas: Sombras (box-shadow) são menos visíveis em dark mode. Use bordas para tornar os limites dos elementos mais distintos.

Troca de Tema com JavaScript

Botão de toggle: Quando o usuário clica no botão, troque o tema com document.documentElement.setAttribute('data-theme', 'dark').

Salvar preferência: Salve a escolha do usuário com localStorage.setItem('theme', 'dark'). Leia com localStorage.getItem('theme') quando a página carregar.

Prevenção de FOUC: Para prevenir Flash of Unstyled Content (FOUC), aplique a configuração de tema com script inline em <head>. Isso determina o tema antes de renderizar.

Função toggle: function toggleTheme() { const current = document.documentElement.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', next); localStorage.setItem('theme', next); }

Detecção de Preferência do Sistema

Media query prefers-color-scheme: Aplique estilos baseados em preferência do sistema em CSS com @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } }.

Detecção com JavaScript: Verifique preferência de dark mode do sistema com window.matchMedia('(prefers-color-scheme: dark)').matches.

Ouvir mudanças: Rastreie mudanças de tema do sistema com matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { if (e.matches) setDark(); else setLight(); }).

Ordem de prioridade: 1. Seleção manual do usuário (localStorage), 2. Preferência do sistema (prefers-color-scheme), 3. Tema padrão (light). Verifique nesta ordem.

Melhores Práticas de Dark Mode

Não use preto puro (#000000). Cinza muito escuro (#121212 ou #1a1a1a) parece melhor e reduz a fadiga visual.

Reduza a saturação de cor. Cores brilhantes (vermelho, verde, azul) em dark mode causam fadiga visual. Use cores desaturadas.

Ajuste as imagens. Imagens brilhantes podem ser incômodas em dark mode. Escureça levemente as imagens com filter: brightness(0.8).

Teste todos os componentes. Formulários, tabelas, blocos de código, gráficos devem parecer corretos em dark mode. Verifique cada componente em dark mode.

Meta theme-color: Configure a cor da UI do navegador (barra de endereço) para coincidir com dark mode com <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">.

Dark Mode em Frameworks

Tailwind CSS: Defina estilos de dark mode com prefixo dark:. Como dark:bg-gray-900 dark:text-white. Fornece controle manual com estratégia de classe.

React: Implementação fácil de dark mode com hook useDarkMode ou biblioteca next-themes. Gestão de tema compatível com SSR.

Vue: Dark mode reativo com composable useDark de @vueuse/core. Detecção automática de preferência do sistema.

Bootstrap: Suporte de dark mode no Bootstrap 5.3+ com atributo data-bs-theme="dark". Gestão de tema com variáveis CSS.