Welche Shopware-Versionen werden unterstützt?

Nur Shopware 6.7+. Das Plugin verwendet PHP-8-Attribute der Symfony-Routing-Komponente und bestimmte Shopware-6.7-APIs. Shopware 6.6 und älter werden nicht unterstützt.

Was ist „FOUC“ und warum ist es wichtig?

FOUC steht für „Flash of Unstyled Content“ — der kurze weiße Blitz, der sichtbar ist, bevor das Dunkelmodus-JavaScript ausgeführt wird. Für einen Besucher im Dunkelmodus ist dieser Blitz sehr störend (besonders nachts und auf Mobilgeräten). DfDarkMode eliminiert ihn mit einem Inline-Skript im head-Tag, das das Theme BEFORE dem ersten Paint des Browsers anwendet.

Funktioniert das Plugin ohne Änderungen an meinem CSS?

Ja, vorausgesetzt Ihr Theme folgt der Bootstrap-5.3+-Konvention mit [data-bs-theme="dark"]-Selektoren. Die meisten aktuellen Shopware-6.7-Premium-Themes verwenden dies bereits. Falls nicht, setzt das Plugin trotzdem das data-bs-theme-Attribut am Root-Element — Sie können jederzeit eigene Dunkel-Styles hinzufügen, ohne das Plugin zu ändern.

Wie wird die Präferenz gespeichert?

Für anonyme Besucher: Cookie df-dark-mode, 1 Jahr gültig, SameSite=Lax, Secure über HTTPS. Für eingeloggte Kunden: Kunden-Custom-Field df_dark_mode_preference (Typ Select mit 3 Optionen: auto / light / dark). Der Cookie wird bei jeder Änderung aktualisiert und beim Login mit dem Custom Field synchronisiert.

Wie funktioniert der 3-Zustands-Toggle?

Eine einzige Schaltfläche im Header, die zwischen 3 Zuständen wechselt: Auto (folgt dem prefers-color-scheme des Browsers), Hell (erzwingt Hell), Dunkel (erzwingt Dunkel). Der Benutzer klickt, um zum nächsten Zustand zu wechseln. Ein sichtbares Symbol zeigt den aktuellen Zustand an. Beschriftungen sind in FR / EN / DE übersetzt.

Verlangsamt das Plugin den Storefront?

Vernachlässigbarer Einfluss. Das Anti-FOUC-Skript umfasst ~10 Zeilen synchrones JS im head-Tag. Das Storefront-JS-Plugin lädt normal zusammen mit anderen Shopware-Plugins. Das Speichern der Präferenz erfolgt per AJAX (POST /df-dark-mode/save) ohne Seitenneuladen. Keine Anfragen an externe Dienste, keine zusätzlichen JS-Abhängigkeiten.

Was passiert mit meinen bestehenden Kunden bei der Installation?

Das Kunden-Custom-Field wird für alle Kunden (neu und bestehend) mit einem Null-Standardwert erstellt, was „auto“ entspricht (folgt dem Browser). Keine destruktiven Änderungen, kein Datenverlust. Bestehende Kunden erhalten die Standarderfahrung und können ihre Präferenz jederzeit über ihr Konto anpassen.

Wie verschiebe ich den Toggle an eine andere Stelle im Header?

Der Toggle ist standardmäßig im Block base_header_actions_wishlist des Base-Layouts eingebettet. Um ihn zu verschieben, überschreiben Sie base.html.twig und platzieren Sie den dark-mode-toggle-Komponenten-Include im gewünschten Block. Ein vollständiges Beispiel ist im README enthalten.

Wie synchronisiere ich eine andere Komponente (Chart, iframe) mit dem aktuellen Theme?

Das Plugin emittiert bei jeder Änderung ein benutzerdefiniertes df-dark-mode-changed-Event auf dem Dokument. Sie können es mit plain JS über document.addEventListener abhören. event.detail.preference liefert die rohe Präferenz (auto / light / dark), event.detail.resolvedTheme das aktuell angewendete Theme (light oder dark). Ideal zum Aktualisieren eines Recharts-Diagramms, eines externen iframes oder jeder Komponente, die dem aktuellen Theme folgen muss.

Ist das Plugin Multi-Verkaufskanal-kompatibel?

Ja. Das Kunden-Custom-Field wird über alle Verkaufskanäle geteilt. Die Präferenz ist konsistent, egal auf welchem Kanal sich der Kunde einloggt.

Was passiert bei der Deinstallation?

Die Deinstallation respektiert das keepUserData-Flag des Shopware-Kontexts. Wenn der Admin „Benutzerdaten behalten“ ankreuzt, verbleiben das Custom Field und die gespeicherten Präferenzen in der Datenbank. Andernfalls wird das Custom Field sauber gelöscht, einschließlich seiner Optionen und aller Kundenwerte.

Ist der Quellcode verschlüsselt?

Nein. Der PHP-Code liegt im Klartext vor, lesbar und änderbar. MIT-Lizenz — Sie können prüfen, erweitern, forken. ~310 PHP-Zeilen insgesamt, sauberer Df/DarkMode-Namespace, konform mit Shopware-6.7-Standards.

Folgt der „Auto“-Modus dem Browser wirklich in Echtzeit?

Ja. Im Auto-Modus hängt das Plugin einen MediaQuery-Listener an prefers-color-scheme: dark. Ändert der Besucher seine OS-Einstellung während er auf Ihrer Seite ist (oder löst der automatische Tag/Nacht-Wechsel des OS aus), wechselt das Theme sofort ohne Seitenneuladen.

DataFirefly Dark Mode — Dunkelmodus für Shopware 6.7 mit Anti-FOUC

Die ausführliche Fassung

Alles, was Sie wissen sollten bevor Sie installieren.

Ein detaillierter Blick darauf, wie DataFirefly Dark Mode — Dunkelmodus mit Browser-Erkennung und Kundenpräferenz für Shopware 6.7 funktioniert, warum wir es so gebaut haben und der Gedanke hinter den Funktionen oben.

§ 01

Warum ein Dunkelmodus in Shopware 6.7?

Shopware 6.7 bietet keinen nativen Dunkelmodus im Storefront. Dabei ist der OS-Dunkelmodus seit 2023 massiv verbreitet: iOS schaltet nachts automatisch mit True Tone um, macOS und Windows haben automatische Helligkeitseinstellungen, Power-User halten ihren Bildschirm 60-80 % der Zeit dunkel. Ein Shop ohne Dunkelmodus sendet diesen Besuchern bei jedem Seitenaufruf einen aggressiven weißen Blitz — besonders unangenehm nachts und auf Mobilgeräten. Es ist ein umgekehrtes Qualitätssignal: Ihre Website ist nicht auf dem Stand der 2026er Nutzungsgewohnheiten. DfDarkMode schließt diese Lücke mit einer sauberen, Anti-FOUC-Implementierung, die die Präferenz des Kunden respektiert.

§ 02

Anti-FOUC: das Detail, das einen professionellen Dunkelmodus von einem improvisierten unterscheidet

FOUC steht für „Flash of Unstyled Content“ — der Bruchteil einer Sekunde, in dem die Seite weiß erscheint, bevor JavaScript das dunkle Theme anwendet. Die meisten Dunkelmodus-Plugins lassen diesen Blitz, weil sie das Theme über JavaScript in DOMContentLoaded anwenden, das nach dem ersten Paint des Browsers ausgeführt wird. DfDarkMode löst das Problem mit einem minimalen Inline-Skript direkt im head-Tag des Base-Layouts: Dieses Skript liest den Präferenz-Cookie (synchron, ~10 JS-Zeilen) und setzt das data-bs-theme-Attribut am Root-Element BEFORE dem ersten Paint des Browsers. Ergebnis: kein weißer Blitz, auch beim ersten Laden und im erzwungenen Dunkelmodus.

§ 03

3 Zustände und vollständige Persistenz

Der Header-Toggle wechselt zwischen Auto, Hell, Dunkel. Auto folgt dem prefers-color-scheme des Browsers in Echtzeit per MediaQuery-Listener — wenn das OS des Besuchers um 18 Uhr auf Dunkel wechselt, ändert sich der Storefront sofort, ohne Seitenneuladen. Hell und Dunkel erzwingen den Modus unabhängig von der Browser-Präferenz. Die Präferenz wird je nach Status unterschiedlich gespeichert: anonyme Besucher per df-dark-mode-Cookie (1 Jahr gültig), eingeloggte Kunden per df_dark_mode_preference Kunden-Custom-Field, das bei der Installation automatisch erstellt wird. Die Kundenprofilseite enthält eine Auswahlkarte zum direkten Ändern der Präferenz. Beim Login wird der Cookie mit dem Custom-Field-Wert synchronisiert.

§ 04

Bootstrap-data-bs-theme-Kompatibilität: kein CSS zu schreiben

Bootstrap 5.3+ hat die Konvention data-bs-theme="dark" als Standard für den Dunkelmodus eingeführt. Wenn Ihr Shopware-Theme bereits CSS-Regeln für den [data-bs-theme="dark"]-Selektor verwendet — der Fall bei den meisten Premium-Themes 2025+ — ist DfDarkMode sofort kompatibel: installieren, aktivieren, es funktioniert. Falls Ihr Theme noch keine Dunkel-Styles hat, können Sie native Bootstrap-Variablen (--bs-body-bg, --bs-body-color usw.) nutzen oder eigene Regeln nach und nach hinzufügen. DfDarkMode berührt Ihr CSS nicht.

§ 05

Saubere, standardkonforme Shopware-Architektur

Das Plugin folgt strikt den Shopware-6.7-Konventionen: PSR-4-Autoload unter dem Df/DarkMode-Namespace, Plugin-Klasse mit install / update / uninstall-Lifecycle, Kunden-Custom-Field über das Standard-DAL-Repository erstellt, AJAX-Route per PHP-8-Symfony-Routing-Attributen deklariert, Services per services.xml injiziert, Subscriber an kernel.event_subscriber gebunden. Die Deinstallation respektiert das keepUserData-Flag. Keine benutzerdefinierten Schema-Migrationen erforderlich. Klartext-Quellcode, MIT-lizenziert, prüfbar.

§ 06

Anpassung und JS-Event für Integrationen

Standardmäßig wird der Toggle im Block base_header_actions_wishlist des Base-Layouts eingebettet. Um ihn zu verschieben, überschreiben Sie einfach base.html.twig und platzieren Sie das dark-mode-toggle-Komponenten-Include in einem anderen Block (Suche, Konto, Benutzerdefiniert usw.) — vollständiges Beispiel im README. Auf der JS-Seite emittiert das Plugin bei jeder Änderung ein df-dark-mode-changed-Event auf dem Dokument mit event.detail.preference (auto / light / dark) und event.detail.resolvedTheme (berechnetes light / dark). Praktisch zum Synchronisieren einer anderen Komponente (Recharts-Diagramm, externer iframe, Calendly-Embed usw.) mit dem aktuellen Theme.

PrestaShop

WordPress / WooCommerce

Shopware 6

DataFirefly Dark Mode — Dunkelmodus mit Browser-Erkennung und Kundenpräferenz für Shopware 6.7

Die Kurzfassung.

Anti-FOUC: kein weißer Blitz, auch beim ersten Laden

3 Zustände: Auto (folgt dem Browser), Hell, Dunkel

Gespeicherte Präferenz, geräteübergreifend beim Login synchronisiert

Kompatibel mit Ihrem bestehenden Dunkel-Theme, ohne CSS zu ändern

Alles, was Sie wissen sollten bevor Sie installieren.

Warum ein Dunkelmodus in Shopware 6.7?

Anti-FOUC: das Detail, das einen professionellen Dunkelmodus von einem improvisierten unterscheidet

3 Zustände und vollständige Persistenz

Bootstrap-data-bs-theme-Kompatibilität: kein CSS zu schreiben

Saubere, standardkonforme Shopware-Architektur

Anpassung und JS-Event für Integrationen

Die vollständige Liste.

Was ausgeliefert wurde.

Die Kleingedrucktes.

Lizenz und Lieferung

Kompatibilität

Was echte Nutzer sagen.

Etwas noch unklar?

Frage stellen