Javascript Moderne : Ajouter une version Dark Mode d'un site
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Javascript Moderne : Ajouter une version Dark Mode d'un site

Carl Brison
20,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto vidéo dédié à la pratique du JavaScript moderne, nous allons apprendre à réaliser un mode sombre (Dark Mode) pour vos pages web.
Le mode sombre est utilisé pour améliorer l'expérience utilisateur. Notamment pour baisser la fatigue visuelle dans certaines conditions d'éclairage et même de limiter la consommation en énergie de son écran.

Au programme de ce tuto "mode sombre" grâce au Javascript Moderne

Voici les compétences abordées dans ce cours en ligne :

  • création d'une version claire (Light Mode),
  • création d'une version sombre (Dark Mode),
  • mise en place d'un bouton à bascule (Switch) pour passer d'un mode à l'autre,
  • mémorisation du choix de l'utilisateur pour conserver son choix sur les pages du site et pendant d'autres sessions de navigation (utilisation du storageLocal ou d'un cookie).

À la fin de ce cours, vous serez autonome pour ajouter un thème Dark Mode sur vos sites Internet.

Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Pour suivre cette formation dans de bonnes conditions, il est recommandé de connaître :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en page du site web
Leçon 2
Mise en place du détail des zones
Leçon 3
Mise en place d'un switch
Leçon 4
Mise en forme du switch
Leçon 5
Finalisation du switch
Leçon 6
On passe du sombre au clair et vis et versa
Leçon 7
On ajoute des pages à notre site

Plan détaillé du cours

Leçon 1Mise en page du site web
12m01
Leçon 2Mise en place du détail des zones
14m51
Leçon 3Mise en place d'un switch
05m09
Leçon 4Mise en forme du switch
11m36
Leçon 5Finalisation du switch
05m56
Leçon 6On passe du sombre au clair et vis et versa
13m08
Leçon 7On ajoute des pages à notre site
03m15
Leçon 8On met en place la mémoire du storageLocal
09m19
Leçon 9On utilise la mémoire du storageLocal
07m05
Leçon 10On met en place les cookies
06m36
Leçon 11Conclusion
02m10

Aperçus

Avis des apprenants

Détail des avis
32
Apprenants
4
Commentaires
5/5
Note moyenne
5/5
4
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 29/04/2025
Merci Carl pour ce cours sur l’ajout d'une version Dark Mode sur un site en JavaScript. 🌙☀️ J’ai trouvé votre explication des deux méthodes – en localStorage et avec les cookies – particulièrement claire et pédagogique ; cela m’a permis de bien comprendre comment mémoriser le choix utilisateur à travers différentes sessions. L’utilisation du switch interactif et la gestion dynamique des classes active rendent l’expérience très agréable à suivre et à reproduire. Bravo pour la qualité et la fluidité de vos démonstrations ! Validé 100%. ✅
Carl Brison
Carl Brison
Merci beaucoup Alain, c'est vraiment très gentil ;-)
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 11/03/2025
J'aime beaucoup le choix entre Cookie et LocalStorage. Le choix est roi. Merci
Carl Brison
Carl Brison
Absolument! Merci beaucoup pour votre commentaire ;-)
Valérie Arno
Valérie Arno
Publié le 06/02/2024
C'est vraiment chouette de pouvoir modifier ainsi l'affichage du site en le faisant basculer du mode jour au mode nuit :-) Je me suis toujours demandée comment on pouvait faire ça quand je le voyais sur les sites web. Maintenant je sais. Merci Carl pour cette grande nouveauté. C'est quand même bien javaScript quand on sait l'utiliser. ;-)
Carl Brison
Carl Brison
Absolument ! Oui JavaScript est super bien pour rendre nos pages web plus vivantes et plus dynamiques, avec très peu de savoir. Merci beaucoup pour votre commentaire très gentil et je suis ravi de vous relire ;-)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

Que contient le fichier source ?

Le code complet de l'exercice

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard

Prix d'achat : 20,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1472 tutos gratuits

Notre politique de protection des données