Configurer le Mode claire et Sombre ( Dark Mode) sur votre site web

Nous allons apprendre à ajouter le Dark Mode sur un site web

Jean Claude Mise à jour : 21 décembre 2022 5609 3

Le mode sombre (Dark Mode) devient de plus en populaire sur les applications, les logiciels, les smartphones et même les systèmes d'exploitation. Ce mode qui permet d'utiliser en majorité les couleures sombres afin de rendre la visibilté plus bonne et douce pour les yeux.

J'aime utiliser le Dark Mode dans mon IDE, smartphone, Système d'exploitation et donc même dans mes applications. dans cet article je veux vous apprendre à créer un site en deux mode (Normal et Sombre ).

Toute la magie se réposera donc sur le faite de cliquer sur un Boutton, et un javaScript sera appelé pour remplacer une class CSS de notre body que nous aurons déjà défini le style CSS.

HTML

Pour commencer, nous créons un magnifique site web avec un joli bouton qui nous permettra de changer de thème au click.

 <body class="light">
<h1>Hello World !</h1>
<p>Je suis sur un site cool !</p>
<button id="theme-btn">Changer de theme</button>
 </body>
 

nous allons donc utliser la classe de la balise Body en cliquant sur le bouton (theme-btn)

Style CSS

suposons que vous avez ceci comme code standard de votre site, donc le site en mode claire ou encore (Light Mode) :

 body {
 background-color: white;
 color: black;
}

Pour atteindre ce qu'on veut, l'idée est de rendre notre arrière plan NOIR et la couleur des textes en BLANC, nous allons donc utiliser une classe css .dark

 .dark {
 background-color: black;
 color: white;
}

vous pourez utiliser le SCSS pour avoir la classe .dark comme parent pour votre theme sombre.

Scripts JavaScript

Pour finir nous aurons besoin du JS pouvant récuperer l'événement du click sur le boutton pour changer la classe du body, et changer de theme.

 
var toggle_btn = document.getElementById('theme-btn');
var body = document.getElementsByTagName('body')[0];

var dark_theme_class = 'dark';

toggle_btn.addEventListener('click', function() {
 if (body.classList.contains(dark_theme_class)) {
 
 body.classList.remove(dark_theme_class);
}
 else {
 body.classList.add(dark_theme_class);
}
});
 

Et voilà, un click sur le bouton et le thème peut changer de Dark en Light directement.

Codes complets sur Github

Alors sans doute vous aurez rémarqué que dès que vous réchargez la page, le mode claire est remis, ne vous en faites pas. Dans un prochain article, nous allons apprendre comment garder le thème le plus longtemps que possible dans un cookie.

N'hésitez pas à me laisser un commentaire, partager l'article et surtout, abonnez-vous pour plus des nouveautés.

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.

Voir plus

Configurer le Dark Mode sur votre site web avec les cookies

Web

L'origine de l'architecture Client-Serveur

Database

0 commentaire(s)

Aggestor il y a 3 ans

Pas mal le tutoriel, mais dans le cas présent, si on rafraîchit la page le thème se réinitialise. Je proposerais que vous ajoutiez un système qui permettra de sauvegarder par exemple le mode dans le navigateur avec : localStorage.setItem('clé,'valeur'), ça pourrait bcp aider
Répondre
2 réponses
- @johnmbiya il y a 3 ans
  
  je vais donc parlé sur ça en utilisant PHP et laravel
- @johnmbiya il y a 3 ans
  
  Merci @Aggestor, comme mentionné à la fin, je vais parlé dans un prochain article avec la sauvegarde du thème dans un cookie
Tychic Obanda il y a 3 ans

Super article et bien détaillé ! Il y a aussi la propriété CSS filter qui permet de rendre un site en mode sombre en une seule ligne. Exemple : body { filter : invert (1) hue-rotate (180deg); } Cette propriété inverse le background et le color. Merci beaucoup pour cet article.
Répondre
2 réponses
- @johnmbiya il y a 3 ans
  
  Dans un prochain article je vais utiliser la persistance tu thème dans un cookie en utilisant PHP Laravel
- @johnmbiya il y a 3 ans
  
  Merci @Tychic, la propriété CSS filter est aussi une alternative , mais imaginez dans le cas du control des couleurs dans les deux thèmes?. cet article vous permettra d'avoir un control net sur les couleurs de votre choix et changer de thème. Merci pour votre commentaire @Tychic
Marden il y a 3 ans

Ça va m'aider
Répondre
1 réponses
- @johnmbiya il y a 3 ans
  
  Partager avec vos amis sur facebook, ça pourrait les aider aussi