Configurer le Mode claire et Sombre ( Dark Mode) sur votre site web - Letecode
Suivez nous
@johnmbiya - 03 novembre 2020 1049 dans 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

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

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.

@johnmbiya
Jean Claude Mbiya (johnmbiya)

je suis developper fullstack, Dévelopeur android (AAD), créateur de letecode.com, bloggeur, formateur, fondateur de Guide Light System, j'aime la science informatique 😎👨‍💻

P : 386 7 7 24
Abonnez vous !

Recevez les dernières nouvelles de letecode directement dans votre boîte de réception. Réjoignez +500 Abonnés, Nous n'envoyons pas des spam !

Voir plus

9 commentaire (s)

  • Image placeholder
    Aggestor il y a 1 an

    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
    Réponses
    • Image placeholder
      @johnmbiya il y a 1 an

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

    • Image placeholder
      @johnmbiya il y a 1 an

      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 1 an

    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
    Réponses
    • Image placeholder
      @johnmbiya il y a 1 an

      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 1 an

      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 1 an

    Ça va m'aider

    Répondre
    Réponses
    • Image placeholder
      @johnmbiya il y a 1 an

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

Laissez votre commentaire à @johnmbiya