Maison > interface Web > tutoriel CSS > le corps du texte

Comment détecter le mode sombre en JavaScript ?

Linda Hamilton
Libérer: 2024-11-14 15:36:01
original
340 Les gens l'ont consulté

How Can You Detect Dark Mode in 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
}
Copier après la connexion

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
});
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal