Dunkelmodus mit minimalem CSS: Eine überraschend einfache Implementierung
2025-04-04
Die Feep!-Website verfügt jetzt über einen eleganten Dunkelmodus, der mit überraschend wenig CSS umgesetzt wurde. Der Autor beschreibt drei Ansätze: die Nutzung des integrierten Dunkelmodus des Browsers über ein ``-Tag; die Verwendung der `color-scheme`-Eigenschaft zur CSS-Steuerung; und die Verwendung von `prefers-color-scheme`-Media-Queries für separate helle und dunkle Modi. Tipps beinhalten die Verwendung der Funktionen `light-dark()` und `color-mix()` zur Farboptimierung und die clevere Handhabung von Bildern und Codeblöcken mit CSS-Filtern. Das Ergebnis? Ein eleganter Wechsel in den Dunkelmodus mit nur wenigen zusätzlichen CSS-Zeilen, was den Entwicklungsprozess erheblich vereinfacht.
Entwicklung
Browser-eigen