• Accueil
•   >  Recueil
•   >  Mode sombre et mode claire

Mode sombre et mode claire

• CSS
• JavaScript
• Démonstration
  • Basculer en mode sombre
  • Mode sombre par défaut

CSS

1. Utiliser les propriétés personnalisées (custom properties en anglais) pour gérer vos couleurs
   Donné un nom fonctionnel ou plus simplement numérote vos couleurs !

   body {
       background:var(--color1);
       color:var(--color2);
   }

2. Créer le thème par défaut dans :root

   Mode clair par défaut

   :root {
       --color1:white;
       --color2:black;
       --color3:#F2F2F2;
   }

   Mode sombre par défaut

   :root {
       --color1:#222;
       --color2:#FFF;
       --color3:#555;
   }

3. Définissez le jeu de couleurs du navigateur avec la propriété color-scheme ;

   Lorsqu'un utilisateur sélectionne un de ces jeux de couleurs, le système d'exploitation fait des ajustements à l'interface utilisateur. Cela comprend les contrôles de formulaires, les barres de défilement et les valeurs utilisées par le système de couleurs CSS.

   Mode clair par défaut

   :root {
       --color1:white;
       --color2:black;
       --color3:#F2F2F2;
       color-scheme: only light;
   }

   La valeur only sert à désactiver le remplacement de couleur du mode nuit du moteur de rendu Blink

   Mode sombre par défaut

   :root {
       --color1:#222;
       --color2:#FFF;
       --color3:#555;
       color-scheme: dark;
   
   }

4. Créé le thème équivalent pour l'autre mode

   Mode clair par défaut

   .dark {
       --color1:#222;
       --color2:#FFF;
       --color3:#555;
       color-scheme: dark;
   }

   Mode sombre par défaut

   .light {
       --color1:white;
       --color2:black;
       --color3:#F2F2F2;
       color-scheme: only light;
   }

JavaScript

1. let root = document.querySelector(":root");

2. Détecter la préférence de l'utilisateur

   Mode clair par défaut

   if (
       window.matchMedia &&
       window.matchMedia("(prefers-color-scheme: dark)").matches
   ) {
       root.classList.toggle("dark");
   }

   Mode sombre par défaut

   Comme dans la grande majorité des cas, le thème clair n'est pas demandé (car par défaut), je conserve le thème sombre du site

3. Détecter le changement de préférence utilisateur

   Mode clair par défaut

   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
       if(e.matches) {
           root.classList.add("dark");
       } else {
           root.classList.remove("dark");
       }
   });

   Mode sombre par défaut

   Pas de détection non plus

4. Basculer de mode à tout instant en une action

   Mode clair par défaut

   document.querySelector("button").addEventListener("click", () => {
       event.preventDefault();
       root.classList.toggle("dark");
   });

   Mode sombre par défaut

   document.querySelector("button").addEventListener("click", () => {
       event.preventDefault();
       root.classList.toggle("light");
   });

5. Je recommande de sauvegarder dans le localStorage tout changement de mode afin de pouvoir le configurer lors de la prochaine visite

Démonstration

Basculer en mode sombre

Mode sombre par défaut