CSS - Bevorzugtes Farbschema darstellen

In Windows 10 kann der Benutzer ein helles oder dunkles Farbschema für den PC einstellen.
Das gleiche ist auch mit dem neuen Microsoft Edge-Browser möglich, dort nennt sich die Option "Standarddesign".

Mit der CSS @media-Regel lässt sich das auch für Webseiten einstellen, hier ein einfaches Beispiel so wie ich es auf meiner Website einsetze.

@media (prefers-color-scheme: dark) {
 html {
  background-color: #333333;
 }

 body, article {
  background-color: #000000;
  color: #FFFFFF;
 }
}

@media (prefers-color-scheme: light) {
 html {
  background-color: #F5F5F5;
 }

 body, article {
  background-color: #FFFFFF;
  color: #000000;
 }
}

Erkennen des dunklen Modus mit JavaScript

<script>
let matched = window.matchMedia('(prefers-color-scheme: dark)').matches;

if (matched) {
 console.log('Derzeit im dunklen Modus');
}
else {
 console.log('Derzeit nicht im dunklen Modus');
}
</script>

Beispiel:

window.matchMedia() - https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

Bausteine  [Alle Anzeigen]

Eine zufällige Auswahl von Bausteinen (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Datum als Kalenderblatt darstellen

PHP - Alte Bilder (einer Webcam) löschen

JavaScript - Checkbox auf "unbestimmt" setzen

MySQL - Abrufen eines zweispaltigen Ergebnisses in ein Array