Dans ce cours en ligne, je vous propose d'apprendre à installer un mode Dark Mode sur votre site. Nous verrons comment intégrer facilement un switch jour / nuit sur vos pages web.
Pourquoi proposer un mode Dark Mode sur votre site ?
Plusieurs avantages :
- Le mode nuit fatigue moins les yeux
- Ce mode est moins gourmand en énergie (les pixels sombres consommant moins).
- En termes de lisibilité certaines couleurs se voient mieux sur fond noir
En proposant cette fonctionnalité, vous améliorez ainsi l'expérience utilisateur de votre site !
Pour installer un Dark Mode, nous allons utiliser les langages HTML et CSS.
Le but de ce tuto issu de la collection "Objectif Frontend" est d'apprendre à mettre en place rapidement et facilement un switch sur une page web afin de venir manipuler les éléments HTML de la page en modifiant leur couleur.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je mets les codes de ce tuto à votre disposition.
Pour aller plus loin dans les connaissances utilisées dans ce tutoriel, je vous propose un tuto dédié à la connaissance des combinateurs en CSS.
Avis des apprenants