Comment - Basculer en mode sombre
Basculez entre les modes sombre et clair avec CSS et JavaScript.
Basculer la classe
Étape 1) Ajoutez du HTML :
Utilisez n'importe quel élément qui doit stocker le contenu pour lequel vous souhaitez basculer la conception. Dans notre exemple, nous utiliserons <body>
par souci de simplicité :
Exemple
<body>
Étape 2) Ajoutez CSS :
Donnez un style à l' <body>
élément et créez une .dark-mode
classe pour bascule :
Exemple
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
Étape 3) Ajoutez JavaScript :
Obtenez l' <body>
élément et basculez entre les .dark-mode
classes :
Exemple
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Conseil : consultez également Comment ajouter une classe .
Conseil : En savoir plus sur la propriété classList dans notre référence JavaScript.