CSS - Bevorzugtes Farbschema darstellen

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

Hell.- und Dunkelmodus für Webseiten

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. Benutzer die im Browser eine dunkle Darstellung gewählt haben, wird die Webseite auch dunkel dargestellt.

<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>

Browser

Unabhängig vom App Modus in Windows 10 / 11, das Standarddesign im Browser anpassen.

Microsoft Edge

Mozilla Firefox

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.

<rt> Ruby Anmerkung

CSS - Text mit gestreiftem Hintergrund

PHP - Einfache Bannerrotation

JavaScript - Schlüssel und Wert aus einem Objekt auslesen

MySQL - Datensätze einer Tabelle zählen