Configurer le Mode claire et Sombre ( Dark Mode) sur votre site web
Nous allons apprendre à ajouter le Dark Mode sur un 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.
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) :
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
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.
Et voilà, un click sur le bouton et le thème peut changer de Dark en Light directement.
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.
Voir plus
0 commentaire(s)
Laissez votre commentaire à @johnmbiya
Posts similaires
Configurer le Mode claire et Sombre ( Dark Mode) sur votre site web
Comment faire un formulaire centré dans la page avec HTML et CSS
Catégories
Soyez au courant des dernières tendances
Abonnez-vous pour obtenir les meilleurs articles, tutoriels, astuces et informations !
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épondre2 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épondre2 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épondre1 réponses
@johnmbiya il y a 3 ans
Partager avec vos amis sur facebook, ça pourrait les aider aussi