💡 O que é Dark Mode?
Dark Mode é uma forma de deixar o site com fundo escuro e texto claro, ajudando na leitura e dando um estilo moderno.
-
}
- ✔ Usar CSS com
body.dark-mode - ✔ Deixar o CSS controlar tudo (sem JS excessivo)
- ✔ Salvar preferência do usuário com
localStorage - ✔ Criar transições suaves
body.dark-mode {
background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
color: #f1f1f1;
}
body.dark-mode header {
background: #111;
}
body.dark-mode footer {
background: #111;
}
window.addEventListener("DOMContentLoaded", () => {
const darkMode = localStorage.getItem("darkMode");
const toggleBtn = document.getElementById("modoToggle");
if (darkMode === "enabled") {
document.body.classList.add("dark-mode");
toggleBtn.textContent = "☀️ Light Mode";
}
});
body, header, footer, h2, h3, a, button {
transition: background-color 0.5s ease, color 0.5s ease;
}