Libellés

JavaScript et CSS prefers-color-scheme : Changement de thème (clair et sombre) avec match media et media queries

CSS prefers-color-scheme

Pour détecter le thème on peut utiliser les médias queries CSS prefers-color-scheme: dark ou prefers-color-scheme: light

 /* Si le thème est sombre */
@media (prefers-color-scheme: dark) {
   body {
      color: white;
      background: black;
   }
}

JavaScript : matchMedia prefers-color-scheme

Pour détecter le thème au démarrage avec Javascript, vous pouvez utiliser matchMedia.

//Si le navigateur est compatible avec match media
if (window.matchMedia) {

    //sombre
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        console.log("dark");
    }

    //clair
    if (window.matchMedia('(prefers-color-scheme: light)').matches) {
        console.log("light");
    }
}

JavaScript : matchMedia event listener

Pour observer un changement de thème, vous pouvez utiliser la fonction addEventListener("change")

À chaque changement la fonction sera appelée.

//detecte changement de thème
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    //si matches == true -> dark sinon light
    const newColorScheme = e.matches ? "dark" : "light";
    console.log(newColorScheme);
});

Changement de thème dans Windows et code complet

Pour changer de thème, allez dans Paramètres > Couleurs et sélectionnez clair ou sombre.

Les changements seront pris en compte sur la page web. Le thème de la page sera changé automatiquement.

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* Si le thème est sombre */
    @media (prefers-color-scheme: dark) {
        body {
            color: white;
            background: black;
        }
    }
</style>

<body>
    <h1>Titre</h1>
    <script>

        //Si le navigateur est compatible avec match media
        if (window.matchMedia) {
            
            //sombre
            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                console.log("dark");
            }
            
            //clair
            if (window.matchMedia('(prefers-color-scheme: light)').matches) {
                console.log("light");
            }
        }

        //détecte le changement de thème
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            //si matches == true -> dark sinon light
            const newColorScheme = e.matches ? "dark" : "light";
            console.log(newColorScheme);
        });
    </script>

</body>

</html>
Envoyer l'article par e-mail
Libellés :

Commentaires

Enregistrer un commentaire