💡 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.
🛠️ O que aprendi
- ✔ Alternar classes com
classList.toggle() - ✔ Usar CSS para mudar cores e fundos
- ✔Trocar ícones de 🌙 para ☀️ com JavaScript usando
? : - ✔ Arrow Functions
=> - ✔ Criar estilos diferentes para desktop e mobile
- ✔ Transição suave entre claro e escuro
function toggleDarkMode() {
const body = document.body;
const header = document.querySelector("header");
const footer = document.querySelector("footer");
const titles = document.querySelectorAll("h2, h3");
const menu = document.querySelector(".menu");
const menuLinks = document.querySelectorAll(".menu a");
const links = document.querySelectorAll("a");
const buttons = document.querySelectorAll("button");
const toggleBtn = document.getElementById("modoToggle");
body.classList.toggle("dark-mode");
header.classList.toggle("dark-mode");
footer.classList.toggle("dark-mode");
menu.classList.toggle("dark-mode");
titles.forEach(el => el.classList.toggle("dark-mode"));
links.forEach(el => el.classList.toggle("dark-mode"));
buttons.forEach(el => el.classList.toggle("dark-mode"));
menuLinks.forEach(el => el.classList.toggle("dark-mode"));
// Operador ternário ? :
toggleBtn.textContent = body.classList.contains("dark-mode") ? "☀️ Light Mode" : "🌙 Dark Mode";
// Salva no navegador localStorage.setItem("darkMode", body.classList.contains("dark-mode") ? "enabled" : "disabled"); }
}
body.dark-mode {
background: linear-gradient(to right, #121212, #1e1e1e); /* fundo escuro */
color: #f1f1f1; /* texto claro */
}
toggleBtn.textContent = isDark ? "☀️ Light Mode" : "🌙 Dark Mode";
// Exemplo com arrow function
titles.forEach(el => el.classList.toggle("dark-mode"));
body.dark-mode .menu-links {
background-color: #000;
}
body, header, footer, h2, h3, a, button {
transition: background-color 0.5s ease, color 0.5s ease;
}