Thèmes sombre/clair

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 16 sur 27.

L'implémentation d'un bouton de basculement entre le thème sombre et le thème clair est une fonctionnalité courante sur les sites web modernes. Apprenons à créer un simple sélecteur de thème en utilisant JavaScript.

Tout d'abord, créez un bouton qui permettra de basculer entre les thèmes :

<button id="themeToggle">Theme Toggle</button>

Ensuite, ajoutons du CSS de base pour nos thèmes clair et sombre :

<style>
  :root {
    --background-color: #ffffff;
    --text-color: #333333;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
  }
  
  .dark-theme {
    --background-color: #222222;
    --text-color: #f5f5f5;
  }
</style>

Maintenant, ajoutons le JavaScript pour basculer entre les thèmes :


const themeToggle = document.getElementById('themeToggle');
  
themeToggle.addEventListener('click', function() {
  document.body.classList.toggle('dark-theme');
});

Lorsque vous cliquez sur le bouton, cela bascule la classe 'dark-theme' sur l'élément body.

Défi

Facile

À l'intérieur de l'écouteur d'événement click du bouton, ajoutez le code pour basculer la classe "dark-mode" sur l'élément body.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Dark/light themes</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Hygge ✨</h1>
    <button id="themeToggle" class="toggle-btn">Toggle Theme</button>
  </header>

  <main>
    <section class="intro">
      <img src="https://images.unsplash.com/photo-1519710164239-da123dc03ef4?auto=format&fit=crop&w=1350&q=80" alt="Cozy hygge scene" class="hero-img">
      <p>
        <strong>Hygge</strong> is a Danish concept that embodies coziness, comfort, and a sense of well-being.  
        It’s about enjoying life’s simple pleasures — candles, warm drinks, good company, and soft blankets.
      </p>
    </section>

    <section class="philosophy">
      <h2>The Philosophy</h2>
      <p>
        Hygge is less about things and more about atmosphere and feelings.  
        It’s creating moments of calm, warmth, and togetherness — a way to nurture happiness in everyday life.
      </p>
    </section>

    <section class="origin">
      <h2>Where It Comes From</h2>
      <p>
        Originating from Denmark, hygge reflects the Danish culture’s deep appreciation for balance, comfort,  
        and community. It’s often credited as one of the reasons why Denmark consistently ranks among the  
        happiest countries in the world.
      </p>
    </section>
  </main>

  <footer>
    <p>☕ Embrace hygge in your daily life.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>