Dark-Light-Modes. CSS-Media-Query prefers-color-scheme
In Betriebssystemen (OS), z.B. Windows, kann man ein Farbschema einstellen; "dark" (dunkel) oder "light" (hell), neben anderen, die hier aber nicht gemeint sind. Man spricht auch von "Dark-Mode" und "Light-Mode".
Es gibt ein CSS-MediaQuery, z.B. @media (prefers-color-scheme: dark) {...}, eine Weiche, mit der der ein guter Browser ermitteln kann, welches Schema der Besucher in seinem OS eingestellt hat.
Der Web-Browser lädt dann das CSS, das mit dark oder light ausgezeichnet ist (wenn ers kann).
Kurz vorab
Ein Vorteil ist sicherlich für "Bastler", dass man nicht mehrere CSS-Dateien erstellen muss, sondern alles in einer unterbringen kann und bunt verteilt. Andere werden argumentieren, dass das vielleicht ein Nachteil ist, weil ja so immer mehr CSS geladen wird als nötig. Die verwenden deshalb JavaScript-Lösungen zum Nachladen für jeweils benötigtes CSS; auch um zu detektieren, ob der Browser das Media-Query überhaupt unterstützt.
Da es ausreichend Hilfsmittel wie beispielsweise das Browser-Addon "Dark Reader" gibt und das Erstellen unterschiedlicher, so genannter "Color-Schemes" äußerst komplex und sehr zeitaufwendig sein kann, weil man natürlich Kontrastwerte und andere Aspekte der Barrierefreiheit auch hier zu beachten hat, spare ich mir diesen Aufwand für meine Seite. Ich verabscheue schlecht programmierte und falsch verstandene Farbschemen auf Webseiten, die diktatorisch geladen werden, weil ich im Betriebssystem, nicht Browser, was eingestellt habe.
Solcherlei Farbschemen sollen dem Besucher der Internetseite einen Mehrwert bieten, z.B. die Text-Lesbarkeit je nach User-Gusto verbessern, nicht irgendwelche ästhetischen Empfindungen des Programmierers befriedigen.
Ein paar Links, nicht mehr
Beachte, dass die Angaben bezüglich unterstützen Browsern abweichen können. Ich verlasse mich dabei am ehesten auf die Webseite caniuse.com.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
https://caniuse.com/prefers-color-scheme
https://getbootstrap.com/docs/5.1/customize/sass/#color-schemes