Dark Mode Tutorial und Design-Entwurf - bitte Testen

[Matthias Scharwies]

Hallo Gerhard, hallo ihr anderen,

ich habe mal versucht, alles in einem Tutorial zusammenzufassen:

Benutzer:MScharwies/Dark_Mode

Da arbeite ich noch weiter. Jetzt habe ich erst einmal versucht 3 gute Themes zu realisieren.

1. Für IE9-11 und ältere Versionen der Evergreen-Browser (laut caniuse fast mehr als der IE) Farbangaben mit festen Hex-Werten
2. ein Helligkeits-Modus, bei dem die HEX-Werte als custom properties notiert sind.
3. eine class .dark, die diese custom properties überschreibt.

Ein erster Design-Entwurf: Design01 zum Toggeln, aber auch Auslesen mit prefers-color-scheme

Wie würdet ihr folgende Knackpunkte lösen?

1. Heller Modus: Textfarbe footer

2. #news-Box, welche Hintergrundfarbe im dunklen Modus oder...

3. Dark mode: Schriftfarbe #news für

   • h3
   • li
   • span

4. Hintergrund der SVG-Grafiken: so lassen oder als inline-SVG auch mit custom-properties füllen? (Dann wird evtl. das Markup nicht mehr anfängergerecht.)

5. Soll ich für die Navi nur feste HEX-Werte nehmen, oder zusätzlich auch custom properties notieren?

Herzliche Grüße

Matthias Scharwies