Configurer le Dark Mode sur votre site web avec les cookies

Nous allons apprendre à garder notre thème sombre dans le navigateur

Jean Claude Mise à jour : 20 décembre 2022 2781 1

Dans un article précédent, nous avons appris à créer le thème sombre et savoir transiter entre les deux thèmes ( clair et sombre), si tu l'as manqué, clique ici.

Nous avons eu des difficultés pour garder le thème après avoir rechargé la page, car toutes nos variables étaient réinitialisées après la recharge de la page.

Dans cet article nous allons utlisé une technique simple pour garder notre thème même après avoir rechargé la page et même si on ferme notre navigateur ou éteindre notre PC. la dite technique consiste à utliser un cookie.

Avant d'utiliser ce fameux gentil cookie, découvrons ensemble ce que c'est et comment s'en servir d'une manière générale.

C'est quoi un cookie ?

Un cookie, appelé auutrement : témoin de connexion ou témoin, est défini par le protocole de communication HTTP comme étant une suite d'informations envoyée par un serveur HTTP à un client HTTP, que ce dernier retourne lors de chaque interrogation du même serveur HTTP sous certaines conditions.

Le cookie est l'équivalent d'un fichier texte de petite taille, stocké sur le terminal de l'internaute. Existant depuis les années 1990, ils permettent aux développeurs de sites web de conserver des données utilisateur afin de faciliter la navigation et de permettre certaines fonctionnalités.

Les cookies ont toujours été plus ou moins controversés car ils contiennent des informations personnelles résiduelles pouvant potentiellement être exploitées par des tiers. Ces informations censées être privées ne le sont pas vraiment, puisqu'elles sont accessibles à un certain point.

source : wikipedia

Comme nous pouvons le voir, le cookie nous permettra de conserver les données de l'utilisateur pour faciliter la navigation, nous allons donc s'en servir pour conserver le thème que l'utilisateur aura choisi.

Assez parlé, passons à la pratique ...

Etapes à réproduire

1. (HTML) crée un fichier index.html sur ta machine et copie les codes suivants dans <body>:

<div class="container">
    <div class="jumbotron">
        <h1 class="display-4">Hello, world!, I am in <span id="mode">Light Mode</span></h1>
        <p class="lead">Cet exemple illustre le changement du theme et la sauvegarde dans le cookie pour le conserver longtemps</p>
        <hr class="my-4">
        <p>Recharger la page pour voir le changement du theme</p>
        <a class="btn btn-primary btn-lg" id="theme-toggle" href="#" role="button">Changer de Thème</a>
    </div>
</div>

Dans ce bout de code, nous avons un jumbotron (voir sur bootstrap ), avec un titre qui changera selon le thème selectioné par l'utilisateur, quelques paragraphes et un bouton permettant à l'utilisateur de changer de thème.

2. (CSS) ajoute les styles CSS suivants dans la balise <head> ou en dans un fichier que tu vas importer en utilisant la balise <link/>.

<style>
        body.dark-theme {
            background-color: #000000;
            color: #FFFFFF;
        }

        .dark-theme .jumbotron {
            background-color: rgb(39, 39, 39);
        }

        .dark-theme .btn {
            background-color: #dd491c;
        }

    </style>

le thème par défaut est donc le mode clair ( Light Mode) et donc nous allons définir que le mode sombre, mais nous avons la liberté d'ajouter les styles que nous désirons dans le mode clair.

Je vous explique ce bout de code, pour ceux qui ne l'auront pas compris. Dans le Dark mode( Mode sombre), la balise <body> de notre site aura une classe : "dark-mode", nous allons nous en servir pour personaliser tout les éléments de notre site en ajoutant ".dark-mode" devant chaque appel de style.

💡⚠️ Si vous êtes sur Laravel, visitez ceci : Dark Mode dans une application Laravel

3. (JavaScript) pour que les codes JavaScript fonctionnent correctement, nous allons devoir ajouter JQuery dans notre fichier html avant la fermeture de la balise <body>, clique ici pour trouver JQuery et bootstrap

puis ajouter ceci après l'importation de Jquery :

<script>
        var body = document.getElementsByTagName('body')[0];
        var dark_theme_class = 'dark-theme';
        var theme = getCookie('theme');

        if(theme != '') {
            body.classList.add(theme);
        }

        document.addEventListener('DOMContentLoaded', function () {


            $('#theme-toggle').on('click', function () {

                if (body.classList.contains(dark_theme_class)) {

                    body.classList.remove(dark_theme_class);
                    $('#mode').text('Light Mode')
                    setCookie('theme', 'light');

                }
                else {

                    $('#mode').text('Dark Mode')

                    body.classList.add(dark_theme_class);

                    setCookie('theme', 'dark-theme');

                }

            });

        });

        // enregistrement du theme dans le cookie

        function setCookie(name, value) {

            var d = new Date();
            d.setTime(d.getTime() + (365*24*60*60*1000));
            var expires = "expires=" + d.toUTCString();
            console.log(expires)
            document.cookie = name + "=" + value + ";" + expires + ";path=/";
            console.log(document.cookie)

        }




        // methode de recuperation du theme dans le cookie

        function getCookie(cname) {

            var theme = cname + "=";
            var decodedCookie = decodeURIComponent(document.cookie);
            var ca = decodedCookie.split(';');

            for(var i = 0; i < ca.length; i++) {

                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }

                if (c.indexOf(theme) == 0) {
                    return c.substring(theme.length, c.length);
                }
            }
            return "";
        }

    </script>

Si tu n'as pas compris ce code JavaScript, ne panique pas je vais expliqué.

- Nous commençons par récuperer l'element body : document.getElementsByTagName('body')[0] ceci nous permet d'avoir la seule balise body sur la page.

- Nous avons créer deux méthodes, une méthode pour la création du cookie et l'autre pour la récuperation du cookie.

- à savoir que les cookies sont enregistrés comme une chaîne des caractères sous la forme : "clé=valuer,clé2=valuer2,....", cette chaîne est accessible avec le code document.cookie en JavaScript

- Nous avons effectué l'action du click sur le boutton de changement de thème qui fait les opérations suivantes : changer de titre selon le thème, ajouter ou enlever la classe "dark-mode" sur le body et enfin enregistrer le changement dans le cookie avec la méthode setCookie().

Si cet article a été d'une grande utilité, n'hesite pas de me laisser un commentaire et de partager avec les autres en un click sur les boutons des réseaux sociaux juste en bas !

Codes complets à trouver sur Github

Thanks !

vote

Laisser un commentaire

Jean Claude Mbiya

Développeur Web full stack, Développeur Android (Certifié Google AAD) Formateur dans les domaines du numérique, Créateur letecode.com 👨‍💻. Je suis un grand passionné des nouvelles technologies et j'adore partager ce que j'apprend.