Objectif Frontend. Comment installer facilement un switch jour / nuit (Darkmode)
Objectif Frontend. Comment installer facilement un switch jour / nuit (Darkmode)
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
Mise en page du site web
Leçon 2
Mise en place du détail des zones
Mise en place du détail des zones
Leçon 3
Mise en place d'un switch
Mise en place d'un switch
Leçon 4
Mise en forme du switch
Mise en forme du switch
Leçon 5
Finalisation du switch
Finalisation du switch
Leçon 6
On passe du sombre au clair et vis et versa
On passe du sombre au clair et vis et versa
Leçon 7
On ajoute des pages à notre site
On ajoute des pages à notre site
Table des matières
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