🍀 Le mode nuit en CSS et JavaScript (night mode)

bonjour à tous et bienvenue on se retrouve aujourd'hui pour faire un mode nuit en CSS et JavaScript alors ça va être très intéressant ce mode nuit pourquoi enfin trois choses sur tout qui vont m'intéresser sur lesquels je vais insister c'est comment créer un boulet 1 en pure CSS oui oui vous avez bien entendu on peut créer un boulet en pure CSS grâce au checkbox et bien on verra comment gérer cette petite animation grâce à ce bowling ensuite bien sûr quand on clique sur cet élément là il va falloir injecter la couleur au fond injecter de la couleur là changer la couleur du texte bien sûr mais ça c'est JavaScript qui va gérer ça on verra comment faire et dernier élément intéressant c'est quand on va enregistrer le choix d'utilisateur là vous voyez que je suis sur le mode nuit hop si je recrée si je reviens plus tard sur le site et bien je suis effectivement sur le mode nuit on va pas demander à l'utilisateur à chaque fois qu'il vient sur notre site de re-paramétrer s'il veut le mode nuit ou pas donc voilà c'est parti on va faire ça bon il y a déjà des petites parties qui ont été codées par mes soins donc ce qu'on va faire c'est que vous avez juste en dessous de la vidéo le projet de démarrage si vous voulez suivre en même temps que moi ce que je vous recommande toujours et là nous ce qu'on va se coder ensemble c'est tout d'abord le petit le petit toggle là donc on va voir comment faire ça on va se placer ici donc là vous avez la partie principale du site qui était matérialisé avec les balises main et donc là si on veut on tape point togel on va mettre un input de type checkbox donc ça c'est important l'input de type check box il aura tient aussi une classe checkbox et il aura un IDIS ça sera pour le retrouver un peu plus tard en JavaScript on va lui mettre dark mode donc ensuite quand on a une check box en général qu'est-ce qu'on a on a un label et le label force ça veut dire quoi ça se rapporte à l'ID de la checkbox donc en faisant ça ils vont être connectés nos deux éléments on va le vérifier juste après donc de quoi on a besoin on a besoin de notre label d'un petit logo de lune mais aussi de l'autre côté un petit logo de soleil et le troisième élément on a besoin d'une petite balle là une petite boule un cercle donc comment est-ce qu'on va dire ça dans le label il y a d'abord un spam qui a la classe Moon donc là j'ai été chercher des icônes qui sont pas forcément très jolies c'est les icônes natifs au navigateur mais bon pour un petit projet on va dire que ça fera l'affaire après si vous voulez faire un beau projet c'est peut-être mieux d'aller sur des sites spécialisés qui qui font des icônes gratuites mais qui sont quand même plus jolis que ça donc là c'est le code 97 88 faut pas oublier deux points à la fin là vous voyez que ça m'a mis nos petits icônes ok ensuite qu'est-ce qu'on va avoir on va avoir la classe circle OK non pas ok on a le label hop je l'avais mis une classe label voilà parce que sinon le style là il va être il va être horrible hop voilà il a déjà des choses qui ont été codées d'avance ok c'est vraiment envie qu'on se concentre sur les choses qui sont essentielles les notions essentielles dans cette vidéo donc au niveau du style bon il y a rien de rien de particulier bon le body le mail n'a rien à dire les images tout ce que vous avez là la partie principale on s'en fiche le togol je l'ai placé en absolue à 20 pixels du bord en haut à droite ok derrière le label bon j'ai mis un petit style pas grand chose à signaler le l'icône Moon et l'icône soleil après je les ai un petit peu j'ai fait des petites choses et puis il est cogne circle enfin le icône le petit le petit truc qui s'appelle circle voilà j'en ai fait une boule ok on a ce style là on a encore la checkbox qui est visible donc qu'est-ce qu'on pourrait faire on pourrait dire d'abord Bella checkbox je veux plus l'avoir de se rendre bien compte comment elle fonctionne en fait la check box moi ce que j'aimerais faire là ça serait dire et bien quand ma check box est checker j'aimerais que le cercle il se il se déplace et il aille de ce côté puisque après la couleur ça sera géré avec JavaScript quand on mettra le mode nuit mais ce boulet en CSS pour faire cet effet et bien en réalité on peut faire un boulet en CSS faut que je me place entre togol et la belle voilà c'est là qu'on a déclaré la check box donc là je vais dire point checkbox et là je peux dire deux points check ça ça veut dire quoi mais ça teste si c'est checker ou pas donc ça met le style que si elle est checker si elle est pas checker le style que je vais mettre en suivant ça va pas marcher donc ensuite il faut être plus label c'est pour ton enfant direct qui est le label c'est obligé de mettre la balle et ensuite on va dire ton enfant dans label qui s'appelle circle voilà il faut faire comme ça en général on change le style du label quand on utilise le check comme ça on s'arrête au label mais là il y a encore plus il y a encore un enfant et c'est circle qu'on veut faire évoluer et bien regardez circle si je dis un transforme translate tiens tu vas bouger sur l'axe des x tu veux aller à 29 pixels sur la droite et ben là qu'est-ce qui se passe quand on est checké et bien on va ici sur la droite et vous voyez que si je reclique ça va l'autre côté vous voyez c'est pour ça que je voulais vous le laisser le checkbox et bien maintenant qu'est-ce que je vais faire le checkbox c'est bon on va le faire disparaître donc on va juste lui dire dans l'ordre du code donc on va dire juste avant le check on va dire check box dans pas de check je veux que tu sois dn display non et voilà on la voit plus le checkbox mais par contre elle fonctionne et vous voyez ça fait ça alors là si on veut se mettre un effet un peu sympa il y a un truc qui est pas mal ça s'appelle le cubique Béziers alors j'ai pas trouvé de temps sur le cubic Béziers tiens on va le mettre à circle ici il faut lui dire quoi il faut lui dire transition je te mets une transition ça va être sur ton transforme et ça va durer 0,4 secondes et l'effet en fait c'est comme c'est des ISIN out c'est ça le public Béziers mais c'est beaucoup plus technique donc je vous invite à aller voir sur google si vous connaissez pas ces choses dont j'ai régulièrement parlé dans mes cours donc là je m'étais pas là-dessus sur ce coup là et regardez ce que ça fait ça fait une animation hyper hyper sympa voilà et ça c'est en pure CSS qu'on le fait on arrive à gérer ce boulet un trou Falls donc on va soit checker Pat checker c'est un boulet 1 on va saut d'un côté soit de l'autre ok bon c'est bien ça nous fait une belle jambe mais maintenant faut avoir cette belle jambe on a quand même content mais maintenant ce qu'on aimerait c'est que quand ça aille de l'autre côté ben ça fasse quand même le changement de couleur là partout ça c'est JavaScript qui va gérer en fait on va dire au body qui est ici et bien on va lui injecter une classe par exemple il y en a on a qu'à on a qu'à juste on va juste dire comme ça donc là je vais mettre une petite séparation je veux dire que ça c'est le Dark mode d'accord c'est important de commenter son code même si bon après ça va commencer par la classe Dark et on va créer une classe Point d'Arc pour l'instant il n'existe pas et cette classe et bien elle sera ajoutée en Javascript voilà alors après on mettra un petit peu plus de type CSS mais pour l'instant on va juste commencer avec un seul élément on aimerait injecter une classe à quelque chose en Javascript alors comment est-ce qu'on fait ça d'abord on repère l'élément auquel on veut injecter ça donc là c'est à qui qu'on va injecter c'est au body carrément c'est au plus le plus haut possible donc au body donc comment est-ce qu'on pointe le body il faut dire document de point body mais il faut savoir quand est-ce qu'on injecte la classe surtout donc il faut créer un événement quand on clique là dessus surtout ça qui est intéressant donc comment il s'appelle cet élément on fait inspecter on peut aller voir si on se rappelle pas très bien de son code on voit que là il y a une div mais non c'est surtout là il y a un ID dark mode donc si on lui dit tiens c'est quoi tiens si je te dis dark mode c'est quoi ça pour toi et bien il va nous dire dark mode est une balise Heidi voilà ok c'est bon c'est identifiant JavaScript on n'a pas besoin de faire guetter les mains de byedy on est plus obligé de faire ça donc on va dire dark mode je t'ajoute oui du coup ils mettent pas à taper donc faut faire attention à pas faire de fautes à 10 20 lister l'événement c'est un clic et après tu vas me faire les choses suivantes déjà un consoloc pour vérifier que ça marche c'est toujours important d'avancer l'étape par étape donc je clique hop et samedi yes ok ça veut dire que maintenant tout ce qui va être compris dans ces accolades et bien ça va déclencher le code qu'on veut au clic qui est ici donc qu'est-ce que j'ai envie de déclencher comme code et bien j'ai envie de dire documents point body point class liste c'est comme ça qu'on injecte une classe et je vais pas faire a de fois ensuite je vais faire admet juste pour vous montrer parce qu'après c'est pas ça qu'il faut qu'on fasse mais là c'est on va dire que c'est pour reprendre la pédagogie je vais faire add et donc ça fait quoi hop oui non il faut aller sur le body quand même qu'est-ce qu'il vient de se passer oui dans la classe s'appelle pas dark moi de s'appelle dark tout court la classe voilà donc regardez je le fais et vous voyez que l'image de fond enfin la couleur de fond a changé pourquoi parce que la classe Point d'Arc a fait quoi elle injecte un background qui est une nuance de noir d'accord ok donc ça c'est bien c'est à dire que ça va fonctionner mais si on revient en arrière ça marche pas donc là il faudrait dire ah mais si jamais tu as la classe d'Arc tu l'enlèves et si jamais tu l'as pas tu la mets et ben il y a un mot pour ça en Javascript c'est ça qui est magnifique le mot magique c'est toggle toggle ça veut dire si jamais tu vois la classe dans la balise que je t'ai désignée donc là la balise c'est document de points body donc c'est la balise BODY si jamais tu vois cette classe tu l'enlèves sinon tu la rajoutes on regarde hop on la met on l'enlève on la met on l'enlève voilà et on voit que même vous pouvez regarder dans votre console ici même que ben voilà on voit directement qu'elle se met qu'elle s'enlève ok donc ça c'est bien maintenant il était un petit peu plus riche que ça le Dark mode on avait quelques autres couleurs ben comment est-ce qu'on s'y prendrait pour toucher d'autres éléments mais en fait en disant point d'Arc et par exemple le Main donc le main c'est cette partie principale là d'accord mais si je dis point d'Arc main et que je lui donne un background je vais lui donner un background et bien en fait cette couleur que je vais donner elle va être prioritaire c'est ça qui est génial pourquoi les prioritaires cette couleur parce que là main c'est une c'est une balise HTML classique donc on passe devant elle donc en fait là ce background là il se fait écraser en quelque sorte il ne fonctionne plus regardez derrière on peut même le contrôler ici si je fais inspecter là je me place sur main et en plaçant sur main on voit que la classe on voit que là la classe dark plus loin main et bien on injecte ceci et donc là ici c'est barré vous voyez que dans la console vous avez toujours tous les éléments pour réussir voilà c'est impossible de se tromper quand on utilise bien la console alors bien sûr ça demande une certaine habitude donc ok mais c'est pas tout qu'est-ce que qu'est-ce que j'avais voulu changer aussi oui le couleur du label ici donc la couleur du label on va dire point d'Arc donc ça veut dire qu'à chaque fois que le body à la classe d'art qui va avoir un enfant point label enfin tous ces enfants point la belle là ça veut dire c'est ça que ça veut dire et bien on va la remettre une petite box Shadow donc ça c'est une petite Shadow avec la couleur toujours la même couleur la 09 voilà celle-ci qui me propose et un background qui va changer en 8 8 j'enregistre et là aussi c'est encore passé devant c'est passé devant point label c'est à dire quoi hop regardez je vais cliquer droit inspecter il y a mon label qui est ici et on voit que là c'est bon elle est bien injectée la couleur est là ça a été barrée vous allez dire oui pourquoi parce que là c'est les deux c'est une classe certes les deux c'est une classe mais body voilà en quelque sorte c'est comme si on disait à la balise BODY point label de mettre ce style alors que là on dit à point d'Arc donc c'est une classe donc ça passe devant et en plus le fait que ce soit annoncé oui je suis en train d'y penser le fait que ce soit annoncé en deuxième en CSS mais en fait lui il lit la feuille de haut en bas en CSS et il descend donc en fait le dernier truc qu'on lui dit mais c'est celui qui retient en quelque sorte voilà si jamais vous dites deux fois la même vous appelez deux fois le même élément et vous le dites transforme ou dans les deux cas et bien il va prendre la deuxième fois que vous lui avez dit voilà c'est comme ça que ça marche en CSS et il retient ce qu'il y a en dernier et il restait quoi où il restait le cercle à changer la couleur donc on va dire point d'Arc point circle et là notre petit cercle il reprend la couleur en 09 et voilà toute la logique de notre mode nuit et faite voilà donc maintenant il nous reste un petit truc c'est enregistrer enregistrer notre mode nuit donc pour ça il va falloir se placer dans Application et là en fait on peut enregistrer dans le navigateur notre utilisateur alors ça c'est pas des cookies c'est le local storage ça veut dire quoi le local story ça veut dire que on enregistre dans l'ordinateur de notre utilisateur mais on a même pas nous ACC accès à ces données enfin on a accès quand il vient nous voir en fait mais on peut pas avoir accès à plein de données comme les cookies laissent autoriser le local story chez bien pour faire des modes nuits par exemple et souvent des sites qui vous stockent dans votre local storage si vous avez choisi un mode nuit c'est souvent la que ça se fait et donc comment est-ce qu'on fait pour enregistrer des choses en local story donc ça se passe dans l'application ici et ça se passe ici dans lequel serait vous voyez qu'après vous avez session storage vous avez les cookies ici le local storage c'est c'est une très un très gros espace de stockage vous pouvez mettre beaucoup de choses dans l'ordinateur de l'utilisateur enfin dans son navigateur qui après permettent de quand il revient une fois suivantes et bien d'avoir déjà des choses enregistrées ça peut être pratique donc comment est-ce que ça fonctionne le local storage il va falloir qu'on dise bah tiens quand on a injecté quand on injecte la classe qu'est-ce qui se passe il faudrait dire windowstorage point donc là c'est le nom de la boîte on va l'appeler tiens dark mode cette boîte et on lui dit par exemple tu mets trous bon là ça veut dire quoi c'est la qu'à chaque fois que l'événement va se déclencher il va mettre trou c'est pas bon mais je veux juste vous montrer comment ça marche le local storage donc en gros window point local storage donc là c'est il sait où aller il sait qu'il doit aller ici en fait dans le dans le local storage qui est qui est écrit là d'accord et ensuite le nom là c'est le nom de la boîte il va se faire une boîte dans laquelle il va stocker la valeur trou voilà c'est ça que ça veut dire donc essayons je vais cliquer hop non ça a pas marché mon clic voilà et voilà on voit qu'on est bien sur trou par contre ça le repasse pas sur fols si on va de l'autre côté donc il va falloir conditionner un petit peu tout ça donc attendez je vais faire un copier-coller de Windows pour lequel soit ce qu'on voulait on va le répéter plusieurs fois donc je vais dire if window point local storage point dark mode si jamais il est égal à dire non c'est pas on va plutôt faire dans le sens on va dire si jamais il est égal à trou alors qu'est-ce que tu fais tu lis mes folks c'est plutôt comme ça que je vais procéder donc attendez on va faire ça on va faire ça propre voilà comme ça en revanche sinon s'il est pas égal à trou c'est il n'existe pas soit il est faux et bien là ça veut dire que tu le passes sur trou c'est c'est le principe du boulet mais sauf que là on n'a pas un mot magique pour faire un bowling donc on s'oblige à écrire cette logique là et normalement en faisant ça bien il va checker si ces trous il va dire ben non c'est pas trop donc soit ça n'existe pas donc il dira que c'est pas trop soit effectivement il y aura pas de trou non enfin oui et si dans tous les cas contraire il renverra tout puisque pour déclencher cet événement ici il faut forcément avoir cliqué sur le bouton donc c'est que l'utilisateur veut mettre le Dark mode regardez là je clique et bien derrière je te demande d'aller dans local storage donc je vais je vais te dire if donc si jamais tu as le local storage dark mode machin chouette si jamais l'utilisateur veut le voir donc si jamais il est égal à trou s'il est écrit trou à l'intérieur alors qu'est-ce qu'on fait et bien on injecte la classe d'Arc donc on dit documents point body point que la liste et bien là tu nous mets la classe la fameuse classe dark ça veut dire quoi ben regardez là si je me mets hop là on est sur trou le Dark mode très bien hop je fais je ferme la page je vais sur cette page là je reviens et effectivement on est on sait on est passé sur on est passé sur trou hop là je la remets sur folle donc là je ne veux pas le Dark mode et voilà quand je reviens ben effectivement il y a pas le Dark mode donc voilà très intéressant le local storage pour stocker des petites choses comme ça après en général on utilise des cookies si on veut récupérer les données d'utilisateur enfin les sites aiment bien récupérer des données qu'est-ce qu'il a fait l'Utilisateur sur le Site etc ça c'est plus les cookies mais pour stocker des choses on va dire qu'on pas une énorme importance pour le pour avoir les données l'utilisateur en quelque sorte ben c'est bien de lui mettre dans le castorage puis c'est très rapide et il y a un très bon il y a beaucoup d'espace de stockage dans lequel storage donc c'est plutôt pas mal donc voilà bah on a fini j'espère que ça vous a plu cette vidéo si jamais vous n'allez plus loin avec moi à prendre beaucoup beaucoup plus de choses et bien sachez que j'ai des formations je vous les ai mis en dessous de la vidéo donc je vous laisse aller voir mon site de formation si jamais ça vous intéresse et puis je vous souhaite bon code et je vous dis à bientôt allez ciao