Comment JavaScript peut-il détecter et appliquer le mode sombre aux éléments Stripe ?

Détection du mode sombre en JavaScript

Les systèmes d'exploitation modernes comme Windows et macOS offrent des options de mode sombre. Bien que CSS fournisse un moyen de détecter les préférences en mode sombre à l'aide de @media (prefers-dark-interface), les développeurs JavaScript ont besoin d'une solution alternative.

Détection JavaScript

Pour détecter le jeu de couleurs préféré en JavaScript, vous pouvez utiliser l'API window.matchMedia(). Le code suivant vérifie le mode sombre :

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

Surveillance des modifications

Vous pouvez également écouter les modifications apportées à la palette de couleurs préférée :

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

Application à Stripe Elements

Pour appliquer cette détection à Stripe Elements, modifiez le objet stripeElementStyles de manière dynamique en fonction du jeu de couleurs préféré. Par exemple :

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

Cela garantit que vos éléments Stripe sont stylés de manière appropriée pour le mode sombre ou le mode clair en fonction des préférences du système d'exploitation de l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!