Magento 2 Dark Mode für Hyvä mit Schalter
SKU: DARKMODESTOREFRONT1
- Dunkelmodus nach Systemeinstellung oder per Schalter im Header
- Modus wird vor dem Rendern gesetzt, kein Aufblitzen
- dunkle Farbwerte als Variablen, zweites Logo für den Dunkelmodus
- je Store-View steuerbar, Full Page Cache bleibt unberührt
Einmaliger Kauf · inkl. 12 Monate Updates · zzgl. MwSt.
Magento 2 Dark Mode: Dunkelmodus für Ihren Hyvä Shop, per System oder Schalter
Mit dem Magento 2 Dark Mode von Mironsoft bietet Ihr Shop einen Dunkelmodus, der der Systemeinstellung des Besuchers folgt oder über einen Schalter im Header umgestellt wird. Das Modul nutzt die Dark-Variante von Tailwind und die Farb-Variablen Ihres Hyvä Themes, statt Farben einzeln zu überschreiben. Der Magento 2 Dark Mode merkt sich die Wahl im Browser, vermeidet das Aufblitzen der hellen Seite beim Laden und läuft mit Alpine.js ohne Zusatz-Bibliothek.
Systemeinstellung folgen
Der Shop übernimmt automatisch den Hell- oder Dunkelmodus des Geräts.
Schalter im Header
Besucher wechseln zwischen Hell, Dunkel und System, die Wahl bleibt gespeichert.
Kein Aufblitzen
Der Modus wird vor dem ersten Rendern gesetzt, die helle Seite blitzt nicht auf.
Farben aus dem Theme
Dunkle Werte für Hintergrund, Text, Rahmen und Karten kommen aus Design-Variablen.
Logo und Bilder
Zweites Logo für den Dunkelmodus und Abdunkeln heller Bilder, wo gewünscht.
Kontrast prüfen
Eine Prüfliste im Admin warnt bei zu geringem Kontrast der gewählten Farben.
Warum ein Magento 2 Dark Mode für viele Besucher selbstverständlich ist
Ein großer Teil der Nutzer stellt Smartphone und Computer auf dunkel, besonders abends. Öffnet ein Shop dann eine weiße Seite, blendet das. Händler suchen deshalb nach einem Magento 2 Dark Mode, einem Dunkelmodus im Hyvä Theme oder einer Lösung, die Systemeinstellung des Besuchers zu respektieren.
Der Magento 2 Dark Mode setzt genau das um, ohne dass Sie das Theme neu entwerfen müssen. Er ordnet die vorhandenen Farben dunklen Gegenstücken zu, behält Ihre Markenfarbe als Akzent und lässt Besucher selbst entscheiden. Wer nichts wählt, bekommt den Modus seines Geräts.
Magento 2 Dark Mode nach Systemeinstellung oder per Schalter
Als Standard folgt der Shop der Einstellung des Geräts über die Medienabfrage für das Farbschema. Zusätzlich blendet das Modul einen Schalter im Header ein, mit dem Besucher zwischen Hell, Dunkel und System wechseln. Die Wahl wird im Browser gespeichert und gilt bei jedem Aufruf. Im Admin legen Sie den Standardmodus fest und ob der Schalter sichtbar ist.
- Standard: System, Hell oder Dunkel
- Schalter im Header, auch als Eintrag im mobilen Menü
- Wahl bleibt im Browser des Besuchers gespeichert
Farben und Tailwind-Variablen im Magento 2 Dark Mode
Statt jede Klasse zu überschreiben, arbeitet das Modul mit Farb-Variablen. Sie hinterlegen im Admin die dunklen Werte für Seitenhintergrund, Karten, Text, Rahmen und Formularfelder; das Modul schreibt sie als CSS-Variablen unter der Dark-Klasse aus. Ihre Markenfarbe bleibt Akzent für Buttons und Links. Preise, Rabatt-Badges und Fehlermeldungen behalten ihre Signalfarben, damit sie auch im Dunkeln eindeutig bleiben.
- Dunkle Werte als CSS-Variablen, keine Klassen-Überschreibung
- Akzent- und Signalfarben getrennt einstellbar
- Vorschau im Admin vor dem Veröffentlichen
Logo, Produktbilder und Grafiken im Dunkelmodus
Ein dunkles Logo auf dunklem Grund ist unsichtbar. Deshalb lässt sich ein zweites Logo für den Dunkelmodus hinterlegen, das per Bildquelle je Farbschema geladen wird. Produktfotos mit weißem Hintergrund können Sie dezent abdunkeln oder auf einer hellen Fläche belassen, damit sie nicht wie Fremdkörper wirken. Symbole in SVG übernehmen die Textfarbe automatisch.
- Zweites Logo für den Dunkelmodus
- Helle Produktbilder auf heller Fläche oder abgedunkelt
- SVG-Symbole folgen der Textfarbe
Sauberes Laden ohne Aufblitzen und ohne jQuery
Ein kleines Inline-Skript im Head setzt die Dark-Klasse, bevor die Seite gezeichnet wird, und ist mit der Content Security Policy von Hyvä registriert. So gibt es kein kurzes Aufblitzen der hellen Seite. Der Schalter ist eine Alpine.js-Komponente ohne jQuery und ohne Knockout. Bei aktivem Full Page Cache bleibt die Seite identisch, da die Umschaltung ausschließlich im Browser passiert.
- Modus wird vor dem ersten Rendern gesetzt
- CSP-konform registriert, kein Zusatz-JavaScript
- Full Page Cache bleibt unberührt
Wo der Magento 2 Dark Mode im Shop-Alltag hilft
Typische Situationen, in denen ein Dunkelmodus Besucher hält.
Einkauf am Abend
Kunden stöbern auf dem Sofa mit dunklem Smartphone und erhalten keine grelle weiße Seite.
Technik- und Gaming-Shops
Zielgruppen, die ohnehin dunkle Oberflächen nutzen, erwarten einen Dunkelmodus.
Barrierearme Gestaltung
Menschen mit Lichtempfindlichkeit wählen den Modus selbst, ohne Browser-Erweiterung.
Marken mit dunklem Auftritt
Hochwertige Produkte wirken auf dunklem Grund oft edler, das Logo bleibt in beiden Modi lesbar.
Magento 2 Dark Mode im Vergleich: ohne und mit Modul
Der Unterschied zu Browser-Erweiterungen und Eigenbau.
| Thema | Ohne Modul | Mit Mironsoft Storefront Dark Mode |
|---|---|---|
| Systemeinstellung | Ignoriert, Seite bleibt hell | Wird automatisch übernommen |
| Besucherwahl | Nicht möglich | Schalter mit Hell, Dunkel, System |
| Laden | Erzwungene Filter, Aufblitzen | Modus vor dem ersten Rendern |
| Logo | Bleibt gleich, teils unlesbar | Eigenes Logo für Dunkel |
| Pflege | Klassen einzeln überschreiben | Farb-Variablen im Admin |
So richten wir Ihren Magento 2 Dark Mode ein
Der Ablauf nach Ihrer Beauftragung.
Abstimmung
Sie nennen Markenfarben, Standardmodus und gewünschte Position des Schalters.
Farben
Wir stellen die dunklen Werte für Ihr Theme zusammen und prüfen den Kontrast.
Installation
Wir installieren das Modul und aktivieren den Magento 2 Dark Mode für Ihre Store-Views.
Test
Wir prüfen Startseite, Kategorie, Produkt, Warenkorb, Checkout und Konto in beiden Modi.
Übergabe
Ihr Team erhält eine Einweisung in Farben, Logo und Schalter.
Abgrenzung zu Theme-Entwicklung und Barrierefreiheits-Werkzeugen
Der Magento 2 Dark Mode ist keine neue Gestaltung, sondern eine zweite Farbvariante Ihres bestehenden Hyvä Themes. Komplexe Individualdesigns mit eigenen Grafiken bleiben Aufgabe der Theme-Entwicklung, das Modul liefert die Umschaltung und die Farbzuordnung.
Zu Werkzeugen für Barrierefreiheit gehört der Dunkelmodus als Komfortfunktion; er ersetzt keine Prüfung nach den einschlägigen Richtlinien. Alle Module lassen sich kombinieren.
Kein Download, sondern persönliche Einrichtung
Der Storefront Dark Mode ist hier nicht als fertige Download-Datei zum Selbst-Installieren gelistet. Der Kauf ist eine Beauftragung: Wir melden uns nach dem Kauf, installieren das Modul in Ihrem Shop und stimmen Farben, Logo und Schalter gemeinsam mit Ihnen ab.
Häufige Fragen
Alles Wichtige zu Umschaltung, Farben, Laden und zum Ablauf des Kaufs.
Wie kann ich in Magento 2 einen Dark Mode einbauen?
Wie kann ich in Magento 2 Hyvä einen Dunkelmodus nach Systemeinstellung anbieten?
Gibt es ein Aufblitzen der hellen Seite?
Kann der Besucher selbst umschalten?
Funktioniert der Magento 2 Dark Mode mit dem Full Page Cache?
Wie gehe ich mit dem Logo um?
Sind Preise und Fehlermeldungen im Dunkeln noch gut lesbar?
Funktioniert der Magento 2 Dark Mode mit Hyvä?
Kann ich den Dunkelmodus pro Store-View abschalten?
Kann ich das Modul selbst herunterladen und installieren?
Zuletzt angesehene Artikel
Magento 2 Dark Mode – Mironsoft Storefront Dark Mode