🕶️ Como Adicionar Modo Escuro Automático ao Seu Site com Uma Linha de Código
Introdução
Você já percebeu como a maioria dos sites modernos oferece a opção de modo escuro?
Além de deixar o visual mais agradável, ele reduz o cansaço visual e economiza bateria — mas nem todo desenvolvedor tem tempo (ou paciência) para implementar algo que pareça complicado.
A boa notícia é que ativar o modo escuro no seu site pode ser feito em segundos, com apenas algumas linhas de HTML, CSS e JavaScript.
Sem frameworks, sem dependências, sem dor de cabeça.
Neste artigo, você vai ver como adicionar o modo escuro automático ao seu site e ainda aprender uma versão aprimorada com detecção do tema do sistema.
🧠 O Script — Simples e Poderoso
Aqui está o código completo.
Você pode copiar, colar e testar imediatamente no seu projeto 👇
<button id="darkModeBtn">🌙 Alternar modo escuro</button>
<script>const btn=document.getElementById("darkModeBtn");
btn.onclick=()=> document.body.classList.toggle("dark");</script>
<style>body.dark{background:#121212;color:#fff;transition:0.3s;} button{padding:8px 12px;border:0;background:#222;color:#fff;border-radius:8px;cursor:pointer;}</style>
💬 Explicação passo a passo:
<button>: cria o botão que o usuário vai clicar.document.body.classList.toggle("dark"): adiciona ou remove a classe “dark” do corpo da página.O CSS detecta essa classe e muda as cores automaticamente.
A transição deixa o efeito suave e agradável.
Pronto!
Agora o visitante pode alternar entre modo claro e escuro com um simples clique.
⚙️ Como Usar / Executar
Copie o código acima.
Cole antes do fechamento da tag
<body>do seu arquivo HTML.Atualize o navegador — o botão já estará funcionando!
👉 Dica: se quiser integrar no seu WordPress, basta colar o código em um bloco HTML dentro do editor, ou no arquivo footer.php do seu tema.
💡 Dica Extra — Versão Automática e Inteligente
Quer que o modo escuro se ative automaticamente de acordo com o tema do sistema do visitante?
Use esta variação aprimorada:
<script>function verificarTema(){
if(window.matchMedia('(prefers-color-scheme: dark)').matches){
document.body.classList.add('dark');
}}
verificarTema();</script>
Esse pequeno trecho detecta se o usuário usa modo escuro no sistema operacional (como no Windows, macOS ou Android) e aplica o estilo automaticamente — sem ele precisar clicar em nada.
Combine os dois códigos e ofereça o melhor dos dois mundos: detecção automática e botão manual.