Tema chiaro e scuro con memoria
Cambio tema salvato nel browser.
Quando si usa
Quando vuoi offrire una modalità scura per migliorare il comfort visivo o rispettare la preferenza dell'utente.
Perché si usa
localStorage conserva la scelta e la riapplica nelle visite successive sullo stesso dispositivo.
Vantaggi principali
- Preferenza persistente
- Un solo attributo sul documento
- Facile gestione tramite variabili CSS
Anteprima del risultato
Il tema scuro modifica colori di sfondo e testo per migliorare la lettura in alcune situazioni.
Tema scuro
La stessa scheda può essere visualizzata con colori più adatti alla lettura serale.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<button id="cambiaTema">Cambia tema</button>
<script>
const chiave = 'tema-sito';
const salvato = localStorage.getItem(chiave);
if(salvato) document.documentElement.dataset.tema = salvato;
document.getElementById('cambiaTema').addEventListener('click', function(){
const nuovo = document.documentElement.dataset.tema === 'scuro' ? 'chiaro' : 'scuro';
document.documentElement.dataset.tema = nuovo;
localStorage.setItem(chiave, nuovo);
});
</script>
<style>
:root{--sfondo:#fff;--testo:#243447}
:root[data-tema="scuro"]{--sfondo:#152233;--testo:#f4f7fb}
body{background:var(--sfondo);color:var(--testo)}
</style>Da personalizzare: Definisci i colori per data-tema="scuro" e cambia l'etichetta del pulsante.
Errore da evitare: Controlla il contrasto in entrambi i temi e non affidarti solo al colore per comunicare informazioni.