Le mode nuit en CSS et JavaScript (night mode)

[@emotionstv6721]

J'ai commencé la programmation sur youtube il y a déjà 5 mois. C'est avec vos vidéos que j'avais débuté. J'aime façon vous expliquez.❤

[@assoulakoulintea1077]

Bonjour. Nous attendons vivement votre cours en Nextjs.

[@alexbriot875]

Une suite et Fin de toute les parties et tu serais le GOAT. Cest a ce moment tu vois l'algorithme youtube est étrange, des vidéos moins explicite et moins complète que la tienne font l'argement plus de vue..... Disons juste que cest la vie. Ca arrive

[@BMtech24]

Supert merci ! je débute en JS et j'ai bien compris le principe du localStorage. tu explique vraiment bien

Merci à toi 😊

[@BMtech24]

Oui, et je me suis même amusé à mettre un id au H1 pour mettre un document.getElementById entre le if et le else suivie d'un hinnerHTML pour changer le titre qu'était "night mode" c'était vraiment top comme projet. Simple et efficace. J'espère pouvoir avoir d'autres projets pratiques facile et rapide && à intégrer pour les booléen etc
Au plaisir !

[@alexbriot875]

💯💫🙏Le meilleur enseignant sur youtube 👌✨ ou le meilleur tout court.🎊. mais malheureusement ses vidéos n'ont pas de suite et fin la plus part s'arrête à la partie 2 sans avoir de fin ou certains programmes n'ont même pas droit aux partie 2😞

Tout est sur mon site de formation : fromscratch.podia.com/

[@guillaumelartiste6450]

Excellent ! Simple et efficace. Merci !

[@ryanthibaux7011]

Salut ! J’ai acheter ta formation y’a pas mal de temps maintenant, je te remercie énormément je suis maintenant développeur web depuis 2 ans !!! Je voulais apprendre NextJS avec toi, as tu prévu une formation ? 🙏

Salut Ryan, non ce n'est pas prévu pour le moment mais bravo pour ta reconversion ! 😁😁

[@Diawobah86]

My boss🎉

[@TheKillerBuu]

j'avais un petit questions comment tu a des logo dans tes onglet de vs code genre css html js c'est une extensions ou c'est autre chose

Salut, c'est un plugin VS Code qui s'appelle Matrial Icon

[@TheKillerBuu]

Merci bcp juste petit notions pour le cour html est css(que j'ai pas encore fini) c'est incroyable tu est très explicite est grace a sa les information rentre plus facilement, TES LE GOAT

[@wapscode]

Personnellement je pense que c'est plus optimal d'utiliser des variable css un :root avec un data-theme=dakmode par exemple

[@rebecca-f9i]

avec un petit code pour expliquer en plus? s il te plait , pour l exemple...

[@wapscode]

@@rebecca-f9i Tu peux utiliser des variables CSS dans :root pour définir les couleurs par défaut. Ensuite, en utilisant un attribut comme data-theme="darkmode", tu peux les remplacer pour le mode sombre. Par exemple :
:root {
--background-color: white;
--text-color: black;
}
[data-theme="darkmode"] {
--background-color: #121212;
--text-color: white;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
Puis, en JS, tu bascules le thème avec :
document.body.toggleAttribute('data-theme', 'darkmode');
Ça permet de gérer les thèmes de manière simple et optimisée.

[@wapscode]

​@@rebecca-f9i Tu peux utiliser des variables CSS dans :root pour définir les couleurs par défaut. Ensuite, en utilisant un attribut comme data-theme="darkmode", tu peux les remplacer pour le mode sombre. Par exemple :
:root {
--background-color: white;
--text-color: black;
}
[data-theme="darkmode"] {
--background-color: #121212;
--text-color: white;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
Puis, en JS, tu bascules le thème avec :

[@wapscode]

​@@rebecca-f9i Pour gérer les thèmes, tu peux utiliser des variables CSS dans :root pour définir les couleurs par défaut. Par exemple, tu peux créer des variables comme --background-color et --text-color pour le mode clair. Ensuite, dans ton HTML, tu ajoutes un attribut data-theme="darkmode" à la balise , ce qui permet de changer les couleurs pour le mode sombre.
Exemple :
:root { --background-color: white; --text-color: black; }
[data-theme="darkmode"] { --background-color: #121212; --text-color: white; }
Ensuite, avec du JavaScript, tu peux basculer entre les deux thèmes avec cette ligne : document.body.toggleAttribute('data-theme', 'darkmode');. Ça permet de changer le style sans recharger la page et de rendre la gestion des thèmes beaucoup plus flexible.Pour plus de compréhension, n'hésite pas à faire tes propre recherches sur Google. 👍

[@frankkamgang6708]

Cool