Codice completo
Il pulsante aggiunge o rimuove una classe CSS sul documento.
<button id="tema">Cambia tema</button>
<style>
body.tema-scuro {
background: #111;
color: #fff;
}
</style>
<script>
const pulsanteTema = document.querySelector('#tema');
pulsanteTema.addEventListener('click', function() {
document.body.classList.toggle('tema-scuro');
if (document.body.classList.contains('tema-scuro')) {
pulsanteTema.textContent = 'Tema chiaro';
} else {
pulsanteTema.textContent = 'Tema scuro';
}
});
</script>
Commento
- classList.toggle() alterna la classe senza riscrivere tutto lo stile.
- La condizione serve solo ad aggiornare il testo del pulsante.
- In un progetto reale puoi salvare la scelta con localStorage.
Prova a modificarlo
Cambia nomi, testi e valori iniziali. Poi aggiungi una piccola regola CSS per rendere evidente lo stato dell'interfaccia.