Chế độ tối cho website

Cách hoạt động

Chế độ tối là phép thuật gồm hai phần:

1. CSS chuẩn bị “bộ trang phục” thứ hai – quy tắc chỉ áp dụng khi trang có class dark.
2. JavaScript thêm hoặc bỏ class đó khi bấm. Và ghi lựa chọn vào bộ nhớ trình duyệt, để ngày mai vẫn còn.

Xem này: bộ trang phục tối trong CSS

Thêm vào cuối style.css:

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2 {
  color: #93c5fd;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
}

Đọc như thế này: “Khi body có class dark, các quy tắc này áp dụng.” Không có class thì không dùng gì cả.

Xem này: công tắc trong JavaScript

Thêm nút vào header (bên trong <nav>):

<button id="switch">🌙</button>

Và trong script.js:

const switchButton = document.getElementById("switch");

// When the page loads: remember what the visitor picked last time
if (localStorage.getItem("mode") === "dark") {
  document.body.classList.add("dark");
  switchButton.textContent = "☀️";
}

switchButton.addEventListener("click", () => {
  document.body.classList.toggle("dark");

  if (document.body.classList.contains("dark")) {
    localStorage.setItem("mode", "dark");
    switchButton.textContent = "☀️";
  } else {
    localStorage.setItem("mode", "light");
    switchButton.textContent = "🌙";
  }
});

Ba thứ mới:

• classList.toggle("dark") – “nếu có class thì bỏ, nếu không thì thêm.” Công tắc trong một dòng.
• classList.contains("dark") – “có class đó không?” (trả về true/false, tiện trong điều kiện).
• localStorage – sổ tay của trình duyệt. setItem ghi vào, getItem đọc ra. Mọi thứ lưu ở đây sống sót cả khi đóng trình duyệt. (Thực ra, chính website này cũng dùng nó để lưu tiến độ học của bạn!)

Đến lượt bạn 💪

1. Thêm bộ trang phục tối vào style.css – duyệt mọi màu (nền, header, thẻ card, footer, badge) và cho chúng phiên bản tối dưới body.dark.
2. Thêm nút công tắc vào header trên mọi trang và code vào script.js.
3. Thử: chuyển sang tối, đóng trình duyệt, mở lại website – phải mở thẳng vào chế độ tối.

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2,
body.dark h3 {
  color: #93c5fd;
}

body.dark header {
  background-color: #0f172a;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
  box-shadow: none;
}

body.dark footer {
  background-color: #0f172a;
}

body.dark a {
  color: #93c5fd;
}

Điều cần nhớ từ bài học này

• Chế độ tối = bộ trang phục CSS (body.dark) + JavaScript bật/tắt class.
• classList.toggle() thêm/bỏ class, classList.contains() kiểm tra.
• localStorage là bộ nhớ lâu dài của trình duyệt: setItem("key", "value") và getItem("key").

© 2026 Ing. Martin Polak / AlgoRhino · Điều khoản sử dụng nội dung