Nel 2026, la modalità scura non è più una funzionalità “gadget per sviluppatori”. Gli studi di utilizzo mostrano che il 60-80% degli utenti attiva la modalità scura sul proprio sistema operativo almeno per una parte della giornata — iOS passa automaticamente in scuro la sera con True Tone, macOS e Windows hanno le loro impostazioni di luminosità automatica, i power-user la tengono attivata permanentemente per ridurre l’affaticamento oculare. Un negozio che non offre una modalità scura non corrisponde più alle aspettative UX del 2026 e invia ai suoi visitatori un flash bianco aggressivo a ogni caricamento di pagina — particolarmente fastidioso di sera e su mobile.
Shopware 6.7 non offre una modalità scura nativa lato storefront. Questa assenza non è banale: l’implementazione pulita richiede di gestire diversi temi tecnici (anti-FOUC, persistenza cross-device, compatibilità Bootstrap, sincronizzazione con altri componenti) che raramente vengono fatti bene senza un plugin dedicato. Questa guida illustra come implementare una dark mode completa e performante su Shopware 6.7, con le insidie tecniche da evitare.
Perché la dark mode è diventata uno standard UX nel 2026
Tre forze hanno reso la dark mode un’aspettativa piuttosto che un bonus.
L’uso a livello OS si è diffuso. Da iOS 13 (2019) e macOS Mojave (2018), la dark mode di sistema è passata da nicchia a mainstream. Le statistiche del 2025 indicano che l’80% degli utenti iOS e il 65% degli utenti Android hanno attivato la dark mode almeno occasionalmente, e il 35% la tiene permanentemente. Su desktop, è un po’ meno (40-50%), ma in costante crescita.
L’affaticamento visivo è un tema di salute riconosciuto. Diversi studi (in particolare quelli pubblicati dall’American Academy of Ophthalmology) hanno documentato l’impatto del bianco luminoso notturno sulla qualità del sonno e sull’affaticamento oculare. La modalità scura non è più una preferenza estetica — è una pratica di comfort integrata nelle routine digitali degli utenti sensibili a questi temi.
Le aspettative UX si sono allineate. Le grandi piattaforme (Twitter/X, Reddit, GitHub, Notion, Linear, Slack, Discord) offrono tutte una dark mode curata. Gli utenti si abituano a poter passare allo scuro su qualsiasi interfaccia e percepiscono negativamente i siti che non seguono questo standard. Per un negozio e-commerce, è un segnale di qualità sottile ma reale — particolarmente sui segmenti tech/creativi/giovani dove la dark mode è quasi una norma tribale.
Il ritardo accumulato da Shopware su questo punto non è critico in assoluto (la piattaforma resta solida sui suoi fondamentali), ma lascia i negozi con un’assenza di funzionalità che i merchant moderni si aspettano. Colmare questa assenza in modo pulito significa guadagnare su tre assi: comfort utente, segnale di qualità percepita e riconoscimento presso le audience sensibili all’UX moderna.
L’insidia del flash bianco (FOUC) — perché è eliminatorio in UX
FOUC sta per “Flash of Unstyled Content” — applicato alla dark mode, è il breve flash bianco visibile prima che il JavaScript della dark mode si esegua e applichi il tema scuro. Su un visitatore che ha configurato il suo OS in scuro, questo flash dura tipicamente da 100 a 400 millisecondi al primo caricamento della pagina: giusto il tempo che un essere umano ha per percepire l’incoerenza visiva.
Perché è eliminatorio:
Cognitivamente, il flash segnala un errore. Il cervello umano interpreta i cambiamenti visivi bruschi come anomalie. Una pagina che inizia in bianco e poi passa allo scuro appare difettosa — anche se il risultato finale è corretto. È l’opposto di ciò che si cerca in UX premium.
Su mobile, è fisicamente spiacevole. Nell’uso notturno (il momento in cui la dark mode ha più utilità), il flash di 300 ms a piena luminosità bianca viene percepito come un’aggressione visiva. Gli utenti percepiscono il sito come “non serio” e spesso chiudono la scheda senza un motivo consapevole.
Lato Core Web Vitals, danneggia l’LCP percepito. L’LCP (Largest Contentful Paint) misura il momento in cui il più grande elemento visibile viene renderizzato. Se il tuo LCP è a 1,8 s ma il flash bianco dura 300 ms aggiuntivi, l’utente percepisce in realtà 2,1 s di caricamento, e la sua sensazione di qualità del sito si degrada.
La causa tecnica del FOUC è nota: la maggior parte dei plugin dark mode applica il tema tramite JavaScript in DOMContentLoaded — evento che si attiva dopo il primo paint del browser. Quindi l’ordine è: (1) l’HTML viene renderizzato in modalità chiara per impostazione predefinita, (2) il browser fa il suo primo paint, (3) il DOMContentLoaded si attiva, (4) il JS applica il tema scuro, (5) il browser ridipinge. Tra 2 e 5, c’è il flash bianco.
La soluzione è altrettanto nota: iniettare uno script inline minimalista direttamente nella balise head, che legge il cookie di preferenza (sincrono, ~10 righe di JS) e imposta l’attributo data-bs-theme sull’élément racine della pagina prima del primo paint del browser. Ma questa soluzione viene raramente implementata correttamente su Shopware perché richiede di modificare il base layout Twig con uno script inline — cosa che pochi sviluppatori fanno naturalmente.
Architettura di una dark mode pulita su Shopware 6.7
Una dark mode completa e performante si basa su cinque componenti che devono lavorare insieme.
Una convenzione CSS supportata dal tuo tema. Bootstrap 5.3 ha introdotto data-bs-theme="dark" come convenzione standard, e la maggior parte dei temi Shopware 6.7+ basati su Bootstrap segue questa convenzione. I temi più vecchi o i temi custom possono usare una classe .dark su html o body. Prima di tutto, verifica quale convenzione usa il tuo tema — è questo che determina dove sarà applicata la dark mode.
Uno script anti-FOUC all’inizio della balise head. Questo script legge la preferenza del visitatore (cookie o rilevamento browser) e applica l’attributo data-bs-theme prima del primo paint. È l’unico componente non negoziabile di un’implementazione pulita.
Un toggle nell’header. Pulsante o switch che l’utente può attivare per passare tra Auto (segue il browser), Chiaro (forzato), Scuro (forzato). Il pattern a 3 stati è diventato standard nel 2026 — non solo Light/Dark, ma anche Auto per rispettare la scelta OS dell’utente senza dover ricliccare ogni volta.
Una persistenza tramite cookie. Affinché la scelta persista tra le sessioni, serve un cookie del browser (tipicamente 1 anno di durata, SameSite=Lax). Senza cookie, il visitatore torna sempre in modalità Auto a ogni visita — il che annulla l’interesse di averla impostata manualmente.
Una persistenza customer per gli utenti loggati. Per i clienti che si connettono al loro account Shopware, la preferenza deve essere memorizzata lato server (custom field customer) in modo da essere recuperata su qualsiasi dispositivo. Senza questo, un cliente che imposta la sua dark mode sul telefono arriva sul suo computer e riscopre la modalità chiara per impostazione predefinita.
L’orchestrazione: al login, si sincronizza il cookie con il custom field customer (cookie scritto con il valore del customer se ha una scelta registrata). A ogni cambiamento tramite il toggle, si aggiorna il cookie E si scrive nel custom field se l’utente è loggato. Il risultato è una dark mode “cross-device” che segue il cliente ovunque.
Implementazione step-by-step nello storefront Shopware 6.7
L’implementazione segue cinque passaggi ordinati.
Passaggio 1 — Verificare la convenzione CSS del tuo tema. Ispeziona il tuo theme/Resources/app/storefront/src/scss/ per identificare se il tuo tema usa [data-bs-theme="dark"] o un’altra convenzione. Se Bootstrap 5.3+ è in uso (come nei temi Shopware 6.6+), dovresti trovare regole dark tramite questa convenzione. In caso contrario, dovrai aggiungere i tuoi stili dark sotto il selettore che sceglierai.
Passaggio 2 — Aggiungere lo script anti-FOUC nel base layout. Fai override di base.html.twig nel tuo tema per aggiungere, nel block corrispondente alla balise head, uno script inline che legga il cookie df-dark-mode e applichi l’attributo. Lo script deve essere posizionato il più in alto possibile nella balise head, idealmente prima di qualsiasi altro script o stylesheet, per essere eseguito prima del primo paint.
Passaggio 3 — Creare il componente toggle. Un componente Twig semplice dark-mode-toggle.html.twig con un pulsante che cicla tra i 3 stati. Includerlo nel block base_header_actions_wishlist del base layout, o in un altro block secondo il tuo design. Il toggle deve mostrare un’icona rappresentativa dello stato corrente (luna per scuro, sole per chiaro, mezzaluna o icona composita per auto).
Passaggio 4 — Implementare la logica JavaScript. Un plugin JS storefront (dark-mode-toggle.plugin.js) che: (a) ascolta i clic sul toggle, (b) calcola il nuovo stato, (c) scrive il cookie, (d) aggiorna l’attributo data-bs-theme, (e) emette un evento custom df-dark-mode-changed affinché altri componenti possano reagire, (f) se l’utente è loggato, invia un POST a una route Shopware per aggiornare il custom field customer.
Passaggio 5 — Plugin PHP per il custom field customer e la route AJAX. Un plugin Shopware 6.7 standard che: (a) crea all’installazione il custom field df_dark_mode_preference sull’entità customer (tipo Select con 3 opzioni), (b) espone una route AJAX /df-dark-mode/save che valida la modalità ricevuta e scrive il custom field, (c) aggancia CustomerLoginEvent per sincronizzare il cookie al login, (d) rimuove correttamente il custom field alla disinstallazione.
L’implementazione manuale richiede mezza giornata per uno sviluppatore Shopware esperto, più qualche ora di test. È fattibile. Ma è anche tipicamente il tipo di funzionalità che si sviluppa una volta e si distribuisce su più negozi — da qui l’interesse di un plugin dedicato.
È ciò che fa il nostro plugin DataFirefly Dark Mode: toggle a 3 stati nell’header, anti-FOUC garantito tramite script inline, persistenza tramite cookie per i visitatori e custom field customer per i loggati, sincronizzazione al login, evento JS per le integrazioni di terze parti, snippet multilingue FR/EN/DE inclusi. Installazione in 3 minuti, configurazione predefinita collaudata.
Persistere la preferenza: cookie vs custom field customer
La persistenza è l’argomento su cui la maggior parte dei plugin dark mode fa compromessi che degradano l’esperienza.
Approccio solo cookie. Il più semplice: un cookie persiste la preferenza per 1 anno. Vantaggi: zero impatto sul database, funziona senza login, immediato. Limite: la preferenza è legata a un dispositivo e a un browser. Un cliente che cambia dispositivo o che naviga in privato perde la sua impostazione.
Approccio solo custom field customer. La preferenza è memorizzata sull’entità customer lato server. Vantaggi: recuperata su tutti i dispositivi del cliente, durevole. Limite: funziona solo per i clienti loggati, e richiede una richiesta server per leggere il valore (quindi impossibile da usare per l’anti-FOUC che deve essere sincrono lato browser).
Approccio ibrido (quello giusto). Cookie per l’anti-FOUC e la persistenza browser lato client, più custom field customer per gli utenti loggati. Al cambio di preferenza, si scrive in entrambi. Al login, si sincronizza il cookie con il valore del custom field. Questo design ibrido combina i vantaggi dei due ed elimina i loro limiti rispettivi.
Il dettaglio tecnico che fa tutta la differenza: la sincronizzazione al login. Senza di essa, un cliente che si connette su un nuovo dispositivo vedrà la modalità predefinita invece di recuperare la sua impostazione precedente. Con essa, l’esperienza è coerente su tutti i dispositivi del cliente. È un dettaglio invisibile quando funziona bene, ma immediatamente percepibile quando manca.
Sincronizzare la dark mode con gli altri componenti della pagina
Una volta in atto la dark mode, alcuni componenti di terze parti devono sapere quale tema è applicato per adattarsi. I casi più frequenti: grafici Recharts o Chart.js, iframe esterni (calendario, video embed, modulo terzo), widget di chat live, player audio/video. Senza sincronizzazione, questi componenti rimangono in modalità chiara su sfondo scuro, il che produce contrasti spiacevoli e rompe la coerenza visiva.
La soluzione pulita: un evento JavaScript custom emesso su document a ogni cambio di tema. Il pattern standard usa un evento chiamato df-dark-mode-changed con un payload che espone la preferenza grezza (auto/light/dark) e il tema effettivamente applicato (light/dark calcolato dopo la risoluzione della modalità auto).
I componenti interessati ascoltano l’evento con document.addEventListener e adattano il loro rendering di conseguenza: un grafico Recharts viene ri-renderizzato con una palette adattata, un iframe esterno riceve un postMessage per cambiare il suo tema, un player video cambia i suoi overlay.
Questo meccanismo è pulito perché disaccoppia i componenti: il plugin dark mode non deve conoscere i componenti di terze parti, e viceversa. L’evento custom funge da interfaccia neutra. Il costo di implementazione è minimo lato plugin (un dispatchEvent a ogni cambiamento), ma il beneficio lato integrazioni di terze parti è importante.
Conclusione: un investimento moderato, un forte segnale di qualità
La dark mode su Shopware 6.7 non è un argomento tecnicamente molto complesso preso singolarmente. Ma combina diversi dettagli (anti-FOUC, persistenza cross-device, compatibilità Bootstrap, evento di sincronizzazione) che devono essere tutti fatti bene affinché l’esperienza sia pulita. Una dark mode mal fatta degrada l’UX invece di migliorarla — flash bianco, preferenza persa tra dispositivi, conflitti con il tema, contrasti rotti sui componenti di terze parti.
L’investimento ne vale la pena perché segnala ai visitatori che il tuo negozio segue gli standard UX del 2026, e perché beneficia in modo particolarmente marcato le audience sensibili all’UX (segmenti tech, creativi, power-user). Il costo è moderato (mezza giornata di sviluppo per la versione manuale, 49 € per un plugin dedicato), il beneficio è duraturo.
Per approfondire gli argomenti correlati, sfoglia le nostre categorie Conversione & UX e Performance & Core Web Vitals. E per una dark mode Shopware 6.7 pronta da implementare con anti-FOUC garantito, persistenza ibrida ed evento di sincronizzazione nativo, il plugin DataFirefly Dark Mode implementa l’intero contenuto di questo articolo in pochi minuti di installazione.