Cơ bản về chế độ sáng và tối

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 13 trên 35.

Chế độ tối/sáng là một tính năng phổ biến cho phép người dùng chọn bảng màu ưa thích. Hãy cùng triển khai nút chuyển đổi chế độ tối/sáng cơ bản bằng cách sử dụng biến CSS.

Đầu tiên, định nghĩa các biến màu cho chế độ sáng trong phần tử gốc và áp dụng chúng cho các phần tử khác nhau:

: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);
}

Tiếp theo, hãy tạo một lớp chế độ tối để ghi đè các biến này:

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

Bây giờ, lớp .dark-mode điều khiển giao diện. Khi thêm lớp này vào <body>, các biến sẽ thay đổi và mọi phần tử sử dụng chúng sẽ tự động cập nhật.

<body class="dark-mode">
<!-- Nội dung trang của bạn ở đây -->
</body>

Để chuyển đổi chế độ linh hoạt, chúng ta cần một chút trợ giúp từ ngôn ngữ khác có tên là JavaScript (JS) để thêm hoặc xóa lớp .dark-mode. Trong bài học này, bạn có thể tự kiểm tra bằng cách thêm hoặc xóa lớp trên thẻ <body>.

Thử thách

Dễ

Nhiệm vụ của bạn:

Thêm lớp .dark-mode bên trong phần <style>.
Ghi đè các biến CSS để đặt màu tối cho nền, văn bản, tiêu đề và nút.
Kiểm tra bằng cách thêm class="dark-mode" vào thẻ <body>.

Tự làm thử

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