Comment détecter le mode sombre en JavaScript ?

Détection du mode sombre dans JavaScript

Avec l'adoption généralisée du mode sombre dans les systèmes d'exploitation comme Windows et macOS, les développeurs ont besoin d'un moyen d'adapter leurs applications web en conséquence. Cette tâche survient lors de la personnalisation dynamique des interfaces utilisateur et des éléments de style en fonction du jeu de couleurs préféré du système.

Une approche consiste à utiliser des requêtes multimédias CSS pour cibler les préférences du mode sombre. Cependant, lors de la gestion d'éléments stylisés en JavaScript, tels que ceux créés à l'aide de l'API Stripe Elements, une solution plus complète est requise.

Pour déterminer le jeu de couleurs du système d'exploitation par programmation en JavaScript, utilisez la technique suivante :

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

Cette méthode vérifie si le navigateur prend en charge l'API window.matchMedia(), puis utilise une requête multimédia pour vérifier si le jeu de couleurs préféré du système est sombre.

Pour surveiller les changements dans les préférences de jeu de couleurs, utilisez le code suivant :

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

Cette fonction d'écoute surveille toutes les modifications dans la requête multimédia et fournit un objet événement qui indique la nouvelle couleur. schème. Les développeurs peuvent ensuite mettre à jour leurs applications de manière dynamique pour correspondre aux paramètres système actuels.

En mettant en œuvre cette technique, les applications Web peuvent s'adapter de manière transparente au mode sombre, offrant aux utilisateurs une expérience cohérente et visuellement attrayante sur différents systèmes et conditions d'exploitation.

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!