Dark Mode - Cookie Consent - Farben

Hm, habe gerade keine Ahnung, wo der Post hin passt. Im Grunde geht es um eine Mischung aus Dark-Mode, Farben von Schriften und Buttons.

Gibt es irgend eine Möglichkeit, die Farben im Dark-Mode zu erzwingen? Oder zumindest eine Liste, was aus welcher Farbe wird?

Der Hintergrund ist der: Wir versuchen ja, den Cookie-Hinweis so zu machen, dass man da möglichst auf "erlauben" klickt. Oft ist die Farbe da ein schönes warmes gelb und die Box an sich schwarz. Nur.... Der Samsung Browser scheint von selbst auf den Dark-Mode umgestellt zu haben. Viele andere Apps und Tools folgen. Das Problem dabei ist nun, man kann den Cookie-Hinweis nun eigentlich nicht mehr erkennen. Schwarze Box auf schwarzem Hintergrund ist halt doof. Und der gut sichtbare gelbe Button wird dann dunkelbraun. Also auch fast nicht mehr erkennbar.

Wie umgeht man das Problem nun?

Ja ne, einfügen lässt sich da alles mögliche, ist aber in dem Fall nun nicht die Frage. Den Dark-Mode übernimmt ja der Browser, das hat mit dem eigentlichen Style nix mehr zu tun. Meine grüne Überschrift wird z.B. rosa Schwarze Schrift wird weiß.

Daher meine Frage, ob man das erzwingen kann oder es eben eine Liste gibt, welche Farbe zu was wird. Es scheint irgendwie zu "invertieren", wobei das in dem Fall auch nicht wirklich stimmt.

Ich weiß nur aus Tests:

Grüne Schrift wird zu rosa

warmes gelb zu dunkelbraun.

Schwarzer Hintergrund bleibt schwarz.

Grauer Hintergrund wird schwarz

Oder hier aus dem Forum:

Die Orangen-farbene Schrift links beim Benutzernamen bleibt so.

Die Schrift der Postst wird weiß

der Hintergrund schwarz

Die silber-grau-blaue Box links bei den Benutzern wird schwarz

Der dunkelblaue Footer wird fast schwarz.

Also ein paar Tage später. Ich muss sagen, das ganze Thema Dark-Mode ist verflixt kompliziert und eigentlich alles was man macht falsch, da jeder das irgendwie anders umsetzt.

Da gibt es die schöne neue Media-Query "prefers-color-scheme" mit den möglichen Werten "light", "dark" oder eben "no-preference". Hört sich gut an, ist aber vollkommen sinnlos. Keine Ahnung, was sich so manche Entwickler dabei denken.

Die Browser:

Samsung-Browser. Der macht sein Theme dunkel, wenn Android auf dark steht. Er macht aber auch die Webseiten selbst dunkel. Daher die ganze Frage oben überhaupt. Hier kann man mit der Media-Query wunderbar gegensteuern. Der Browser macht das also am besten.

Chrome-Mobile. Der zweitbeste, aber weit abgeschlagen. Stellt man dort den Nacht-Modus ein, dann sendet der automatisch als prefers-color-scheme den Hinweis "dark". Das stimmt aber nicht, denn er ändert in dem Fall erst mal nur sein eigenes Layout, Tabs, Menü etc, aber nicht die Webseite die bleibt weiß. Wenn man nun also hier auf den Hinweis dark reagiert und die Farben ändert, dann ist das völlig falsch. Allerdings hat Chrome-Mobile auch den Menüpunkt "Webseite abdunkeln". Dann passt das ganze wieder, denn dann ist er wie Samsung. Nur, man kann nicht erkennen, ob diese zusätzliche Option gesetzt ist. Mit oder ohne sendet er "dark".

Chromium Edge Desktop. Aus der Desktop-Serie der beste Browser, aber auch "schlecht". Zumindest kennt er in den Einstellungen nur zwei Optionen: Hell und dunkel. Default bei der Installation ist "hell", er sendet also "light". Das dürfte bei 95% aller Anwender passen. Stellt man ihn auf "dunkel" um, dann hat er das gleiche Problem. Er macht zwar sein Layout dunkel, aber nicht die Webseite, sendet dann aber auch "dark". Also auch hier, falsche Farben. Dennoch nutzt er immer seine eigenen Einstellungen und nicht die von Windows.

Firefox. Naja, mein Lieblingsbrowser, aber eigentlich unbrauchbar, wenn man nicht manuell eingreift. Der hat wie der Edge die Optionen hell und dunkel, aber per Default eingestellt ist "automatisch". Und hier werden dann nicht die Werte vom Browser benutzt, sondern die von Windows. Und wenn das auf dunkel steht, also nur Windows selbst, dann sendet Firefox immer "dark", auch wenn die Seite selbst weiß ist. Richtig macht er es nur, wenn man ihn manuell auf "hell" umstellt.

Chrome Desktop: Völlig unbrauchbar in der Sache. Im Grunde wie der Firefox, identisch, doch er hat noch nicht mal eine Option, von hell auf dunkel oder umgekehrt zu schalten. Er sendet immer die Windowseinstellungen. Wenn man umschalten will, manuell, dann muss man erst mal zusätzliche AddOns installieren!

Fazit: Bei keinem Browser, außer Samsung, kann man wirklich erkennen, ob das gesendete "dark" nun deswegen ist, weil die Webseite selbst dunkel dargestellt wird oder nur, weil das Browser-Layout, Tabs etc, dunkel sind. Somit ist die Query "prefers-color-scheme" völlig nutzlos!

Nein, ich bin genauso weit wie vorher. Es gibt keine wirkliche Möglichkeit zu erkennen, was nun genau Sache ist. Also ob der Browser die Seite automatisch abdunkelt oder ob er einfach nur sein eigenes UI abdunkelt.

Und das andere Problem eben, dass selbst wenn man zwei Browser dazu bringt, die Seite automatisch abzudunkeln und den richtigen Wert schickt, dann sind die Farben dennoch unterschiedlich. Aus weiß wird mal dunkelgrau, mal schwarz. Aus schwarz mal weiß, mal silber. Gelb mal zu dunkelgrün, dann mal zu braun, das man fast nicht mehr erkennen kann. Die ändern ihre Farben also nicht alle gleich von a nach b sondern machen das willkürlich.

Und dann kommt nach dazu, dass ein einzelner Browser das auch wieder unterschiedlich macht. Eine gelbe Box auf weißem Hintergrund bekommt eine andere Farbe als die gleiche gelbe Box auf schwarzem Hintergrund (z.B. Cookiehinweis)

Das Problem kommt eventuell noch dazu. Fraglich dann aber, wer dafür verantwortlich ist.....

Sage ja, der Samsung-Browser macht aus einem gelben Button auf schwarzem Hintergrund dunkelbraun, etwas wie #552d03. Kann man fast nicht mehr erkennen.

Selbiges mit Text, aber da ist es einen Ticken heller. Aber auch fast nicht mehr zu erkennen. Also normal schwarzer Hintergrund, gelber Link, sonst weiße Schrift. Schwarz bleibt so, weiß auch, aber der Link, der vorher extra auffällig gelb war, wird dann zu dunkelbraun. Und das sind z.B. Links zu Einstellungen, Cookies ablehnen oder Datenschutzerklärung.