Implementazione di Dark Mode: CSS, JavaScript e Preferenza del Sistema

Cos'è il Dark Mode e perché è importante?

Il dark mode (tema scuro) è una modalità di interfaccia che mostra sfondi scuri con testo chiaro. Riduce la fatica visiva in ambienti con poca luce.

Sugli schermi OLED, il dark mode può prolungare la durata della batteria del 30-60% perché i pixel scuri sono spenti. Vantaggio significativo per i dispositivi mobili.

Preferenza utente: Con il supporto del dark mode a livello di sistema (macOS, Windows, iOS, Android), gli utenti si aspettano un'esperienza coerente in tutte le applicazioni.

Accessibilità: Alcuni utenti (fotofobia, emicrania) preferiscono i temi scuri. Il dark mode offre vantaggi di accessibilità per questi utenti.

Gestione dei Temi con Variabili CSS

Le custom properties CSS (variabili) permettono di gestire i colori del tema in modo centralizzato. Definite il tema predefinito (light) in :root, tema dark in [data-theme="dark"].

Esempio: :root { --bg: #ffffff; --text: #1a1a1a; } [data-theme="dark"] { --bg: #1a1a1a; --text: #e0e0e0; }. Tutti gli stili usano queste variabili.

Transizioni di colore: body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; } fornisce una transizione di tema fluida.

Controllo del contrasto: Rispettate i rapporti di contrasto WCAG anche in dark mode. Il testo chiaro su sfondo scuro richiede un rapporto di contrasto di 4.5:1.

Ombre e bordi: Le ombre (box-shadow) sono meno visibili in dark mode. Usate i bordi per rendere i limiti degli elementi più distinti.

Cambio di Tema con JavaScript

Pulsante toggle: Quando l'utente clicca sul pulsante, cambiate il tema con document.documentElement.setAttribute('data-theme', 'dark').

Salvare la preferenza: Salvate la scelta dell'utente con localStorage.setItem('theme', 'dark'). Leggete con localStorage.getItem('theme') al caricamento della pagina.

Prevenzione del FOUC: Per prevenire il Flash of Unstyled Content (FOUC), applicate il parametro di tema con script inline in <head>. Questo determina il tema prima del rendering.

Funzione toggle: function toggleTheme() { const current = document.documentElement.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', next); localStorage.setItem('theme', next); }

Rilevamento della Preferenza di Sistema

Media query prefers-color-scheme: Applicate stili basati sulla preferenza di sistema in CSS con @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } }.

Rilevamento con JavaScript: Verificate la preferenza dark mode del sistema con window.matchMedia('(prefers-color-scheme: dark)').matches.

Ascoltare i cambiamenti: Tracciate i cambiamenti di tema del sistema con matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { if (e.matches) setDark(); else setLight(); }).

Ordine di priorità: 1. Selezione manuale dell'utente (localStorage), 2. Preferenza di sistema (prefers-color-scheme), 3. Tema predefinito (light). Verificate in questo ordine.

Migliori Pratiche del Dark Mode

Non usate il nero puro (#000000). Il grigio molto scuro (#121212 o #1a1a1a) è più gradevole e riduce la fatica visiva.

Riducete la saturazione dei colori. I colori vivaci (rosso, verde, blu) in dark mode causano fatica visiva. Usate colori desaturati.

Regolate le immagini. Le immagini luminose possono essere fastidiose in dark mode. Scurite leggermente le immagini con filter: brightness(0.8).

Testate tutti i componenti. Form, tabelle, blocchi di codice, grafici devono apparire corretti in dark mode. Verificate ogni componente in dark mode.

Meta theme-color: Configurate il colore dell'UI del browser (barra degli indirizzi) per corrispondere al dark mode con <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">.

Dark Mode nei Framework

Tailwind CSS: Definite gli stili dark mode con il prefisso dark:. Come dark:bg-gray-900 dark:text-white. Fornisce controllo manuale con strategia di classe.

React: Implementazione facile del dark mode con hook useDarkMode o libreria next-themes. Gestione del tema compatibile con SSR.

Vue: Dark mode reattivo con composable useDark da @vueuse/core. Rilevamento automatico della preferenza di sistema.

Bootstrap: Supporto dark mode in Bootstrap 5.3+ con attributo data-bs-theme="dark". Gestione del tema con variabili CSS.