Comment détecter le mode sombre à l'aide de JavaScript

Détection du mode sombre et détection du changement de mode à l'aide de JavaScript

En utilisant CSS, nous pouvons détecter le mode sombre en utilisant leprefers-color-schemerequête médiatique.

Mais… et si nous devons utiliser JavaScript? Je suis récemment tombé sur ce problème, car j'avais du code JavaScript qui ajoutait une image à la page, mais je voulais afficher une image différente en fonction du mode clair / sombre.

Voici comment nous pouvons le faire.

Commencez par détecter si lematchMedial'objet existe (sinon le navigateur ne prend pas en charge le mode sombre et vous pouvez revenir en mode clair).

Ensuite, vérifiez s'il s'agit du mode sombre en utilisant

window.matchMedia('(prefers-color-scheme: dark)').matches

Cela reviendratruesi le mode sombre est activé.

Voici un exemple complet, où j'inverse les couleurs d'une image si elle est en mode sombre:

const img = document.querySelector('#myimage')
if (window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: dark)').matches) {
  img.style.filter="invert(100%)";
}

Il y a cependant un problème: que se passe-t-il si l'utilisateur change de mode en utilisant notre site Web?

Nous pouvons détecter le changement de mode à l'aide d'un écouteur d'événement, comme ceci:

window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', event => {
  if (event.matches) {
    //dark mode
  } else {
    //light mode
  }
})

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: