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.
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]
Hell.- und Dunkelmodus für Webseiten [Bildschirmfoto]
Hell.- und Dunkelmodus für Webseiten](img/bevorzugtes_farbschema_darstellen.png)
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]
Microsoft Edge - Einstellungen [Bildschirmfoto]
Microsoft Edge - Einstellungen](img/hell_dunkel_edge.png)
Auch andere Browser die auf Chromium basieren, wie zum Beispiel: Opera oder Vivaldi haben eine ähnliche Funktion.
Mozilla Firefox
![[Bildschirmfoto]
Mozilla Firefox - Einstellungen [Bildschirmfoto]
Mozilla Firefox - Einstellungen](img/hell_dunkel_firefox.png)
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.
<figure> Abbildung
PHP - Dateien auslesen und absteigend nach Datum sortieren
JavaScript - https und den Querystring aus der URL entfernen