Chủ đề tối và sáng

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 16 trên 27.

Tạo nút chuyển đổi giao diện sáng và tối là một tính năng phổ biến trên các trang web hiện đại. Hãy cùng học cách tạo một công cụ chuyển đổi giao diện đơn giản bằng JavaScript.

Trước tiên, tạo một nút để chuyển đổi giữa các giao diện:

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

Tiếp theo, hãy thêm một chút CSS cơ bản cho giao diện sáng và tối:

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

Giờ, hãy thêm JavaScript để chuyển đổi giữa các giao diện:


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

Khi bạn nhấp vào nút, lớp 'dark-theme' trên phần tử body sẽ được bật hoặc tắt.

Thử thách

Dễ

Trong bộ lắng nghe sự kiện nhấp chuột của nút, hãy thêm code để bật/tắt lớp "dark-mode" trên phần tử body.

Tự làm thử

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