Les bases du mode sombre/clair

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 13 sur 35.

Le mode sombre/clair est une fonctionnalité populaire qui permet aux utilisateurs de choisir leur palette de couleurs préférée. Implémentons un basculement de mode sombre/clair basique en utilisant des variables CSS.

Tout d'abord, définissez les variables de couleur du mode clair dans l'élément racine et appliquez-les aux différents éléments :

:root {
  --background-color: #ffffff;
  --text-color: #333333;
  --heading-color: #000000;
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
h1, h2, h3 {
  color: var(--heading-color);
}

Ensuite, créez une classe de mode sombre qui surchargera ces variables :

.dark-mode {
  --background-color: #333333;
  --text-color: #f5f5f5;
  --heading-color: #ffffff;
}

Maintenant, la classe .dark-mode contrôle le thème — lorsque cette classe est ajoutée à <body>, les variables changent et tous les éléments qui les utilisent se mettent à jour automatiquement.

<body class="dark-mode">
<!-- votre contenu de page ici -->
</body>

Pour changer de mode dynamiquement, nous avons besoin d'un peu d'aide d'un autre langage appelé JavaScript (JS) pour ajouter ou supprimer la classe .dark-mode. Dans cette leçon, vous pouvez le tester manuellement en ajoutant ou en supprimant la classe sur la balise <body>.

Défi

Facile

Votre tâche :

Ajoutez une classe .dark-mode à l'intérieur de la section <style>.
Surchargez les variables CSS pour définir des couleurs sombres pour l'arrière-plan, le texte, les titres et les boutons.
Testez-le en ajoutant class="dark-mode" à la balise <body>.

Aide-mémoire

Utilisez des variables CSS pour implémenter des thèmes de mode sombre/clair. Définissez les variables du mode clair dans :root :

:root {
  --background-color: #ffffff;
  --text-color: #333333;
  --heading-color: #000000;
}

Appliquez les variables aux éléments :

body {
  background-color: var(--background-color);
  color: var(--text-color);
}
h1, h2, h3 {
  color: var(--heading-color);
}

Créez une classe de mode sombre qui remplace les variables :

.dark-mode {
  --background-color: #333333;
  --text-color: #f5f5f5;
  --heading-color: #ffffff;
}

Basculez entre les thèmes en ajoutant/supprimant la classe .dark-mode à l'élément <body> :

<body class="dark-mode">

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Dark/Light Mode Basics</title>
  <style>
    /* Default light theme */
    :root {
      --background-color: #f0f4f8;
      --text-color: #222222;
      --heading-color: #003366;
      --button-bg: #ffcc00;
      --button-text: #000000;
    }

    body {
      background-color: var(--background-color);
      color: var(--text-color);
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: var(--heading-color);
      color: white;
      padding: 2rem;
      text-align: center;
    }

    header h1 {
      margin: 0;
      font-size: 2rem;
    }

    main {
      padding: 2rem;
    }

    h2 {
      color: var(--heading-color);
      margin-top: 1.5rem;
    }

    p {
      line-height: 1.6;
    }

    .button {
      display: inline-block;
      margin-top: 1rem;
      padding: 0.75rem 1.5rem;
      background-color: var(--button-bg);
      color: var(--button-text);
      border: none;
      border-radius: 5px;
      text-decoration: none;
      font-weight: bold;
      cursor: pointer;
    }

    footer {
      background-color: var(--heading-color);
      color: white;
      text-align: center;
      padding: 1rem;
      margin-top: 2rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Olympic Games 2025</h1>
    <p>Celebrating sports, unity, and excellence</p>
  </header>

  <main>
    <h2>Top Sports</h2>
    <p>From track and field to swimming and gymnastics, the Olympics showcase the best athletes in the world.</p>
    <a href="#" class="button">See Medal Winners</a>

    <h2>Host Cities</h2>
    <p>Explore the exciting host cities where athletes come together to compete at the highest level.</p>
    <a href="#" class="button">Learn More</a>

    <h2>History</h2>
    <p>The Olympic Games have a rich history dating back to ancient Greece, promoting peace, friendship, and fair competition.</p>
  </main>

  <footer>
    &copy; 2025 Olympic Games. All rights reserved.
  </footer>
</body>
</html>