Tutto quello che vorresti sapere prima di installare.
Uno sguardo dettagliato su come funziona DataFirefly Dark Mode — Modalità scura con rilevamento browser e preferenza cliente per Shopware 6.7, perché l'abbiamo progettato così, e il ragionamento dietro le funzionalità qui sopra.
Perché un dark mode in Shopware 6.7
Shopware 6.7 non offre una modalità scura nativa lato storefront. Eppure, dal 2023, la modalità scura OS è stata adottata in massa: iOS commuta automaticamente la sera con True Tone, macOS e Windows hanno le loro impostazioni di luminosità automatica, gli utenti power-user mantengono il loro schermo in scuro il 60-80% del tempo. Un negozio senza dark mode invia a questi visitatori un flash bianco aggressivo ad ogni caricamento di pagina — particolarmente fastidioso la sera e su mobile. È un segnale di qualità al contrario: il tuo sito non è al passo con gli usi 2026. DfDarkMode colma questa lacuna con un'implementazione pulita, anti-FOUC, e rispettosa della preferenza del cliente.
L'anti-FOUC: il dettaglio che separa un dark mode pro da un dark mode improvvisato
FOUC sta per «Flash of Unstyled Content» — quel mezzo quarto di secondo in cui la pagina appare in bianco prima che JavaScript applichi il tema scuro. La maggior parte dei plugin dark mode lascia questo flash perché applicano il tema tramite JavaScript in DOMContentLoaded, cosa che si produce dopo il primo paint del browser. DfDarkMode risolve il problema con uno script inline minimalista posizionato direttamente nel tag head del base layout: questo script legge il cookie di preferenza (sincrono, circa 10 righe di JS) e pone l'attributo data-bs-theme sull'elemento radice PRIMA che il browser faccia il suo primo paint. Risultato: zero flash bianco, anche al primo caricamento, anche in dark mode forzato. Gli utenti non vedono mai il tuo negozio in modalità «falso chiaro».
3 stati e persistenza completa
Il toggle nell'header cicla tra Auto, Chiaro, Scuro. Auto segue il prefers-color-scheme del browser in tempo reale tramite un MediaQuery listener — quando l'OS del visitatore passa in dark alle 18, lo storefront cambia immediatamente, senza ricaricare la pagina. Chiaro e Scuro forzano la modalità qualunque sia la preferenza del browser. La preferenza viene persistita diversamente in base allo status: visitatori anonimi tramite cookie df-dark-mode valido 1 anno, clienti loggati tramite custom field customer df_dark_mode_preference creato automaticamente all'installazione. La pagina profilo cliente contiene una card di selezione per modificare la preferenza direttamente dall'area cliente. Al login, il cookie viene sincronizzato con il valore del custom field — quindi un cliente che ha impostato la sua preferenza sul suo telefono ritrova la stessa impostazione sul suo computer.
Compatibilità Bootstrap data-bs-theme: zero CSS da scrivere
Bootstrap 5.3+ ha introdotto la convenzione data-bs-theme="dark" come standard per il dark mode. Se il tuo tema Shopware usa già regole CSS mirate dal selettore [data-bs-theme="dark"] — caso della maggior parte dei temi premium 2025+ — DfDarkMode è immediatamente compatibile: installi, attivi, funziona. Se il tuo tema non ha ancora stili dark, puoi usare le variabili Bootstrap native (--bs-body-bg, --bs-body-color, ecc. che hanno valori dark diversi automaticamente), o aggiungere le tue regole al tuo ritmo. DfDarkMode non tocca il tuo CSS — pone solo un attributo sull'elemento radice della pagina.
Architettura Shopware pulita e standard
Il plugin segue rigorosamente le convenzioni Shopware 6.7: autoload PSR-4 sotto il namespace Df/DarkMode, classe Plugin con lifecycle install / update / uninstall, custom field customer creato tramite il repository DAL standard, route AJAX dichiarata tramite gli attributi PHP 8 del componente Symfony Routing, servizi iniettati tramite services.xml, subscribers attaccati a kernel.event_subscriber. La disinstallazione rispetta il flag keepUserData del contesto Shopware: se l'admin spunta «Mantieni i dati utente», i custom field e le preferenze clienti restano; altrimenti, tutto viene eliminato correttamente. Nessuna migrazione di schema personalizzata necessaria (solo custom field). Codice sorgente non offuscato, MIT-licenziato, auditabile.
Personalizzazione ed evento JS per integrazioni
Per default, il toggle viene inserito nel block base_header_actions_wishlist del base layout. Per spostarlo, basta override base.html.twig e posizionare l'include del componente dark-mode-toggle in un altro block (search, account, custom, ecc.) — esempio completo nel README. Lato JS, il plugin emette un evento df-dark-mode-changed sul document ad ogni cambiamento, con event.detail.preference (auto / light / dark) e event.detail.resolvedTheme (light / dark calcolato). Pratico per sincronizzare un altro componente (grafico Recharts, iframe esterno, embed Calendly, ecc.) con il tema corrente.
Ancora non ci sono recensioni.