css-switch dark/light verändert nicht die Navi

[clausw]

Hallo zusammen,

meine Website/Homepage sollte eigentlich per Button von dunkel auf hell umschaltbar sein, aber das Problem ist, dass die Navigation - Screenshot oben rechts - auch im hellen Modus eine helle Schrift und einen hellen Hintergrund zeigt und deswegen praktisch unleserlich ist.

Weiteruzeigt sich die ganze Seite auf meinem Linux-Rechner nur in schwarz und dort der Umschalt auf den hellen Modus gar nicht geht. Es läuft also 'irgendetwas' schief.

Ich habe eigentlich recht solide HTML- und CSS-Kenntnisse, aber weiß nicht, wo ich anfangen soll, um den Bug zu entdecken, der auch per css-variable ausgelöst wird. Die W3C-Validatoren können aber beim CSS keine Variablen debuggen und sagen, dass das restliche CSS keine Fehler enthält. Beim W3C-Debug des HTML wird nur moniert, dass das "Hambuger-div" innerhalb eines <label>-divs sei, aber die eigenliche <nav> kommt erst danach...

Deswegen bin ich also ratlos. Welchen Weg des debugging bzw. der Abhilfe könnte/sollte ich wählen? Vielen Dank und bis dann, Claus

[Auge]

Hallo

Hallo zusammen,

meine Website/Homepage sollte eigentlich per Button von dunkel auf hell umschaltbar sein, aber das Problem ist, dass die Navigation - Screenshot oben rechts - auch im hellen Modus eine helle Schrift und einen hellen Hintergrund zeigt und deswegen praktisch unleserlich ist.

Wenn du deine Seite (speziell die Seite „Bildung Lehre & Lernen“) mit den browsereigenen Entwicklerwerkzeugen anschaust und zwischen den Themes umschaltest, siehst du in einem der Blöcke für body, dass die Angabe für color, die aus der Variablen --color-text stammt, im dunklen Theme den Wert #f8f8fc und im hellen Theme den überaus unpassenden Wert #dcdcdc hat. Laut Entwicklerwerkzeugen gibt es im hellen Theme in vars_type.scss in :root (ab Zeile 89) für --color-text die Farbfestlegung #020619, die aber in css.php im Block für :root (ab Zeile 10 in der Ausgabe) mit #dcdcdc überschrieben wird.

That's it.

Allgemein sind mehrere Variablenblöcke und auch Blöcke für den Selektor body (und vermutlich auch andere) in den verschiedenen Quellen für dein CSS zu finden, was auf mich sehr unübersichtlich wirkt. Das solltest du alsbald konsolidieren, schon allein der Wartbarkeit wegen.

Weiteruzeigt sich die ganze Seite auf meinem Linux-Rechner nur in schwarz und dort der Umschalt auf den hellen Modus gar nicht geht. Es läuft also 'irgendetwas' schief.

Dazu kann ich nichts sagen.

Tschö, Auge

[clausw]

vielen Dank für dise schnelle und hochwertige Antwort!

[Rolf B]

Hallo Claus,

du solltest im .begruessung div noch was an der text-decoration-color tun. Der Kontrast des blauen Unterstrichs auf dem türkisen hintergrund (oder dunkelcyan) ist zu gering.

Für text-decoration-color brauchst Du auch kein -webkit- Präfixe mehr, Safari kann das seit 2019. Hier stimmt auch irgendwas mit deinem Tooling nicht - im übermittelten basis.css steht -webkit-text-decoration-color zweimal drin, laut Sourcecode gibt es das nur einmal, d.h. irgendwo in deiner Toolchain wird ein zweites hineingeneriert.

Impressum
lokaler Landschaftshacker

Du hast einen Garten am Neckar und baust Kartoffeln an? 😉

Rolf

[Gunnar Bittersmann]

@@Rolf B

Der Kontrast des blauen Unterstrichs auf dem türkisen hintergrund (oder dunkelcyan) ist zu gering.

Selbiges trifft auch auf das Blau des Zitats am Ende der Homepage und auf das Rot der Überschriften/Links auf den Folgeseiten zu: zu geringer Kontrast auf dem grauen Hintergrund im Darkmode. (Checker)

Kwakoni Yiquan

[Gunnar Bittersmann]

@@clausw

meine Website/Homepage sollte eigentlich per Button von dunkel auf hell umschaltbar sein

Warum per Button? Ihre Präferenz für dunkel bzw. hell geben Nutzer in ihren Systemeinstellungen an; Firefox-Nutzer ggfs. in ihren Browsereinstellungen. Wozu noch ein Button?

Der Button würde nur Sinn machen, wenn Nutzer es bevorzugen sollten, deine Seiten abweichend von allen anderen Websites in dunkel bzw. hell zu sehen. Diesen Fall sehe ich bei deinen Seiten aber nicht. Der Button kann weg.

Die zusätzliche Umschaltmöglichkeit ist nicht nur überflüssig; sie verwirrt auch. Ich habe meinen Firefox auf „auto“ gesetzt und mein OS auf „dunkel“, und bekam deine Seiten dennoch in hell zu sehen. WTF‽

Irgendwann schwante es mir: Du speichert beim Umschalten mit deinem Button die vermeintliche Präferenz in einem Cookie? Ich bin kein Anwalt, aber müsstest du das nicht in einer Datenschutzerklärung erwähnen?

(Ich will nicht so weit gehen und fragen, ob du nicht um Erlaubnis bitten müsstest, das in einem Cookie zu speichern; möglicherweise fällt das unter für die Nutzung der Website essentiell. Möglicherweise aber auch nicht – siehe oben. Und ich bin kein Anwalt.)

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Die zusätzliche Umschaltmöglichkeit ist nicht nur überflüssig; sie verwirrt auch. Ich habe meinen Firefox auf „auto“ gesetzt und mein OS auf „dunkel“, und bekam deine Seiten dennoch in hell zu sehen. WTF‽

Irgendwann schwante es mir: Du speichert beim Umschalten mit deinem Button die vermeintliche Präferenz in einem Cookie?

Und wie kriegt man den wieder weg? Außer in seinen Browsereinstellungen die Cookies deiner Website zu löschen?

Wenn du schon eine zusätzliche Umschaltung auf deinen Seiten anbietest (wovon ich wie gesagt nicht überzeugt bin, dass man das tun sollte), dann darf diese nicht nur die Zustände „hell“ und „dunkel“ haben, sondern muss auch den Zustand „auto“ („System“) anbieten (im UI!), womit man die Kontrolle wieder zurück an das OS bzw. den Browser geben kann (was also den Cookie löscht).

Kwakoni Yiquan