Como Projetar Interfaces com Dark/Light Mode sem Flicker
Descubra a técnica correta para implementar um alternador de temas que evita aquela piscada de cor no carregamento das páginas.
O Problema do Flicker de Tema
Muitos desenvolvedores aplicam o tema dark/light através do Javascript carregado no final do body (ou usando defer). Isso faz com que o navegador renderize a página inicialmente no modo padrão (geralmente claro) e depois aplique o modo escuro, causando uma transição visual brusca de cor ("flash" ou "flicker").
A Solução Definitiva
Para evitar isso, a verificação e aplicação da classe do tema no elemento HTML ou Body deve ser executada imediatamente no início do cabeçalho da página (<head>) de forma síncrona. Esse script de 3 linhas bloqueia brevemente a renderização para definir a cor correta antes do navegador desenhar os primeiros pixels.
<head>
<script>
const theme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
</script>
</head>Ao usar atributos CSS customizados baseados no seletor [data-theme], a transição ocorre de forma instantânea e limpa, garantindo uma UX premium.