Comment détecter le mode sombre en JavaScript ?

Détection du mode sombre en JavaScript

De nombreux systèmes d'exploitation modernes comme Windows et macOS proposent le mode sombre comme option pour améliorer l'expérience utilisateur et réduire la fatigue oculaire dans des environnements de faible luminosité . En tant que développeur, il est avantageux de pouvoir détecter la palette de couleurs préférée du système d'exploitation de l'utilisateur pour offrir une expérience utilisateur fluide.

Requêtes multimédias CSS pour le mode sombre

Pour CSS, le @ media query (préfère-dark-interface) peut être utilisé pour appliquer des styles spécifiquement pour le mode sombre. Cependant, lorsque vous utilisez des API telles que Stripe Elements qui utilisent JavaScript pour le style, une approche différente est nécessaire.

Solution JavaScript

Pour déterminer le jeu de couleurs préféré du système d'exploitation en JavaScript, vous pouvez utiliser ce qui suit code :

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

Ce code utilise l'API window.matchMedia() pour vérifier si le navigateur de l'utilisateur prend en charge les requêtes multimédias et si le La requête multimédia '(préfère-color-scheme: dark)' correspond. Si la requête correspond, cela indique que l'utilisateur a activé le mode sombre sur son système d'exploitation.

Surveillance des modifications du schéma de couleurs

Si vous devez répondre aux changements dans les préférences du schéma de couleurs de l'utilisateur, vous peut utiliser la méthode addEventListener() pour écouter les événements sur la requête multimédia. Le code suivant ajoute un écouteur d'événement qui déclenchera une fonction de rappel chaque fois que le jeu de couleurs change :

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
  const newColorScheme = event.matches ? "dark" : "light";
  // Perform necessary actions based on the new color scheme
});

En utilisant ces techniques, vous pouvez détecter et répondre efficacement au jeu de couleurs préféré de l'utilisateur, garantissant ainsi une cohérence et expérience utilisateur optimisée, qu'ils utilisent le mode clair ou sombre.

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!