In 2026 ist der Dunkelmodus keine „Entwickler-Spielerei“ mehr. Nutzungsstudien zeigen, dass 60 bis 80% der Nutzer den Dunkelmodus auf ihrem Betriebssystem mindestens einen Teil des Tages aktivieren. Ein Shop ohne Dunkelmodus entspricht 2026 nicht mehr den UX-Erwartungen und sendet Besuchern bei jedem Seitenaufruf einen aggressiven weißen Blitz — besonders schmerzhaft abends und auf Mobilgeräten.
Shopware 6.7 bietet keinen nativen Dunkelmodus im Storefront. Diese Lücke ist nicht trivial: Eine saubere Implementierung erfordert den Umgang mit mehreren technischen Themen (Anti-FOUC, geräteübergreifende Persistenz, Bootstrap-Kompatibilität, Synchronisation mit anderen Komponenten), die ohne dediziertes Plugin selten korrekt umgesetzt werden. Dieser Leitfaden beschreibt, wie ein vollständiger, performanter Dunkelmodus auf Shopware 6.7 implementiert wird, mit den technischen Fallstricken, die zu vermeiden sind.
Warum Dunkelmodus 2026 zum UX-Standard geworden ist
Drei Kräfte haben den Dunkelmodus von einem Bonus zu einer Erwartung gemacht. Die OS-Nutzung ist zum Mainstream geworden: 2025-Statistiken zeigen, dass 80% der iOS-Nutzer und 65% der Android-Nutzer den Dunkelmodus mindestens gelegentlich aktiviert haben. Große Plattformen (Twitter/X, Reddit, GitHub, Notion, Slack) bieten alle polierten Dunkelmodus an — Nutzer erwarten dies auf jeder Oberfläche.
Die Falle des weißen Blitzes (FOUC) — warum er ein UX-Killer ist
FOUC bedeutet „Flash of Unstyled Content“ — beim Dunkelmodus ist das der kurze weiße Blitz, der sichtbar ist, bevor das Dunkelmodus-JavaScript das dunkle Theme anwendet. Die technische Ursache ist bekannt: Die meisten Dunkelmodus-Plugins wenden das Theme via JavaScript in DOMContentLoaded an — einem Event, das nach dem ersten Paint des Browsers feuert. Die Lösung: Ein minimales Inline-Skript direkt in den Head-Tag injizieren, das den Präferenz-Cookie liest (synchron, ~10 Zeilen JS) und das data-bs-theme-Attribut am Root-Element vor dem ersten Paint des Browsers setzt.
Architektur eines sauberen Dunkelmodus auf Shopware 6.7
Ein vollständiger Dunkelmodus stützt sich auf fünf Komponenten: (1) eine vom Theme unterstützte CSS-Konvention (data-bs-theme="dark" von Bootstrap 5.3), (2) ein Anti-FOUC-Skript am Anfang des Head-Tags, (3) ein Toggle im Header mit 3 Zuständen (Auto / Hell / Dunkel), (4) Cookie-Persistenz für Besucher (1 Jahr, SameSite=Lax), (5) Customer-Custom-Field für eingeloggte Nutzer. Orchestrierung: Beim Login Cookie mit Custom Field synchronisieren; bei jeder Präferenzänderung beide aktualisieren. Ergebnis: ein „geräteübergreifender“ Dunkelmodus, der dem Kunden überall folgt.
Schritt-für-Schritt-Implementierung auf Shopware 6.7
Schritt 1 — CSS-Konvention Ihres Themes prüfen. Suchen Sie nach [data-bs-theme="dark"] in theme/Resources/app/storefront/src/scss/.
Schritt 2 — Anti-FOUC-Skript im Base-Layout hinzufügen. Override von base.html.twig, um ein Inline-Skript so früh wie möglich im Head-Tag hinzuzufügen, das den df-dark-mode-Cookie liest und das Attribut vor dem ersten Paint anwendet.
Schritt 3 — Toggle-Komponente erstellen. Einfache Twig-Komponente mit einem Button, der zwischen 3 Zuständen wechselt. Im Block base_header_actions_wishlist oder einem anderen Block einbinden.
Schritt 4 — JavaScript-Logik implementieren. Storefront-JS-Plugin (dark-mode-toggle.plugin.js), das Toggle-Klicks überwacht, den neuen Zustand berechnet, den Cookie schreibt, data-bs-theme aktualisiert, ein benutzerdefiniertes df-dark-mode-changed-Event emittiert und bei eingeloggtem Nutzer ein POST an eine Shopware-Route sendet.
Schritt 5 — PHP-Plugin für Custom Field und AJAX-Route. Standard-Shopware-6.7-Plugin, das das Custom Field df_dark_mode_preference erstellt, die Route /df-dark-mode/save exponiert, CustomerLoginEvent für die Login-Synchronisation einhängt und das Custom Field bei der Deinstallation löscht.
Genau das macht unser Plugin DataFirefly Dark Mode: 3-Zustands-Toggle, garantiertes Anti-FOUC, hybride Cookie + Custom-Field-Persistenz, Login-Sync, JS-Event für Drittanbieter-Integrationen. In 3 Minuten einsatzbereit.
Dunkelmodus mit anderen Seitenkomponenten synchronisieren
Einige Drittanbieter-Komponenten (Recharts/Chart.js-Diagramme, externe iframes, Live-Chat-Widgets) müssen wissen, welches Theme angewendet wird, um sich anzupassen. Die saubere Lösung: ein benutzerdefiniertes JavaScript-Event df-dark-mode-changed, das bei jeder Themeänderung auf document emittiert wird, mit dem rohen Präferenzwert (auto/light/dark) und dem aufgelösten Theme. Interessierte Komponenten hören mit document.addEventListener zu.
Fazit: eine moderate Investition, ein starkes Qualitätssignal
Dunkelmodus auf Shopware 6.7 kombiniert mehrere Details (Anti-FOUC, geräteübergreifende Persistenz, Bootstrap-Kompatibilität, Sync-Event), die alle korrekt sein müssen. Ein schlecht gemachter Dunkelmodus verschlechtert die UX statt sie zu verbessern.
Stöbern Sie in unseren Kategorien Conversion & UX und Performance & Core Web Vitals für verwandte Themen. Und für einen sofort einsatzbereiten Shopware-6.7-Dunkelmodus implementiert das Plugin DataFirefly Dark Mode alles aus diesem Artikel mit einer 3-minütigen Installation.