Dark/Light Themes

Teil des Abschnitts JavaScript in Action der HTML-Journey von Coddy — Lektion 16 von 27.

Die Implementierung eines Wechsels zwischen dunklem und hellem Design ist eine gängige Funktion auf modernen Websites. Lernen wir, wie man einen einfachen Theme-Switcher mit JavaScript erstellt.

Erstellen Sie zuerst eine Schaltfläche, die zwischen den Themes umschaltet:

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

Als Nächstes fügen wir ein paar grundlegende CSS-Regeln für unsere hellen und dunklen Themes hinzu:

<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>

Fügen wir nun das JavaScript hinzu, um zwischen den Themes zu wechseln:


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

Wenn Sie auf die Schaltfläche klicken, wird die 'dark-theme'-Klasse auf dem body-Element umgeschaltet.

Aufgabe

Einfach

Füge innerhalb des Click-Event-Listeners des Buttons Code hinzu, um die Klasse "dark-mode" auf dem body-Element umzuschalten.

Probier es selbst

<!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>