Comment puis-je détecter le mode sombre en JavaScript ?

Détection du mode sombre dans JavaScript

Avec l'introduction du mode sombre dans Windows et macOS, les développeurs sont confrontés au défi d'adapter les styles CSS et JavaScript pour correspondre à la palette de couleurs préférée de l'utilisateur. Cette question explore comment détecter le mode sombre en JavaScript, permettant des ajustements de couleurs réactifs.

Approche de requête multimédia

Pour CSS, les requêtes multimédias fournissent une solution simple :

@media (prefers-dark-interface) {
  color: white; background: black 
}

Détection JavaScript

L'API Stripe Elements, utilisée pour créer des éléments de paiement, nécessite une spécification de couleur en JavaScript. Pour détecter le mode sombre dans ce contexte, il faut exploiter l'API JavaScript :

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

Cette requête vérifie si l'API window.matchMedia est prise en charge et évalue la chaîne de requête multimédia. Si cela est vrai, le système préfère le mode sombre.

Surveillance des changements de palette de couleurs

Pour gérer les changements dynamiques dans la palette de couleurs, on peut s'abonner à l'événement de changement :

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

Cela permet des ajustements en temps réel en réponse aux préférences 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!