Wszystko, co warto wiedzieć, zanim zainstalujesz.
Szczegółowe spojrzenie na to, jak działa DataFirefly Dark Mode: tryb ciemny z detekcją przeglądarki i preferencją klienta dla Shopware 6.7, dlaczego zbudowaliśmy go w ten sposób i jaka myśl stoi za powyższymi funkcjami.
Dlaczego tryb ciemny w Shopware 6.7
Shopware 6.7 nie oferuje natywnego trybu ciemnego po stronie storefrontu. Tymczasem od 2023 roku tryb ciemny w systemach operacyjnych jest powszechnie używany: iOS przełącza się automatycznie wieczorem dzięki True Tone, macOS i Windows mają własne ustawienia automatycznej jasności, a zaawansowani użytkownicy trzymają ekran w trybie ciemnym przez 60-80 % czasu. Sklep bez trybu ciemnego serwuje takim odwiedzającym agresywny biały błysk przy każdym załadowaniu strony, szczególnie uciążliwy wieczorem i na urządzeniach mobilnych. To sygnał jakościowy działający na Twoją niekorzyść: witryna nie nadąża za zwyczajami 2026 roku. DfDarkMode wypełnia tę lukę czystą implementacją, bez FOUC i z poszanowaniem preferencji klienta.
Brak FOUC: detal, który odróżnia profesjonalny tryb ciemny od prowizorki
FOUC oznacza Flash of Unstyled Content, czyli ułamek sekundy, w którym strona pojawia się na biało, zanim JavaScript zastosuje ciemny motyw. Większość wtyczek trybu ciemnego zostawia ten błysk, ponieważ stosuje motyw przez JavaScript w zdarzeniu DOMContentLoaded, które następuje po pierwszym renderowaniu przeglądarki. DfDarkMode rozwiązuje problem minimalistycznym skryptem inline umieszczonym bezpośrednio w sekcji head base layoutu: skrypt odczytuje cookie preferencji (synchronicznie, około 10 linii JS) i ustawia atrybut data-bs-theme na elemencie głównym strony PRZED pierwszym renderowaniem. Efekt: zero białego błysku, nawet przy pierwszym załadowaniu i przy wymuszonym trybie ciemnym. Użytkownicy nigdy nie zobaczą Twojego sklepu w trybie fałszywie jasnym.
3 stany i pełne utrwalanie preferencji
Przełącznik w nagłówku krąży między Auto, Jasny i Ciemny. Auto śledzi prefers-color-scheme przeglądarki w czasie rzeczywistym przez MediaQuery listener: gdy system operacyjny odwiedzającego przełączy się na ciemny o 18:00, storefront zmienia się natychmiast, bez przeładowania strony. Jasny i Ciemny wymuszają tryb niezależnie od preferencji przeglądarki. Preferencja jest utrwalana różnie w zależności od statusu: odwiedzający anonimowi przez cookie df-dark-mode ważne 1 rok, zalogowani klienci przez pole własne klienta df_dark_mode_preference tworzone automatycznie przy instalacji. Strona profilu klienta zawiera kartę wyboru pozwalającą zmienić preferencję bezpośrednio z poziomu konta. Przy logowaniu cookie jest synchronizowane z wartością pola własnego, więc klient, który ustawił preferencję na telefonie, odnajdzie to samo ustawienie na komputerze.
Zgodność z Bootstrap data-bs-theme: zero CSS do napisania
Bootstrap 5.3+ wprowadził konwencję data-bs-theme="dark" jako standard trybu ciemnego. Jeśli Twój motyw Shopware korzysta już z reguł CSS celowanych selektorem [data-bs-theme="dark"], co dotyczy większości motywów premium z rocznika 2025 i nowszych, DfDarkMode jest zgodny od ręki: instalujesz, aktywujesz i działa. Jeśli Twój motyw nie ma jeszcze stylów ciemnych, możesz użyć natywnych zmiennych Bootstrap (--bs-body-bg, --bs-body-color i podobne, które automatycznie przyjmują inne wartości w trybie ciemnym) albo dodawać własne reguły we własnym tempie. DfDarkMode nie dotyka Twojego CSS: ustawia jedynie atrybut na elemencie głównym strony.
Czysta i standardowa architektura Shopware
Wtyczka ściśle przestrzega konwencji Shopware 6.7: autoload PSR-4 w przestrzeni nazw Df/DarkMode, klasa Plugin z cyklem życia install, update i uninstall, pole własne klienta tworzone przez standardowe repozytorium DAL, trasa AJAX zadeklarowana atrybutami PHP 8 komponentu Symfony Routing, usługi wstrzykiwane przez services.xml, subskrybenci podłączeni do kernel.event_subscriber. Odinstalowanie respektuje flagę keepUserData kontekstu Shopware: jeśli administrator zaznaczy zachowanie danych użytkowników, pola własne i preferencje klientów pozostają, w przeciwnym razie wszystko jest usuwane czysto. Żadna własna migracja schematu nie jest potrzebna (wyłącznie pola własne). Kod źródłowy niezaszyfrowany, na licencji MIT, możliwy do audytu.
Personalizacja i zdarzenie JS dla integracji
Domyślnie przełącznik jest wstawiany w bloku base_header_actions_wishlist base layoutu. Aby go przenieść, wystarczy override base.html.twig i umieszczenie include komponentu dark-mode-toggle w innym bloku (search, account, custom i podobne), a pełny przykład znajduje się w README. Po stronie JS wtyczka emituje zdarzenie df-dark-mode-changed na dokumencie przy każdej zmianie, z event.detail.preference (auto / light / dark) oraz event.detail.resolvedTheme (wyliczony light lub dark). To wygodne do synchronizacji innego komponentu (wykres Recharts, zewnętrzna ramka iframe, osadzony Calendly) z bieżącym motywem.
Na razie nie ma opinii o produkcie.