Bevorzugtes Farbschema darstellen

Der Dark Mode ist ein Feature, das erst durch Windows 10 eine breite Bekanntheit erlangt hat. Ab Windows 10 kann der Benutzer ein helles oder dunkles Farbschema für den PC einstellen.

[Bildschirmfoto / Grafik]
 App Modus in Windows 11

Hell.- und Dunkelmodus für Webseiten

Mit der CSS @media-Regel lässt sich das auch für Webseiten verwenden, hier ein einfaches Beispiel so wie ich es auf meiner Website einsetze. Besucher die im Browser (oder im Betriebssystem) eine dunkle Darstellung gewählt haben, wird die Webseite auch dunkel dargestellt.

[Bildschirmfoto / Grafik]
 Hell.- und Dunkelmodus für Webseiten
Hell.- und Dunkelmodus für Webseiten

CSS - Media-Regel

<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

[Bildschirmfoto / Grafik]
 Microsoft Edge - Einstellungen
Microsoft Edge - Einstellungen

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

Mozilla Firefox

[Bildschirmfoto / Grafik]
 Mozilla Firefox - Einstellungen
Mozilla Firefox - Einstellungen

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:

Ist der Dunkelmodus derzeit aktiviert?

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.

<main> Hauptinhalt der Seite

CSS - Modal-Fenster mit HTML5 und CSS

PHP - Anzahl der Einträge von einer DB-Tabelle formatiert ausgeben

JavaScript - Formulareingabe nur mit Großbuchstaben

MySQL - Spalten-Durchschnitt ermitteln

Zu lange Tabellen
Vermeiden Sie lange Tabellen. diese haben den Nachteil, dass die Kommunikation zwischen Server und Client (Ihnen) erheblich erhöht werden muss, was sich auf die Ladezeiten ebenso erheblich auswirkt. Denn der Inhalt einer Tabelle wird immer erst dann angezeigt, wenn diese vollständig geladen wurde. Unterbrechen Sie Tabellen daher immer an mehreren Stellen, um sie im Anschluss wieder weiterzuführen. So erscheint der Seiteninhalt optimaler Weise Stück für Stück und der 15 sekündige Totalausfall (weißer Bildschirm) bleibt dem Besucher erspart.