Wie kann JavaScript den Dunkelmodus erkennen und auf Stripe-Elemente anwenden?

Dark Mode in JavaScript erkennen

Moderne Betriebssysteme wie Windows und macOS bieten Dark-Mode-Optionen. Während CSS eine Möglichkeit bietet, die Präferenz für den dunklen Modus mithilfe von @media (prefers-dark-interface) zu erkennen, benötigen JavaScript-Entwickler eine alternative Lösung.

JavaScript-Erkennung

Zur Erkennung Um das bevorzugte Farbschema in JavaScript zu ermitteln, können Sie die API window.matchMedia() verwenden. Der folgende Code prüft den Dunkelmodus:

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Auf Änderungen achten

Sie können auch auf Änderungen am bevorzugten Farbschema achten:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});

Anwendung auf Stripe-Elemente

Um diese Erkennung auf Stripe-Elemente anzuwenden, ändern Sie das StripeElementStyles-Objekt dynamisch basierend auf dem bevorzugten Farbschema. Zum Beispiel:

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    stripeElementStyles.base.color = COLORS.lightGrey;
} else {
    stripeElementStyles.base.color = COLORS.darkGrey;
}

Dadurch wird sichergestellt, dass Ihre Stripe-Elemente entsprechend den Betriebssystemeinstellungen des Benutzers für den Dunkel- oder Hellmodus geeignet sind.

Das obige ist der detaillierte Inhalt vonWie kann JavaScript den Dunkelmodus erkennen und auf Stripe-Elemente anwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!