👋 Chào mừng đến với Blog - Thành Nam Nguyễn

Cách làm dark mode “chuẩn chỉnh” với CSS và JavaScript

Cách làm dark mode “chuẩn chỉnh” với CSS và JavaScript

Thành Nam Nguyễn's photo
Thành Nam Nguyễn
06/12/2025·

3 phút đọc

Front-end

Dark mode đã trở thành một phần gần như “phải có” trong mọi website hiện đại. Không chỉ giúp giao diện trông chuyên nghiệp hơn, dark mode còn giảm mỏi mắt khi đọc nội dung ban đêm và tiết kiệm pin cho các thiết bị màn hình OLED.

Trong bài viết này, mình sẽ chia sẻ cách làm dark mode chuẩn chỉnh với CSS và JavaScript.

Dark Mode là gì và tại sao quan trọng?

Dark mode (chế độ tối) là giao diện nền tối với chữ sáng, giúp:

  • Giảm ánh sáng xanh → ít mỏi mắt

  • Tập trung hơn khi đọc

  • Tiết kiệm pin

  • Website trông “xịn” hơn nhiều

  • Người dùng chủ động chọn theme phù hợp

Việc build dark mode bằng CSS và JavaScript rất linh hoạt và đơn giản.

Bước 1: Chuẩn bị CSS Variables cho theme

Cách đơn giản nhất để tạo dark mode là sử dụng CSS Variables.

Ví dụ:

/* Light theme (default) */
:root {
  --bg-color: #ffffff;
  --text-color: #222222;
  --primary-color: #007bff;
}

/* Dark theme */
.dark {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --primary-color: #4dabf7;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

Lợi ích khi dùng CSS Variables:

  • Dễ bảo trì

  • Dễ mở rộng cho multiple themes

  • Không cần sửa nhiều class CSS

Bước 2: Thêm nút chuyển đổi (Toggle Button)

Bạn cần một toggle nhỏ để người dùng đổi theme.

<button id="theme-toggle">Toggle Dark Mode</button>

Bước 3: Viết JavaScript để bật/tắt Dark Mode

const toggleBtn = document.getElementById("theme-toggle");
const body = document.body;

toggleBtn.addEventListener("click", () => {
  body.classList.toggle("dark");
});

Như vậy là bạn đã build được dark mode chạy ngon lành.

Bước 4: Lưu trạng thái Dark Mode bằng localStorage

Nhiều bạn tạo được dark mode nhưng quên mất lưu trạng thái, khiến khi reload trang theme bị reset. Điều này gây khó chịu cho người dùng.

Cách lưu trạng thái bằng JavaScript:

const body = document.body;
const toggleBtn = document.getElementById("theme-toggle");

// Load theme khi trang mở
const savedTheme = localStorage.getItem("theme");

if (savedTheme === "dark") {
  body.classList.add("dark");
}

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

  // Lưu theme
  if (body.classList.contains("dark")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

Khi reload trang → theme vẫn giữ nguyên.

Bước 5: Tự động nhận dark mode từ hệ điều hành

Nhiều hệ điều hành (Android, iOS, Windows, macOS) có dark mode system-level.

Bạn có thể “đồng bộ” theo hệ điều hành bằng CSS:

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
  }
}

Hoặc bằng JS:

if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
  document.body.classList.add("dark");
}

Kết hợp localStorage + system theme = trải nghiệm cực mượt.

Tips giúp Dark Mode của bạn “chuẩn UX”

1. Đảm bảo độ tương phản (contrast) chữ đủ cao

Dùng tool kiểm tra contrast: https://webaim.org/resources/contrastchecker/

2. Đừng dùng pure black (#000)

Dễ gây chói → Dùng #121212 hoặc #1a1a1a.

3. Chú ý hình ảnh

Với ảnh PNG:

  • Dùng filter invert nếu cần

  • Tạo 2 phiên bản light/dark cho logo

Ví dụ:

.dark img.logo {
  filter: brightness(0) invert(1);
}

4. Đừng quên setting theme-color cho SEO

Chrome sẽ đổi màu thanh mobile browser.

<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">

5. Không toggle bằng CSS alone nếu muốn lưu theme

Nếu không dùng JS → không lưu được trạng thái.

Dark mode không hề khó. Chỉ cần vài dòng CSS + JavaScript là website của bạn đã có thêm một tính năng cực kỳ hiện đại và hữu ích.

CSSJavaScriptdark mode