Hallo Welt!, dies ist mein erster Blog Eintrag, hier möchte ich euch zeigen mit was ich mich beschäftige.
Ich habe die letzten Tage damit verbracht einen einfachen Weg zu finden um nur mit CSS Dark und Light Themes zu realisieren.
Mit Hilfe von prefers-color-scheme können wir ein eigenes Design für Dark oder light Mode erstellen.
Das wird benutzt mit einem media query, um festzustellen was der Benutzer bevorzugt.
Syntax
light
Benutzeroberfläche mit einem hellen Thema.
dark
Benutzeroberfläche mit einem dunklen Thema.
Testen
Aktuelle Browser lesen grundsätzlich die Theme-Präferenz vom Betriebssystem. Zum glück gibt es eine Möglichkeit, dies auf einfachen weg zu testen.
Getestet mit Google Chrome Version 115.x (Juli 2023)
- Entwicklertools öffnen
- Befehlssteuerung öffnen
- Strg + Umschalt + P (Windows)
- Befehl + Umschalt + P (Mac)
3. Show Rendering eingeben
4.Emulate CSS Media
Wo funktionierts ?
Dank der Seite caniuse.com können wir CSS Befehle überprüfen, dort erhalten wir für prefers-color-scheme eine Globale Abdeckung von 94.93% (Stand Juli 2023).