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.
Table des matières de cette formation CSS (durée : 35m40s)
-
- Mise en place du code HTML 00:05:38
- Mise en forme générale de la page web 00:10:32
- Mise en forme des détails de la page web 00:09:29
- Mise en place du fonctionnement du switch 00:10:01
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Vraiment génial Carl le Darkmode !! J'ai appris encore de nouveaux concepts qui me seront très utiles. Au plaisir d'un nouveau tuto, Eric.
-
Encore un très joli css. Merci!
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le code source de ce tuto.
note moyenne
avis laissés