Configurer le Mode claire et Sombre ( Dark Mode) sur votre site web - Letecode
Suivez nous
HTML CSS

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 Mbiya
Jean Claude Mise à jour : 21 décembre 2022 6376 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.

1
Laisser un commentaire
Jean Claude Mbiya
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)

  • Image placeholder
    Aggestor il y a 4 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
    • Image placeholder
      @johnmbiya il y a 4 ans

      je vais donc parlé sur ça en utilisant PHP et laravel

    • Image placeholder
      @johnmbiya il y a 4 ans

      Merci @Aggestor, comme mentionné à la fin, je vais parlé dans un prochain article avec la sauvegarde du thème dans un cookie

  • Image placeholder
    Tychic Obanda il y a 4 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
    • Image placeholder
      @johnmbiya il y a 4 ans

      Dans un prochain article je vais utiliser la persistance tu thème dans un cookie en utilisant PHP Laravel

    • Image placeholder
      @johnmbiya il y a 4 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

  • Image placeholder
    Marden il y a 4 ans

    Ça va m'aider

    Répondre
    1 réponses
    • Image placeholder
      @johnmbiya il y a 4 ans

      Partager avec vos amis sur facebook, ça pourrait les aider aussi

Laissez votre commentaire à @johnmbiya

ou pour laisser un commentaire
Suivez nous
Posts similaires

Introduction à HTML5

1 février 2022 HTML CSS
Community
Catégories
Laravel Les Trucs et Astuces Microsoft Web Tutoriels Android JavaScript PHP Apple Android Security HTML CSS Google Git & GitHub Database NodeJS Jetpack Compose