Aller au contenu

🌑 Dark Vador

Le but de cet exercice est de basculer le thème du site entre clair et sombre en cliquant sur une case à cocher (checkbox).

Au chargement de la page, la balise <html> possède déjà l’attribut data-bs-theme="dark".

Résultat attendu

Indices

Cherchez addEventListener, querySelector, getAttribute et setAttribute dans l'aide mémoire.

Qui sait, ça pourrait peut-être vous être utile 😜

Instructions

  • Ouvrez le CodePen de départ : https://codepen.io/tim-momo/pen/zYVyYJp
  • Cliquez sur Fork afin de créer votre propre copie du projet
  • En JavaScript, sélectionnez la case à cocher avec querySelector.
  • Ajoutez un événement click dessus avec addEventListener.
  • Dans la fonction de l’événement, changez l’attribut data-bs-theme sur la balise <html> :
    • dark : pour activer le mode sombre
    • light : pour revenir au mode clair