Motywy ciemny i jasny

Część sekcji JavaScript w praktyce ścieżki HTML w Coddy. Lekcja 16 z 27.

Przełączanie między ciemnym i jasnym motywem to popularna funkcja nowoczesnych stron internetowych. Nauczmy się tworzyć prosty przełącznik motywu za pomocą JavaScript.

Najpierw utwórz przycisk, który będzie przełączać motywy:

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

Następnie dodajmy podstawowe style CSS dla jasnego i ciemnego motywu:

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

Teraz dodajmy JavaScript, aby przełączać motywy:


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

Po kliknięciu przycisku przełącza on klasę 'dark-theme' na elemencie body.

Wyzwanie

Łatwy

W procedurze nasłuchującej zdarzenia kliknięcia przycisku dodaj kod, który przełącza klasę "dark-mode" elementu body.

Spróbuj swoich sił

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