In 2026 is dark mode geen “gadget voor ontwikkelaars” meer. Gebruiksstudies tonen dat 60 tot 80% van de gebruikers de donkere modus minstens een deel van de dag op hun OS activeert: iOS schakelt ‘s avonds automatisch om, macOS en Windows hebben hun automatische helderheidsinstellingen, en power users houden hem permanent aan om oogvermoeidheid te verminderen. Een shop zonder dark mode voldoet niet meer aan de UX-verwachtingen van 2026 en stuurt zijn bezoekers bij elke paginalading een agressieve witte flits, bijzonder vervelend ‘s avonds en op mobiel.
Shopware 6.7 biedt geen native dark mode aan storefrontzijde. Die afwezigheid is niet onschuldig: een nette implementatie vraagt om meerdere technische onderwerpen (anti-FOUC, cross-device persistentie, Bootstrap-compatibiliteit, synchronisatie met andere componenten) die zelden goed worden gedaan zonder dedicated plugin. Deze gids beschrijft hoe u een complete en performante dark mode implementeert op Shopware 6.7, met de technische valkuilen om te vermijden.
Waarom dark mode in 2026 een UX-standaard is geworden
Drie krachten hebben van dark mode een verwachting gemaakt in plaats van een bonus.
Het OS-gebruik is gemeengoed geworden. Sinds iOS 13 (2019) en macOS Mojave (2018) is de systeembrede dark mode van niche naar mainstream gegaan. De statistieken van 2025 geven aan dat 80% van de iOS-gebruikers en 65% van de Android-gebruikers de donkere modus minstens af en toe heeft geactiveerd, en 35% houdt hem permanent aan. Op desktop is het iets minder (40-50%), maar constant groeiend.
Visuele vermoeidheid is een erkend gezondheidsonderwerp. Meerdere studies (met name gepubliceerd door de American Academy of Ophthalmology) hebben de impact van fel wit ‘s nachts op de slaapkwaliteit en oogvermoeidheid gedocumenteerd. Dark mode is niet langer een esthetische voorkeur: het is een comfortpraktijk die in de digitale routines zit van gebruikers die gevoelig zijn voor deze onderwerpen.
De UX-verwachtingen zijn gelijkgetrokken. De grote platformen (Twitter/X, Reddit, GitHub, Notion, Linear, Slack, Discord) bieden allemaal een gepolijste dark mode. Gebruikers raken eraan gewend om op elke interface naar donker te kunnen schakelen en beoordelen sites die niet volgen negatief. Voor een webshop is dat een subtiel maar reëel kwaliteitssignaal, zeker in de tech-, creatieve en jonge segmenten waar dark mode bijna een stamnorm is.
De achterstand van Shopware op dit punt is op zich niet kritiek (het platform blijft solide op zijn fundamenten), maar ze laat shops achter zonder een functionaliteit die moderne verkopers verwachten. Die afwezigheid netjes invullen levert winst op drie assen: gebruikerscomfort, waargenomen kwaliteitssignaal en erkenning bij UX-gevoelige doelgroepen.
De valkuil van de witte flits (FOUC): waarom die eliminerend is in UX
FOUC staat voor “Flash of Unstyled Content”. Toegepast op dark mode is het de korte witte flits die zichtbaar is voordat de dark mode JavaScript draait en het donkere thema toepast. Bij een bezoeker met zijn OS in dark duurt die flits doorgaans 100 tot 400 milliseconden bij de eerste paginalading: precies de tijd die een mens nodig heeft om de visuele inconsistentie waar te nemen.
Waarom dat eliminerend is:
Cognitief signaleert de flits een fout. Het menselijk brein interpreteert plotselinge visuele veranderingen als anomalieën. Een pagina die wit start en dan naar donker schakelt, oogt defect, zelfs als het eindresultaat correct is. Het tegenovergestelde van wat u zoekt in premium UX.
Op mobiel is het fysiek onaangenaam. Bij nachtelijk gebruik (het moment waarop dark mode het nuttigst is) voelt de flits van 300 ms op volle witte helderheid als een visuele aanval. Gebruikers ervaren de site als “niet serieus” en sluiten vaak het tabblad zonder bewuste reden.
Aan Core Web Vitals kant beschadigt het de waargenomen LCP. De LCP (Largest Contentful Paint) meet het moment waarop het grootste zichtbare element gerenderd is. Is uw LCP 1,8 s maar duurt de witte flits 300 ms extra, dan ervaart de gebruiker in werkelijkheid 2,1 s laadtijd, en zakt zijn kwaliteitsgevoel over de site.
De technische oorzaak van de FOUC is bekend: de meeste dark mode plugins passen het thema toe via JavaScript in DOMContentLoaded, een event dat pas na de eerste paint van de browser afgaat. De volgorde is dus: (1) de HTML wordt standaard in lichte modus gerenderd, (2) de browser doet zijn eerste paint, (3) DOMContentLoaded gaat af, (4) de JS past het donkere thema toe, (5) de browser re-paint. Tussen 2 en 5 zit de witte flits.
De oplossing is even bekend: een minimalistisch inline script direct in de head-tag injecteren, dat de voorkeurscookie leest (synchroon, ongeveer 10 regels JS) en het attribuut data-bs-theme op het root-element van de pagina zet vóór de eerste paint van de browser. Maar die oplossing wordt zelden correct geïmplementeerd op Shopware, omdat ze vereist dat de base layout Twig wordt aangepast met een inline script, iets wat weinig ontwikkelaars vanzelf doen.
Architectuur van een nette dark mode op Shopware 6.7
Een complete en performante dark mode steunt op vijf componenten die moeten samenwerken.
Een CSS-conventie die uw thema ondersteunt. Bootstrap 5.3 introduceerde data-bs-theme="dark" als standaardconventie, en de meeste Shopware 6.7+ thema’s op Bootstrap-basis volgen die conventie. Oudere of custom thema’s kunnen een class .dark op html of body gebruiken. Controleer eerst welke conventie uw thema gebruikt: dat bepaalt waar de donkere modus wordt toegepast.
Een anti-FOUC script bovenaan de head-tag. Dit script leest de voorkeur van de bezoeker (cookie of browserdetectie) en past het attribuut data-bs-theme toe vóór de eerste paint. Het is de enige niet-onderhandelbare component van een nette implementatie.
Een toggle in de header. Een knop of switch waarmee de gebruiker kan wisselen tussen Auto (volgt de browser), Licht (geforceerd) en Donker (geforceerd). Het patroon met 3 standen is in 2026 standaard geworden: niet alleen Light/Dark, maar ook Auto om de OS-keuze van de gebruiker te respecteren zonder telkens opnieuw te hoeven klikken.
Persistentie via cookie. Om de keuze tussen sessies te bewaren is een browsercookie nodig (doorgaans 1 jaar geldig, SameSite=Lax). Zonder cookie komt de bezoeker bij elk bezoek terug in Auto-modus, wat het nut van de handmatige instelling tenietdoet.
Customer-persistentie voor ingelogde klanten. Voor klanten die inloggen op hun Shopware-account moet de voorkeur server-side worden opgeslagen (custom field op de customer) zodat ze op elk apparaat wordt teruggevonden. Zonder dat komt een klant die zijn dark mode op zijn telefoon instelt, op zijn computer terug in de standaard lichte modus.
De orkestratie: bij het inloggen wordt de cookie gesynchroniseerd met het customer custom field (cookie krijgt de waarde van de customer als die een keuze heeft opgeslagen). Bij elke wijziging via de toggle wordt de cookie bijgewerkt ÉN in het custom field geschreven als de gebruiker is ingelogd. Het resultaat is een “cross-device” dark mode die de klant overal volgt.
Stapsgewijze implementatie in de Shopware 6.7 storefront
De implementatie volgt vijf geordende stappen.
Stap 1: de CSS-conventie van uw thema controleren. Inspecteer uw theme/Resources/app/storefront/src/scss/ om te zien of uw thema [data-bs-theme="dark"] of een andere conventie gebruikt. Draait Bootstrap 5.3+ (het geval bij Shopware 6.6+ thema’s), dan zou u dark-regels via die conventie moeten vinden. Zo niet, dan voegt u uw eigen dark-stijlen toe onder de selector van uw keuze.
Stap 2: het anti-FOUC script toevoegen in de base layout. Override base.html.twig in uw thema om, in het block dat overeenkomt met de head-tag, een inline script toe te voegen dat de cookie df-dark-mode leest en het attribuut toepast. Het script moet zo hoog mogelijk in de head-tag staan, idealiter vóór elk ander script of stylesheet, zodat het vóór de eerste paint draait.
Stap 3: de toggle-component maken. Een eenvoudige Twig-component dark-mode-toggle.html.twig met een knop die door de 3 standen roteert. Op te nemen in het block base_header_actions_wishlist van de base layout, of in een ander block afhankelijk van uw design. De toggle toont een icoon dat de huidige stand weergeeft (maan voor donker, zon voor licht, halve maan of samengesteld icoon voor auto).
Stap 4: de JavaScript-logica implementeren. Een storefront JS-plugin (dark-mode-toggle.plugin.js) die: (a) luistert naar klikken op de toggle, (b) de nieuwe stand berekent, (c) de cookie schrijft, (d) het attribuut data-bs-theme bijwerkt, (e) een custom event df-dark-mode-changed uitstuurt zodat andere componenten kunnen reageren, (f) als de gebruiker is ingelogd, een POST naar een Shopware-route stuurt om het customer custom field bij te werken.
Stap 5: PHP-plugin voor het customer custom field en de AJAX-route. Een standaard Shopware 6.7 plugin die: (a) bij installatie het custom field df_dark_mode_preference op de customer-entiteit aanmaakt (type Select met 3 opties), (b) een AJAX-route /df-dark-mode/save aanbiedt die de ontvangen modus valideert en het custom field schrijft, (c) op CustomerLoginEvent hookt om de cookie bij het inloggen te synchroniseren, (d) het custom field netjes verwijdert bij de-installatie.
Handmatige implementatie kost een ervaren Shopware-ontwikkelaar een halve dag, plus enkele uren testen. Het is doenbaar. Maar het is ook typisch het soort functionaliteit dat je één keer ontwikkelt en op meerdere shops uitrolt, vandaar het nut van een dedicated plugin.
Dat is wat onze plugin DataFirefly Dark Mode doet: toggle met 3 standen in de header, gegarandeerde anti-FOUC via inline script, cookie-persistentie voor bezoekers en customer custom field voor ingelogde klanten, synchronisatie bij het inloggen, JS-event voor integraties van derden, meertalige snippets inbegrepen. Installatie in 3 minuten, beproefde standaardconfiguratie.
De voorkeur bewaren: cookie versus customer custom field
Persistentie is het onderwerp waar de meeste dark mode plugins compromissen sluiten die de ervaring verslechteren.
Alleen cookie. Het eenvoudigst: een cookie bewaart de voorkeur 1 jaar. Voordelen: nul impact op de database, werkt zonder login, onmiddellijk. Beperking: de voorkeur is gebonden aan één apparaat en één browser. Een klant die van apparaat wisselt of privé surft, verliest zijn instelling.
Alleen customer custom field. De voorkeur staat server-side op de customer-entiteit. Voordelen: teruggevonden op alle apparaten van de klant, duurzaam. Beperking: werkt alleen voor ingelogde klanten en vereist een serverrequest om de waarde te lezen (dus onbruikbaar voor de anti-FOUC, die synchroon aan browserzijde moet gebeuren).
De hybride aanpak (de juiste). Cookie voor de anti-FOUC en de browserpersistentie aan clientzijde, plus customer custom field voor ingelogde gebruikers. Bij een voorkeurswijziging schrijft u in beide. Bij het inloggen synchroniseert u de cookie met de waarde van het custom field. Dit hybride ontwerp combineert de voordelen van beide en elimineert hun respectievelijke beperkingen.
Het technische detail dat het verschil maakt: de synchronisatie bij het inloggen. Zonder ziet een klant die op een nieuw apparaat inlogt de standaardmodus in plaats van zijn eerdere instelling. Met is de ervaring consistent op alle apparaten van de klant. Een onzichtbaar detail wanneer het goed werkt, maar onmiddellijk voelbaar wanneer het ontbreekt.
De dark mode synchroniseren met de andere paginacomponenten
Staat de dark mode, dan moeten sommige componenten van derden weten welk thema actief is om zich aan te passen. De meest voorkomende gevallen: Recharts- of Chart.js-grafieken, externe iframes (kalender, video-embed, formulier van derden), livechatwidgets, audio/videospelers. Zonder synchronisatie blijven die componenten in lichte modus op een donkere achtergrond, wat onaangename contrasten oplevert en de visuele coherentie breekt.
De nette oplossing: een custom JavaScript-event dat bij elke themawijziging op document wordt uitgestuurd. Het standaardpatroon gebruikt een event met de naam df-dark-mode-changed met een payload die de ruwe voorkeur (auto/light/dark) en het effectief toegepaste thema (light/dark, berekend na resolutie van de auto-modus) blootlegt.
Geïnteresseerde componenten luisteren naar het event met document.addEventListener en passen hun rendering aan: een Recharts-grafiek re-rendert met een aangepast palet, een externe iframe krijgt een postMessage om haar thema om te schakelen, een videospeler wisselt zijn overlays.
Deze mechaniek is netjes omdat ze de componenten ontkoppelt: de dark mode plugin hoeft de componenten van derden niet te kennen, en omgekeerd. Het custom event dient als neutrale interface. De implementatiekosten zijn minimaal aan pluginzijde (één dispatchEvent per wijziging), maar het voordeel aan integratiezijde is groot.
Conclusie: een gematigde investering, een sterk kwaliteitssignaal
Dark mode op Shopware 6.7 is op zichzelf geen technisch zeer complex onderwerp. Maar het combineert meerdere details (anti-FOUC, cross-device persistentie, Bootstrap-compatibiliteit, synchronisatie-event) die allemaal goed moeten zijn om de ervaring netjes te maken. Een slecht gemaakte dark mode verslechtert de UX in plaats van haar te verbeteren: witte flits, voorkeur verloren tussen apparaten, conflicten met het thema, kapotte contrasten op componenten van derden.
De investering loont omdat ze bezoekers signaleert dat uw shop de UX-standaarden van 2026 volgt, en omdat ze bijzonder sterk rendeert bij UX-gevoelige doelgroepen (tech, creatieven, power users). De kosten zijn gematigd (een halve dag ontwikkeling voor de handmatige versie, 49 € voor een dedicated plugin), het voordeel is duurzaam.
Voor de aanverwante onderwerpen: blader door onze categorieën Conversie & UX en Prestaties & Core Web Vitals. En voor een uitrolklare Shopware 6.7 dark mode met gegarandeerde anti-FOUC, hybride persistentie en native synchronisatie-event: de plugin DataFirefly Dark Mode implementeert alles uit dit artikel in enkele minuten installatie.
Om in actie te komen: onze selectie van Shopware plugins voor design en personalisatie.
