CSS - Bevorzugtes Farbschema darstellen (Hell.- / Dunkelmodus für Webseiten)

In Windows 10 kann der Benutzer ein helles oder dunkles Farbschema für den PC einstellen.

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.

<style>
@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;
 }
}
</style>

Microsoft Edge - Standarddesign anpassen

Unabhängig vom App Modus in Windows 10, das Standarddesign im Browser: Microsoft Edge anpassen.

Auch andere Browser die auf Chromium basieren, wie zum Beispiel: Opera oder Vivaldi haben eine ähnliche Funktion.

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

Tipp

Designauswahl - Das Design über einem Link verändern

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<map> Verweis-sensitive Grafik

CSS - Tastenkombinationen darstellen

PHP - Ermitteln des aktuellen Datums und der Uhrzeit

JavaScript - Nachfragen bevor die Seite verlassen wird

MySQL - Suchen und Ersetzen in einer Tabellenspalte