Comment détecter le changement de prefers-color-scheme en javascript?

Question

Je peux utiliser window.matchMedia pour détecter si l'utilisateur est en mode sombre, mais comment écouter l'événement de changement de mode sombre ?

Y a-t-il une API comme :

window.addEventListener('perfers-color-scheme-change', () => {
  // faire quelque chose
})

Answer 1

Vous pouvez ajouter un écouteur d'événements avec un rappel sur le MediaQueryList retourné par Window.matchMedia():

function activerModeSombre() {
  // définir le style en mode sombre
}

// MediaQueryList
const preferenceModeSombre = window.matchMedia("(prefers-color-scheme: dark)");

// méthode recommandée pour les navigateurs plus récents : spécifier le type d'événement en premier argument
preferenceModeSombre.addEventListener("change", e => e.matches && activerModeSombre());

// méthode obsolète pour la compatibilité descendante
preferenceModeSombre.addListener(e => e.matches && activerModeSombre());

Remarque : Il existe deux versions des méthodes pour enregistrer un écouteur d'événements :

1. la méthode recommandée addEventListener("change", listener)) qui permet une assignation plus fine aux types d'événements
2. la méthode obsolète addListener(listener)

Voir aussi

• Medium (2019) : Utilisez "prefers-color-scheme" pour détecter le mode sombre de macOS avec CSS et Javascript

---

Un grand merci à lukaszpolowczyk d'avoir signalé que la méthode addListener(listener) est devenue obsolète et à AsukaSong pour avoir initié une refonte complète de cette réponse.

Answer 2

Avec initialisation setter et écouteur 'change'.

const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: dark)');

const setColorScheme = e => {
  if (e.matches) {
    // Foncé
    console.log('Mode sombre')
  } else {
    // Clair
    console.log('Mode clair')
  }
}

setColorScheme(colorSchemeQueryList);
colorSchemeQueryList.addEventListener('change', setColorScheme);

Answer 3

En React, une excellente façon de le faire est de créer un hook personnalisé comme ceci

import React, {useEffect, useState} from 'react';

export const useTheme = () => {
    const initialTheme = darkTheme;
    const [theme, setTheme] = useState(initialTheme);
    useEffect(() => {
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => e.matches && setTheme(darkTheme));
        window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => e.matches && setTheme(lightTheme));
    }, []);
    return theme;
};