Chuyển đổi Dark/Light Mode với CSS Variables và JavaScript

Cách hiện đại nhất là dùng CSS Custom Properties (variables) để định nghĩa màu sắc, sau đó toggle class trên body hoặc :root.

Ví dụ mã nguồn (Cải tiến với CSS Variables)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  :root {
    --bg-color: white;
    --text-color: black;
    --btn-border: green;
  }
  .dark-mode {
    --bg-color: black;
    --text-color: white;
    --btn-border: #4ade80;
  }
  body {
    padding: 25px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 25px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.3s, color 0.3s; /* Mượt khi chuyển */
  }
  .toggleButton {
    padding: 12px;
    font-size: 18px;
    border: 2px solid var(--btn-border);
    background: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>Toggle Dark/Light Mode</h1>
<button class="toggleButton" id="toggleBtn">Chuyển đổi chế độ tối</button>
<h2>Nhấn nút trên để chuyển đổi</h2>
<script>
  document.getElementById("toggleBtn").addEventListener("click", () => {
    document.body.classList.toggle("dark-mode");
    // Lưu tùy chọn
    localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));
  });
  // Khôi phục tùy chọn
  if (localStorage.getItem("darkMode") === "true") {
    document.body.classList.add("dark-mode");
  }
</script>
</body>
</html>

Ưu điểm của CSS Variables

• Định nghĩa màu ở một nơi (:root), dễ bảo trì
• Tự động cập nhật tất cả element dùng variable
• Hỗ trợ transition mượt khi chuyển theme
• Có thể mở rộng: nhiều theme (blue, green, high-contrast...)

Lưu ý

Ví dụ gốc dùng toggle class trực tiếp thay đổi background-color/color. Cách CSS Variables linh hoạt hơn cho dự án thực tế.