Darkmode bei Samsung für Website rauscodieren?
Hallo,
ich habe das Problem das meine Website bzw. Shop bei Samsung Handys im Dark Mode komplett anders aussehen bzw. eine andere Farbgestaltung haben.
Soweit ich herrausfinden konnte gibt es eine Möglichkeit via CSS Code dies zu unterbinden.
Dazu ein Statement eines Samsung Entwicklers:
https://developer.samsung.com/internet/blog/en-us/2020/12/15/dark-mode-in-samsung-internet
Kann mir jemand helfen, was genau ich wo genau einfügen oder anpassen muss damit meine Website durch diesen Dark Mode nicht geändert wird?
Dankeschön!
1 Antwort
Versuche bitte, innerhalb von <head> folgenden meta-Tag einzufügen:
<meta name="color-scheme" content="light only">
Dies sollte bewirken, dass der Dark-Mode unterdrückt wird und stattdessen Light-Mode verwendet werden soll.
Als Alternative könnte man im CSS Folgendes einfügen:
:root {
color-scheme: light only;
}
Dies bewirkt dasselbe wie das obige <meta>.
Bestimme Styles können auch bei Light- oder Dark-Mode geladen werden:
@media (prefers-color-scheme: light) {
/* Styles für Light-Mode */
}
@media (prefers-color-scheme: dark) {
/* Styles für Dark-Mode */
}
Allerdings soll diese Methode angeblich leider nicht mehr funktionieren:
As it turns out, Samsung Internet […] silently applies a filter that transforms colors on websites in a non-trivial way when the user enables dark mode on their device. […] The gist of it is that, as of Samsung Internet version 13.0.1.64, this filter is undetectable with javascript or CSS.
Als einzige, jedoch möglicherweise wenig zufriendenstellende Lösung wird angeben:
<script>
if(navigator.userAgent.match(/samsung/i)) {
alert("Du verwendest einen Brwoser (Samsung Internet), das möglicherweise für die korrekte Darstellung dieser Seite nicht korrekt konfiguriert ist. Wir empfehlend daher, einen Standard-Browser zu verwenden, z. B. Firefox, Microsoft Edge oder Google Chrome.");
}
</script>
Quelle: https://stackoverflow.com/questions/60118216/how-do-i-stop-dark-mode-from-destroying-my-css