Dark Mode erstllen

[Tendler]

Liebe Shopify-Community, 

ich hoffe, ihr alle habt einen großartigen Tag! Ich wende mich heute an euch, um eure Ratschläge und Einblicke in die Entwicklung eines Dark Mode für meinen Shopify-Shop zu erhalten.

Da ich die Benutzererfahrung in meinem Shop verbessern möchte, plane ich, einen Dark Mode zu coden, um meinen Kunden eine angenehmere und vielseitigere Erfahrung zu bieten. Da ich jedoch relativ neu in der Welt der Shopify-Entwicklung bin, würde ich gerne von euren Erfahrungen lernen und eure Ratschläge hören.

Wenn ihr Erfahrung oder Wissen über das Coden eines Dark Mode für einen Shopify-Shop habt, würde ich mich sehr über eure Anleitung freuen. Jeder Tipp, jede Empfehlung oder Ressourcen, die ihr teilen könnt, sind äußerst wertvoll für mich.

Vielen Dank im Voraus für eure Unterstützung und eure Zeit!

Herzliche Grüße, Tendler 

[Gabe]

Hey @Tendler 

Die Entwicklung eines Dark Mode für deinen Shopify-Shop ist eine großartige Idee, um die Benutzererfahrung deiner Kunden im Shop zu verbessern. Es gibt verschiedene Wege, wie du Dark Mode implementieren kannst und die gängigsten habe ich jetzt auf Google gefunden:

1. Manuelle Implementierung durch CSS-Anpassungen: Eine Möglichkeit ist die manuelle Implementierung durch Änderungen am CSS deines Shops. Hierbei kannst du die Media Query prefers-color-scheme verwenden, um unterschiedliche Styles für den Dark und Light Mode zu definieren. Dies erfordert jedoch ein gewisses Verständnis von CSS und möglicherweise von der Struktur deines Shopify-Themes​​.

2. Browser-Erweiterungen: Es gibt Browser-Erweiterungen wie Night Eye oder Turn Off the Lights, die eine Dark-Mode-Funktion für Shopify-Shops bieten. Diese Erweiterungen erkennen die Farben deiner Website und passen sie an, um ein dunkles Design zu schaffen. Diese Methode ist einfacher als manuelle Anpassungen und kann eine schnelle Lösung bieten, um einen Dark Mode zu implementieren​​​​.

3. Shopify-Apps für Dark Mode: Es gibt auch spezielle Apps im Shopify App Store, die es ermöglichen, einen Dark Mode für deinen Shop zu implementieren. Beispiele hierfür sind "Twilight", "Glasses: One-Click Dark Mode" und "Dark Mode Pro". Diese Apps bieten oft benutzerfreundliche Optionen zur Aktivierung des Dark Mode und weitere Anpassungsmöglichkeiten. Sie können jedoch je nach App unterschiedliche Vor- und Nachteile haben, wie z.B. die Qualität der Umsetzung oder die Auswirkung auf die Darstellung von Bildern und Elementen deines Shops​​​​.

Jede Methode hat ihre Vor- und Nachteile. Wenn du dich für eine manuelle Implementierung entscheidest, dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Frontend Apps die man nicht mehr braucht rate ich während der Probezeit zu entfernen, wenn man sie nicht behalten will. Auf diese Weise werden mögliche Gebühren für Apps vermieden.

Einige Frontend Apps können auch das Theme Code ändern und die Page Loading Speeds verlangsamen und man sollte überprüfen, ob die App zusätzliche Schritte zur Deinstallation erfordert, bevor man die App aus dem Shop entfernt. Solche Apps (oder Code Änderungen) können ein Theme auch aus den Theme Updates ausschließen wenn das Theme Code geändert wird. Siehe dazu bitte die App Dokumentation.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Tendler]

Okay Dankeschön für Ihre Antwort. 

Für mich passt am besten die Manuelle Implementierung durch CSS-Anpassungen. Kennen sie vielleicht ein dieser Codes den man den einsetzen kann. Also schon einer der Fertig ist 

[Gabe · Accepted solution]

Hey @Tendler 

Gerne kann ich dir Code Empfehlungen geben aber alles weitere wirst du mit einen Experten machen müssen der einen 👀 in dein Theme Code werfen kann. Siehe bitte meine Links nochmal oben und auch was solche Codeänderungen zum Theme machen kann.

Für die Implementierung eines Dark Mode in deinen Shopify-Shop mittels CSS bietet sich die Verwendung der Media Query prefers-color-scheme an. Dies ermöglicht es dir, unterschiedliche Stylesheets für den Dark und Light Mode zu definieren. Hier ist ein einfacher CSS-Code, den du verwenden kannst:

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

Bevor du diese Änderungen vornimmst, solltest du dein aktuelles Theme sichern und herunterladen. Anschließend öffnest du das Stylesheet deines Themes (normalerweise base.css) in einem Texteditor und fügst den entsprechenden Code ein. Schau dir bitte die vollständige Anleitung auf Launchtip hier an​​ um die weitere Schritte zu bestimmen.

Hoffe das hilft dir weiter! 😉

[Tendler]

ja vielen Dank nochmal