Tout ce que vous voudriez savoir avant d'installer.
Un regard détaillé sur le fonctionnement de DataFirefly Dark Mode — Mode sombre avec détection navigateur et préférence client pour Shopware 6.7, pourquoi nous l'avons conçu ainsi, et la réflexion derrière les fonctionnalités ci-dessus.
Pourquoi un dark mode dans Shopware 6.7
Shopware 6.7 ne propose pas de mode sombre natif côté storefront. Or, depuis 2023, le mode sombre OS est massivement adopté : iOS bascule automatiquement le soir avec True Tone, macOS et Windows ont leurs réglages de luminosité automatique, les utilisateurs power-user gardent leur écran en sombre 60-80 % du temps. Une boutique sans dark mode envoie à ces visiteurs un flash blanc agressif à chaque chargement de page — particulièrement pénible le soir et sur mobile. C'est un signal qualité à l'envers : votre site n'est pas à jour avec les usages 2026. DfDarkMode comble ce trou avec une implémentation propre, anti-FOUC, et respectueuse de la préférence du client.
L'anti-FOUC : le détail qui sépare un dark mode pro d'un dark mode bricolé
FOUC veut dire « Flash of Unstyled Content » — ce demi-quart de seconde où la page apparaît en blanc avant que JavaScript n'applique le thème sombre. La majorité des plugins dark mode laissent ce flash parce qu'ils appliquent le thème via JavaScript dans DOMContentLoaded, ce qui se produit après le premier paint du navigateur. DfDarkMode résout le problème avec un script inline minimaliste placé directement dans la balise head du base layout : ce script lit le cookie de préférence (synchrone, ~10 lignes de JS) et pose l'attribut data-bs-theme sur l'élément racine AVANT que le navigateur ne fasse son premier paint. Résultat : zéro flash blanc, même au premier chargement, même en dark mode forcé. Les utilisateurs ne voient jamais leur boutique en mode « faux clair ».
3 états et persistance complète
Le toggle dans le header cycle entre Auto, Clair, Sombre. Auto suit le prefers-color-scheme du navigateur en temps réel via un MediaQuery listener — quand l'OS du visiteur passe en dark à 18h, le storefront change immédiatement, sans rechargement de page. Clair et Sombre forcent le mode quelle que soit la préférence navigateur. La préférence est persistée différemment selon le statut : visiteurs anonymes via cookie df-dark-mode valide 1 an, clients connectés via custom field customer df_dark_mode_preference créé automatiquement à l'installation. La page profil client contient une carte de sélection pour modifier la préférence directement depuis l'espace client. Au login, le cookie est synchronisé avec la valeur du custom field — donc un client qui a réglé sa préférence sur son téléphone retrouve le même réglage sur son ordinateur.
Compatibilité Bootstrap data-bs-theme : zéro CSS à écrire
Bootstrap 5.3+ a introduit la convention data-bs-theme="dark" comme standard pour le dark mode. Si votre thème Shopware utilise déjà des règles CSS ciblées par le sélecteur [data-bs-theme="dark"] — cas de la plupart des thèmes premium 2025+ — DfDarkMode est immédiatement compatible : vous installez, vous activez, ça fonctionne. Si votre thème n'a pas encore de styles dark, vous pouvez utiliser les variables Bootstrap natives (--bs-body-bg, --bs-body-color, etc. qui ont des valeurs dark différentes automatiquement), ou ajouter vos propres règles à votre rythme. DfDarkMode ne touche pas à votre CSS — il ne fait que poser un attribut sur l'élément racine de la page.
Architecture Shopware propre et standard
Le plugin suit strictement les conventions Shopware 6.7 : autoload PSR-4 sous le namespace Df/DarkMode, classe Plugin avec lifecycle install / update / uninstall, custom field customer créé via la repository DAL standard, route AJAX déclarée via les attributs PHP 8 du composant Symfony Routing, services injectés via services.xml, subscribers attachés à kernel.event_subscriber. La désinstallation respecte la flag keepUserData du contexte Shopware : si l'admin coche « Garder les données utilisateur », les custom fields et les préférences clients restent ; sinon, tout est supprimé proprement. Aucune migration de schéma personnalisée nécessaire (custom fields seulement). Code source non chiffré, MIT-licencé, auditable.
Personnalisation et événement JS pour intégrations
Par défaut, le toggle est inséré dans le block base_header_actions_wishlist du base layout. Pour le déplacer, il suffit d'override base.html.twig et de placer l'include du composant dark-mode-toggle dans un autre block (search, account, custom, etc.) — exemple complet dans le README. Côté JS, le plugin émet un événement df-dark-mode-changed sur le document à chaque changement, avec event.detail.preference (auto / light / dark) et event.detail.resolvedTheme (light / dark calculé). Pratique pour synchroniser un autre composant (graphique Recharts, iframe externe, embed Calendly, etc.) avec le thème courant.
Il n’y a pas encore d’avis.