Il 91,8% degli utenti dichiara di preferire la dark mode dove disponibile. È un dato reale, verificato, e giustifica la crescente richiesta che riceviamo dalle agenzie per implementarla sui siti dei loro clienti. Il problema è che implementarla correttamente è molto più complesso di quanto sembri, e un’implementazione fatta male produce risultati peggiori di non averla.
La domanda che ci facciamo prima di ogni implementazione non è “come aggiungo la dark mode” ma “questo sito è costruito in modo da supportarla senza rompersi?” Nella maggior parte dei siti WordPress sviluppati senza pensare alla dark mode dall’inizio, la risposta è no. E scoprirlo dopo il lancio è costoso.
Perché la dark mode non è “cambiare lo sfondo da bianco a nero”
Questa è la misconcezione più diffusa, e quella che produce le implementazioni peggiori. La dark mode non è un filtro che inverte i colori: è un sistema di design alternativo completo che richiede che ogni elemento visivo del sito sia stato progettato per funzionare in entrambe le modalità.
Considera cosa succede quando si passa da light a dark su un sito non preparato. I testi scritti in grigio scuro su sfondo bianco diventano illeggibili su sfondo scuro. I bordi e le ombre progettati per la luce spariscono o diventano troppo pesanti. Le immagini con sfondo bianco mostrano un bordo bianco stonato sul layout scuro. I colori del brand, scelti per funzionare su sfondo chiaro, perdono contrasto o diventano aggressivi su sfondo scuro. I form e i campi di testo, quasi sempre stilati solo per il tema light, appaiono con i colori di sistema del browser invece che con quelli del design.
Ognuno di questi problemi richiede una soluzione specifica e tempo di sviluppo. Un’implementazione dark mode fatta correttamente non è un plugin attivato in cinque minuti: è un lavoro di design e sviluppo parallelo che vale circa il 30-40% del tempo di sviluppo del sito originale.
I problemi che troviamo più spesso
Lavorando su siti WordPress per le agenzie partner, abbiamo sviluppato una lista di controllo specifica per le implementazioni dark mode basata su quello che troviamo regolarmente.
Problema: Immagini PNG con sfondo trasparente Causa: Le immagini PNG con sfondo trasparente mostrano il colore del container su cui sono posizionate. In light mode il container è bianco e l’immagine sembra corretta. In dark mode il container diventa scuro e l’immagine mostra uno sfondo scuro non previsto, rendendo loghi, icone e grafici illeggibili o esteticamente sbagliati. Soluzione Blurr: Audit sistematico di tutte le immagini PNG nel sito prima di attivare la dark mode. Per i loghi, produzione di una versione alternativa ottimizzata per sfondo scuro con attributo CSS content che la sostituisce automaticamente via prefers-color-scheme. Per le icone, sostituzione con SVG inline che ereditano il colore del testo e si adattano automaticamente.
Problema: Testi con colori hardcoded invece di variabili CSS Causa: Testi stilati con colori fissi nel CSS, ad esempio color: #333333, invece di variabili che cambiano in base al tema. In dark mode il colore rimane grigio scuro su sfondo scuro, rendendo il testo invisibile. Soluzione Blurr: Refactoring del CSS per usare variabili custom property (--color-text: #333) ridefinite nel blocco @media (prefers-color-scheme: dark). Su siti costruiti con page builder come Bricks, questo richiede di verificare che tutti i colori usino le variabili del design system e non colori statici.
Problema: Ombre e bordi che spariscono o diventano pesanti Causa: Le ombre sono progettate per simulare profondità su sfondo chiaro. Su sfondo scuro perdono senso o diventano troppo evidenti. I bordi chiari spariscono completamente. Soluzione Blurr: Ridefinizione delle ombre in dark mode con valori ridotti o con colori alternativi. Per i bordi, uso di variabili CSS con valore chiaro in light mode e scuro in dark mode.
Problema: Conflitti con plugin di terze parti Causa: Plugin come WooCommerce, form builder, plugin di chat e widget esterni hanno i propri stili CSS che non seguono il sistema di variabili del tema. Quando si attiva la dark mode, questi elementi rimangono nel loro tema originale creando isole visive incoerenti nel layout. Soluzione Blurr: Identificazione di tutti i plugin con stili propri prima dell’implementazione. Per ciascuno, verifica se supportano nativamente la dark mode o se richiedono override CSS manuali. Nei casi più complessi, isolamento dei widget in container light-mode fixed per non creare incoerenza visiva.
Il caso che ci ha insegnato a verificare prima di implementare
Qualche tempo fa un’agenzia con cui lavoriamo ha richiesto di aggiungere la dark mode al sito di uno studio fotografico che avevamo sviluppato l’anno precedente. Il sito aveva centinaia di immagini di prodotto, loghi di clienti in PNG e una galleria portfolio estesa.
Abbiamo fatto la verifica preliminare che facciamo sempre su questo tipo di richiesta: audit delle immagini, dei colori nel CSS, dei plugin attivi. Il risultato è stato che il 60% delle immagini del portfolio aveva sfondi bianchi non trasparenti che sarebbero diventati bianchi su layout scuro, rompendo completamente l’estetica del sito. I loghi dei clienti erano tutti PNG con sfondo bianco. Il CSS usava colori hardcoded su quasi tutti gli elementi.
La stima per un’implementazione corretta era di tre volte il tempo che il cliente aveva preventivato. La conversazione con l’agenzia è diventata un’opportunità per spiegare che la dark mode non è una funzionalità da aggiungere dopo: è una scelta di design da fare prima, quando si costruisce il sito, integrando le variabili CSS e il sistema di colori in modo che supporti entrambe le modalità dall’inizio.
Il cliente ha scelto di non implementarla in quel momento e di integrarla nel prossimo refactoring del sito. È la risposta più onesta che si possa dare quando il costo supera il beneficio atteso.
Quando implementare la dark mode e quando no
Non tutti i siti hanno bisogno della dark mode. La decisione deve essere presa in base all’obiettivo del sito e al profilo degli utenti, non alla moda del momento.
Ha senso implementarla per siti con molto consumo serale o notturno, come blog, piattaforme di lettura, SaaS e strumenti di produttività. Per siti con un’identità visiva molto forte basata su colori chiari, la dark mode rischia di diluire quella identità invece di arricchirla. Per siti ecommerce con molte fotografie di prodotto, i problemi tecnici delle immagini rischiano di superare i benefici.
La regola che applichiamo: se il sito è costruito con un design system basato su variabili CSS dall’inizio, la dark mode si aggiunge con uno sforzo contenuto. Se il sito è stato costruito con colori hardcoded e immagini non ottimizzate, il costo di una dark mode corretta quasi sempre supera il beneficio. In quel caso, meglio aspettare il prossimo refactoring e integrarla fin dall’inizio.
Per chi costruisce nuovi siti e vuole supportare la dark mode in futuro, la cosa più utile da fare adesso è usare CSS custom properties per tutti i colori e produrre i loghi in formato SVG invece che PNG. Non richiede tempo aggiuntivo significativo durante lo sviluppo, ma rende l’implementazione futura della dark mode una questione di ore invece che di giorni.
Su blurr.it/servizi/ trovi come gestiamo questi aspetti nei siti che sviluppiamo per le agenzie partner. Per approfondire come strutturiamo la SEO tecnica e le performance su ogni progetto, leggi l’articolo dedicato. Per capire come le scelte di design impattano i Core Web Vitals, leggi l’articolo dedicato.
FAQ
Dipende dallo schermo. Su dispositivi con display OLED, la dark mode riduce significativamente il consumo energetico perché i pixel neri vengono spenti completamente. Su display LCD standard, la differenza energetica è minima. In termini di Core Web Vitals, un’implementazione dark mode corretta non impatta negativamente le performance se usa CSS custom properties e non JavaScript per la gestione del tema. Un’implementazione basata su JavaScript che cambia classi DOM può invece aggiungere latenza al rendering iniziale.
Dipende dal tipo di sito. I plugin come WP Dark Mode sono utili per siti con design semplice e pochi elementi personalizzati: attivano la dark mode con configurazione minima ma producono risultati approssimativi su design complessi. L’implementazione CSS con custom properties e prefers-color-scheme è più precisa, più performante e non aggiunge dipendenze esterne, ma richiede che il sito sia stato costruito con variabili CSS dall’inizio. Su siti con design system strutturato, preferiamo sempre l’implementazione CSS nativa.
I loghi vanno prodotti in formato SVG che eredita il colore del testo e si adatta automaticamente, oppure in due versioni separate, chiara e scura, con sostituzione automatica via CSS. Le immagini PNG con sfondo bianco non trasparente richiedono una valutazione caso per caso: in alcuni contesti si può aggiungere un container con sfondo chiaro fisso che mantiene il contesto originale dell’immagine, in altri si produce una versione alternativa dell’immagine con sfondo trasparente o scuro.
No, non direttamente. La dark mode è un aspetto visivo gestito lato client che non cambia il contenuto HTML indicizzato da Google. Un’implementazione corretta con CSS e prefers-color-scheme è invisibile ai crawler. L’unico impatto indiretto possibile è positivo: se la dark mode migliora l’esperienza utente e riduce la frequenza di rimbalzo, questo segnale può influenzare indirettamente il posizionamento.