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.
![[Bildschirmfoto / Grafik]
CSS - Bevorzugtes Farbschema darstellen [Bildschirmfoto / Grafik]
CSS - Bevorzugtes Farbschema darstellen](img/bevorzugtes_farbschema_darstellen.png)
<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.
![[Bildschirmfoto / Grafik]
Microsoft Edge - Standarddesign anpassen [Bildschirmfoto / Grafik]
Microsoft Edge - Standarddesign anpassen](img/edge_standarddesign.png)
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 Bausteinen (Codeschnipsel
) aus den Bereichen HTML, CSS,
PHP, JavaScript und MySQL.
<object> Objekt
PHP - Formulareingaben in eine Datei hinzufügen