Alles wat u wilt weten voordat u installeert.
Een gedetailleerde blik op hoe DataFirefly Dark Mode: Donkere Modus met Browserdetectie en Klantvoorkeur voor Shopware 6.7 werkt, waarom we het zo gebouwd hebben en de gedachte achter de bovenstaande functies.
Waarom een dark mode in Shopware 6.7
Shopware 6.7 biedt geen native donkere modus aan de storefrontzijde. Nochtans is de donkere modus van het besturingssysteem sinds 2023 massaal ingeburgerd: iOS schakelt 's avonds automatisch om met True Tone, macOS en Windows hebben hun instellingen voor automatische helderheid, en powerusers houden hun scherm 60 tot 80 procent van de tijd donker. Een webshop zonder dark mode stuurt die bezoekers bij elke pagina een agressieve witte flits, wat vooral 's avonds en op mobiel vervelend is. Dat is een omgekeerd kwaliteitssignaal: uw site loopt achter op de gewoonten van 2026. DfDarkMode vult dat gat met een nette implementatie, anti-FOUC en met respect voor de voorkeur van de klant.
De anti-FOUC: het detail dat een professionele dark mode scheidt van een geknutselde
FOUC staat voor Flash of Unstyled Content, dat kwart seconde waarin de pagina wit verschijnt voordat JavaScript het donkere thema toepast. De meeste dark mode plugins laten die flits bestaan omdat ze het thema via JavaScript in DOMContentLoaded toepassen, wat na de eerste paint van de browser gebeurt. DfDarkMode lost dat op met een minimalistisch inline script dat rechtstreeks in de head tag van de base layout wordt geplaatst: dat script leest het voorkeurscookie (synchroon, ongeveer 10 regels JS) en plaatst het attribuut data-bs-theme op het root-element VÓÓR de browser zijn eerste paint uitvoert. Het resultaat: nul witte flits, ook bij het eerste laden en ook in geforceerde dark mode. Gebruikers zien hun webshop nooit in een valse lichte modus.
3 standen en volledige bewaring
De schakelaar in de header wisselt tussen Auto, Licht en Donker. Auto volgt de prefers-color-scheme van de browser in realtime via een MediaQuery listener, dus wanneer het besturingssysteem van de bezoeker om 18 uur op donker overgaat, verandert de storefront onmiddellijk zonder de pagina te herladen. Licht en Donker dwingen de modus af, ongeacht de browservoorkeur. De voorkeur wordt anders bewaard naargelang de status: anonieme bezoekers via het cookie df-dark-mode dat 1 jaar geldig is, ingelogde klanten via het klant custom field df_dark_mode_preference dat automatisch bij de installatie wordt aangemaakt. De profielpagina van de klant bevat een keuzekaart om de voorkeur rechtstreeks vanuit de klantenzone aan te passen. Bij het inloggen wordt het cookie gesynchroniseerd met de waarde van het custom field, zodat een klant die zijn voorkeur op zijn telefoon heeft ingesteld dezelfde instelling op zijn computer terugvindt.
Bootstrap data-bs-theme compatibiliteit: nul CSS te schrijven
Bootstrap 5.3+ heeft de conventie data-bs-theme="dark" ingevoerd als standaard voor dark mode. Gebruikt uw Shopware-thema al CSS-regels die op de selector [data-bs-theme="dark"] mikken, wat bij de meeste premium thema's van 2025 en later het geval is, dan is DfDarkMode onmiddellijk compatibel: u installeert, u activeert, en het werkt. Heeft uw thema nog geen donkere stijlen, dan kunt u de native Bootstrap-variabelen gebruiken (--bs-body-bg, --bs-body-color en andere, die automatisch andere donkere waarden hebben), of uw eigen regels op uw tempo toevoegen. DfDarkMode raakt uw CSS niet aan, hij plaatst alleen een attribuut op het root-element van de pagina.
Nette en standaard Shopware-architectuur
De plugin volgt strikt de Shopware 6.7 conventies: PSR-4 autoload onder de namespace Df/DarkMode, een Plugin-klasse met de lifecycle install / update / uninstall, een klant custom field aangemaakt via de standaard DAL repository, een AJAX-route gedeclareerd via de PHP 8 attributen van het Symfony Routing component, services geïnjecteerd via services.xml, en subscribers gekoppeld aan kernel.event_subscriber. De deïnstallatie respecteert de vlag keepUserData van de Shopware-context: vinkt de beheerder Gebruikersgegevens behouden aan, dan blijven de custom fields en de klantvoorkeuren staan; zo niet wordt alles netjes verwijderd. Er is geen aangepaste schemamigratie nodig (alleen custom fields). Niet-versleutelde broncode, MIT-gelicentieerd en auditeerbaar.
Personalisatie en JS-gebeurtenis voor integraties
Standaard wordt de schakelaar in het blok base_header_actions_wishlist van de base layout ingevoegd. Om die te verplaatsen volstaat het base.html.twig te overschrijven en de include van het component dark-mode-toggle in een ander blok te plaatsen (search, account, custom en andere), met een volledig voorbeeld in de README. Aan de JS-kant stuurt de plugin bij elke wijziging een gebeurtenis df-dark-mode-changed op het document uit, met event.detail.preference (auto / light / dark) en event.detail.resolvedTheme (het berekende light of dark). Handig om een ander component te synchroniseren met het huidige thema (een Recharts-grafiek, een externe iframe, een Calendly-embed en andere).
There are no reviews yet.