Haben Sie sich jemals gefragt, wie Websites basierend auf Ihren Vorlieben nahtlos zwischen hellem und dunklem Modus wechseln? Es ist keine Zauberei – es ist ein cleverer Einsatz moderner Webtechnologien. In diesem Beitrag werde ich die einfache, aber leistungsstarke Technik enthüllen, die hinter der Erkennung steckt, ob ein Benutzer den Dunkelmodus bevorzugt, und wie Sie diese Informationen nutzen können, um das Benutzererlebnis auf Ihrer Website zu verbessern.
Mit der Beliebtheit des Dunkelmodus bieten viele Websites und Anwendungen mittlerweile Themen an, die auf die Systempräferenzen des Benutzers abgestimmt sind. Diese Funktion wird mithilfe der matchMedia-API in JavaScript erreicht, die es Webanwendungen ermöglicht, auf Änderungen in Medienabfragen zu reagieren, beispielsweise auf die Farbschemapräferenz des Benutzers.
Die matchMedia API
Die window.matchMedia-Methode bietet eine Möglichkeit, Medienanfragen auszuwerten und das Erscheinungsbild Ihrer Website basierend auf den Präferenzen des Benutzers anzupassen. Um zu überprüfen, ob der Dunkelmodus aktiviert ist, können Sie die folgende JavaScript-Funktion verwenden:
// Check if the user prefers dark mode function isDarkMode() { return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; }
index.html
Dark Mode Demo Hello, World!
Wenn Sie das Farbschema Ihres Systems ändern, passt sich die Website automatisch an Ihre Präferenzen an, ohne dass die Seite aktualisiert werden muss.
Folgen Sie mir auf GitHub Avinash Tare
Das obige ist der detaillierte Inhalt vonSo erkennen Sie, ob sich ein Benutzer in Js im dunklen Modus befindet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
