Negli ultimi anni la modalità scura, conosciuta anche come Dark Mode, è diventata una delle funzionalità più apprezzate nelle interfacce web moderne. Oltre ad offrire un design più elegante e professionale, permette di ridurre l'affaticamento visivo soprattutto durante l'utilizzo serale o in ambienti poco illuminati. Sempre più siti e applicazioni integrano quindi un pulsante che consente agli utenti di passare rapidamente dalla modalità chiara a quella scura.
Dark Mode Toggle con LocalStorage
In questo tutorial vedremo come creare un semplice sistema di Dark Mode Toggle utilizzando solamente HTML, CSS e JavaScript, senza librerie esterne o framework complessi. L'obiettivo sarà realizzare un pulsante che permetta di cambiare tema con un click e, soprattutto, salvare automaticamente la preferenza dell'utente grazie a LocalStorage. In questo modo, quando la pagina verrà ricaricata o riaperta in futuro, il sito manterrà il tema scelto in precedenza.
Il progetto sarà volutamente semplice e adatto anche a chi sta iniziando a studiare JavaScript e la manipolazione del DOM. Alla fine della guida avrai realizzato una funzionalità moderna, riutilizzabile praticamente in qualsiasi sito web o progetto personale.
Quali linguaggi serviranno?
Per realizzare questo piccolo progetto utilizzeremo tre tecnologie fondamentali del web development:
- HTML: servirà per creare la struttura della pagina e il pulsante del toggle.
- CSS: verrà utilizzato per gestire lo stile grafico della modalità chiara e della modalità scura.
- JavaScript: permetterà di cambiare tema dinamicamente e salvare la preferenza dell'utente tramite LocalStorage.
Il funzionamento sarà molto semplice: cliccando sul pulsante, il sito aggiungerà o rimuoverà una classe CSS. Questa classe cambierà colori, sfondi e testi passando dalla modalità chiara alla modalità scura. Successivamente JavaScript salverà la scelta effettuata nel browser dell'utente, così da mantenere automaticamente il tema selezionato anche dopo il refresh della pagina.
Dal punto di vista grafico, il risultato finale sarà una pagina minimal composta da:
- un titolo;
- un breve testo descrittivo;
- un pulsante per attivare/disattivare la Dark Mode.
Quando il tema cambierà, noteremo immediatamente la variazione dei colori dello sfondo e del testo, creando un effetto moderno e piacevole da utilizzare.
Il codice HTML
Iniziamo con il codice HTML:
<!doctype html>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dark Mode Toggle</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Dark Mode Toggle</h1>
<p>Clicca il pulsante qui sotto per cambiare il tema della pagina.</p>
<button id="toggleTheme">Attiva Dark Mode</button>
</div>
<script src="script.js"></script>
</body>
</html>In questo codice abbiamo creato una struttura molto semplice e pulita. Il pulsante con id="toggleTheme" sarà l'elemento controllato da JavaScript per cambiare il tema della pagina. Inoltre abbiamo collegato i file esterni style.css e script.js che utilizzeremo rispettivamente per la grafica e la logica del progetto.
Il codice CSS
Proseguiamo con il codice CSS:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #222;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
transition: 0.3s;
}
.container {
text-align: center;
}
button {
margin-top: 20px;
padding: 12px 20px;
border: none;
border-radius: 8px;
background-color: #222;
color: white;
cursor: pointer;
font-size: 16px;
transition: 0.3s;
}
button:hover {
opacity: 0.8;
}
/* DARK MODE */
body.dark-mode {
background-color: #1e1e1e;
color: #ffffff;
}
body.dark-mode button {
background-color: #ffffff;
color: #1e1e1e;
}In questo stylesheet abbiamo impostato uno stile moderno e minimale. La proprietà transition rende il cambio di tema più fluido e piacevole visivamente. Quando il <body>
Il codice Javascript
Concludiamo con il codice Javascript:
const toggleButton = document.getElementById("toggleTheme");
const body = document.body;
/* Controlla se esiste un tema salvato */
if (localStorage.getItem("theme") === "dark") {
body.classList.add("dark-mode");
toggleButton.textContent = "Disattiva Dark Mode";
}
/* Cambio tema al click */
toggleButton.addEventListener("click", () => {
body.classList.toggle("dark-mode");
/* Controlla se la dark mode è attiva */
if (body.classList.contains("dark-mode")) {
localStorage.setItem("theme", "dark");
toggleButton.textContent = "Disattiva Dark Mode";
} else {
localStorage.setItem("theme", "light");
toggleButton.textContent = "Attiva Dark Mode";
}
});In questo script selezioniamo il pulsante tramite JavaScript. Successivamente controlliamo se nel browser è già presente un tema salvato grazie a localStorage.getItem().
Quando l'utente clicca il pulsante:
- viene aggiunta o rimossa la classe .dark-mode;
- il testo del pulsante cambia dinamicamente;
- la preferenza viene salvata nel browser tramite localStorage.setItem().
In questo modo il tema scelto rimarrà memorizzato anche dopo il refresh della pagina o la chiusura del browser.
Il risultato finale
Una volta completati i tre file, il risultato sarà una semplice pagina web con un pulsante capace di attivare e disattivare la Dark Mode in tempo reale. Il cambio di tema avverrà in maniera fluida grazie alla proprietà transition utilizzata nel CSS, rendendo l'esperienza utente più moderna e piacevole.
Una volta completati i tre file, il risultato sarà una pagina web semplice e moderna con un pulsante capace di attivare e disattivare la Dark Mode in tempo reale. Il cambio di tema avverrà in modo fluido grazie alla proprietà transition utilizzata nel CSS.
L'elemento più interessante del progetto è l'utilizzo di LocalStorage, che permette di salvare automaticamente la preferenza dell'utente direttamente nel browser. In questo modo, anche aggiornando la pagina o riaprendo il sito, il tema selezionato rimarrà memorizzato.
Nonostante sia un progetto molto semplice, rappresenta un ottimo esercizio pratico per comprendere meglio l'interazione tra HTML, CSS e JavaScript nella creazione di funzionalità dinamiche e moderne.
Conclusione e considerazioni finali
Creare una Dark Mode è uno dei modi migliori per iniziare a lavorare con JavaScript in un progetto concreto e utile. Con una struttura semplice e poche istruzioni abbiamo realizzato un sistema dinamico capace di modificare l'aspetto della pagina e ricordare automaticamente le preferenze dell'utente.
Oltre ad essere una funzionalità molto utilizzata nei siti moderni, questo esercizio aiuta a prendere confidenza con concetti fondamentali come eventi, classi CSS e gestione dei dati nel browser. Una volta compreso il funzionamento base, sarà possibile personalizzare ulteriormente il progetto aggiungendo animazioni, icone oppure temi grafici più avanzati. Questo tipo di componente può essere utilizzato facilmente in qualsiasi sito web, migliorando sia il design che l'esperienza utente finale.
