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!