abbrechen
Suchergebnisse werden angezeigt für 
Stattdessen suchen nach 
Meintest du: 

[FRAGE] Dark Mode Switcher erstellen

tjb-shop
Neues Mitglied
1 0 0

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ß;

0 Likes
Kai
Shopify Staff
Shopify Staff
608 59 105

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:

 

20-06-9awa5-0pe3z

 

Oder Sie bitten die Shopify Experten um Hilfe.

 

Bitte sagen Sie Bescheid, ob ich Ihnen in irgendeiner Weise weiter behilflich sein kann.

 

MfG, Kai

Kai | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

0 Likes
Guido_Michele
Shopify Partner
62 19 51

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

0 Likes