Guten Tag,
ich bin auf Google nach paar vorgefertigte Codes für css/sass gestoßen und krieg es nicht gebacken, dass der Button mit erscheint. Die Farbe ändert sich zwar, aber es erscheint kein Button.
Code:
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
Ich bedanke mich im Voraus für Eure Hilfe! 
Gruß;
Hi tjb-shop,
Kai hier von Shopify.
Wie man einen dark mode Knopf für Shopify Themes anfertigt, ist eine sehr gute Frage. Ich selber bevorzuge auch eher dunkle Webseiten, konnte aber weder Apps in unserem Appshop noch genaue Anleitungen in unseren englischsprachigen Blogs oder Hilfeartikeln dazu finden.
Da eine solche Anpassung unseren Support für Themes übersteigt, falls Sie eines unserer kostenlosen Themes verwenden, hätten Sie die Möglichkeit entweder unser kostenloses Theme Narrative in der Cold Variante zu verwenden, da dieses quasi schon in dark mode ist:
Oder Sie bitten die Shopify Experten um Hilfe.
Bitte sagen Sie Bescheid, ob ich Ihnen in irgendeiner Weise weiter behilflich sein kann.
MfG, Kai
Der Code den Du hier postest ist pures CSS.
Dieser fragt nach der Vorliebe des Users und ändert, sofern Information vorhanden, die body HIntergrundfarbe und die body Text Farbe. Nicht alle Browser unterstützen dies schon.
Um einen Button zu erstellen braucht es einiges mehr, zumindesens Html, optimal mit zusätzlich liquid und javascript.
Um Dark Mode in einem Shop vernünftig zu erzeugen reicht es auch nicht aus , nur diese beiden Werte im CSS zu verändern. Es kann auch dazu führen, dass Texte nicht mehr zu lesen sind,
oder andere Elemente nicht “erscheinen”, da zB schwarz auf schwarz.
Für ein Theme, welches nicht im CSS verändert wurde, muss mindestens die komplette Farbpalette auf einen Dark Mode übersetzt werden, die im Editor bei Colors angezeigt wird.
Um das ganze dann über einen Button an oder ausschalten zu können, braucht es javascript
