Heim > Artikel > Web-Frontend > Wie kann ich den Dunkelmodus in JavaScript erkennen?
Dark Mode in JavaScript erkennen
Mit der Einführung des Dark Mode in Windows und macOS stehen Entwickler vor der Herausforderung, CSS- und JavaScript-Stile anzupassen um dem bevorzugten Farbschema des Benutzers zu entsprechen. In dieser Frage wird untersucht, wie der Dunkelmodus in JavaScript erkannt wird, um reaktionsfähige Farbschemaanpassungen zu ermöglichen.
Ansatz für Medienabfragen
Für CSS bieten Medienabfragen eine einfache Lösung:
@media (prefers-dark-interface) { color: white; background: black }
JavaScript-Erkennung
Die Stripe Elements API, die zum Erstellen von Zahlungselementen verwendet wird, erfordert eine Farbspezifikation in JavaScript. Um den Dunkelmodus in diesem Zusammenhang zu erkennen, muss man die JavaScript-API nutzen:
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { // dark mode }
Diese Abfrage prüft, ob die window.matchMedia-API unterstützt wird, und wertet die Medienabfragezeichenfolge aus. Wenn dies zutrifft, bevorzugt das System den Dunkelmodus.
Auf Farbschemaänderungen achten
Um dynamische Änderungen im Farbschema zu verarbeiten, kann man das Änderungsereignis abonnieren:
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { const newColorScheme = event.matches ? "dark" : "light"; });
Dies ermöglicht Echtzeitanpassungen als Reaktion auf Benutzerpräferenzen.
Das obige ist der detaillierte Inhalt vonWie kann ich den Dunkelmodus in JavaScript erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!