Bevorzugtes Farbschema darstellen

Der Dark Mode ist ein Feature, das erst durch Windows 10 auch bei Nicht-Entwicklern und -Programmieren wirklich Bekanntheit erlangt hat. Ab Windows 10 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. Besucher die im Browser eine dunkle Darstellung gewählt haben, wird die Webseite auch dunkel dargestellt.

<style>
:root {
  color-scheme: light dark;
}

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

Optional kann, im HTML, noch dieser Meta-Tag hinzugefügt werden:

<meta name="color-scheme" content="light dark" />

Browser

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

Microsoft Edge

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

Mozilla Firefox

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

Tipps

Designauswahl - Das Design über einem Link verändern

Tag und Nachtmodus für Webseiten

Bausteine  Alle Anzeigen

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

<header> Kopfbereich

CSS - Mit import mehrere CSS-Dateien zusammenfassen

PHP - Suche nach Übereinstimmungen mit regulärem Ausdruck

JavaScript - 1 x Klick Button

MySQL - Alle Einträge nach einem Tag löschen