Löschantrag

[Rolf B]

Anfrage an die anderen Moderatoren:

Da der gezeigte Code so gut wie gar nichts mit dem Problem zu tun hat (außer ein JS-Objekt in einem <script src...> Element zu zeigen, wo eine colorTheme Eigenschaft als Feigenblatt drinsteckt), frage ich mich, ob das eine ernst gemeinte Frage ist oder Link-Spam für tradingview.com?

Hallo Gerhard,

wenn das kein Link-Spam ist und Du dieses Snippet einfach nur von tradingview.com geklaut abgeguckt hast, dann hast Du zwar die Einstellung für hell/dunkel gefunden, den Mechanismus zur Realisierung aber komplett übersehen.

Matthias Vorschlag mit der prefers-color-scheme Medienabfrage scheint mir der sinnvollste und vor allem für Newbies beste. Denn dann brauchst Du gar nichts eigenes auf deiner Webseite. Du musst lediglich dein CSS so gestalten, dass Du alle für's Farbschema relevanten Farben über custom properties setzt, damit die Umschaltung klappt. Und Du musst deine Seite mit einem leeren Satz custom-properties testen, denn nicht alle Browser können die und du möchtest ja auch für Kunden mit Internet Explorer zumindest erreichen, dass die Seite grundbedienbar bleibt.

Zu beachten ist allerdings, dass der bei css-tricks gezeigte Weg, die OS-Einstellung überschreiben zu können, unvollständig ist. Man kann damit ein light-Thema abdunkeln, aber kein dark-Thema aufhellen. Und ich finde es lästig, beide Farbschemata doppelt notieren zu müssen (einmal in der Klassen-Abfrage und einmal in der @media Query - sowas ist nur mit einem CSS Präprozessor sinnvoll machbar).

Eine Lösung ohne JavaScript wäre wohl auch möglich, dann brauchst Du drei Buttons / Links für die Themen, von denen jeweils zwei aktiv sind. Und zwar "Hell", "Dunkel" und "Default". Das Setzen der Thema-Klasse am body machst Du dann mit serverseitigem Code. Sofern Du sowas kannst.

Rolf