Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich den Dunkelmodus in JavaScript erkennen?

Wie kann ich den Dunkelmodus in JavaScript erkennen?

Barbara Streisand
Barbara StreisandOriginal
2024-11-11 06:57:03220Durchsuche

How Can I Detect Dark Mode in JavaScript?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn