Dark Mode: Thiết Kế Giao Diện Tối Chuẩn

Dark mode (giao diện tối) dùng nền tối + chữ sáng — giảm mỏi mắt, tiết kiệm pin, và tạo cảm giác hiện đại. 82% người dùng smartphone bật dark mode (Android Authority 2025), và Google, YouTube, GitHub, Twitter đều cung cấp dark mode. Website không có dark mode năm 2026 cảm giác thiếu chuyên nghiệp với người dùng tech-savvy. Bài viết hướng dẫn thiết kế dark mode đúng chuẩn UX và accessibility.

Tại Sao Dark Mode Quan Trọng?

Color Palette Chuẩn Cho Dark Mode

Không dùng pure black (#000000) — quá tương phản với text trắng, gây mỏi mắt. Dùng dark gray:

CSS Implementation

/* CSS Custom Properties */
:root {
  --bg-primary: #FFFFFF;
  --bg-surface: #F5F5F5;
  --text-primary: #212121;
  --text-secondary: #757575;
  --accent: #7C3AED;
}

[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-surface: #1E1E1E;
  --text-primary: #E0E0E0;
  --text-secondary: #A0A0A0;
  --accent: #A78BFA;  /* sáng hơn cho dark bg */
}

/* Respect system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #121212;
    /* ... dark colors ... */
  }
}

5 Sai Lầm Thường Gặp

1. Dùng pure black (#000) + pure white (#FFF) — tương phản quá cao, gây mỏi mắt. Dùng dark gray + off-white.
2. Chỉ invert màu — đảo ngược light theme không tạo dark mode tốt. Cần redesign color hierarchy.
3. Quên hình ảnh — ảnh sáng trên nền tối chói mắt. Thêm opacity nhẹ hoặc border cho images trong dark mode.
4. Không lưu preference — người dùng toggle dark mode → reload trang → reset về light. Lưu vào localStorage.
5. Không test contrast ratio — text trên dark background phải đạt WCAG AA (4.5:1 cho text thường, 3:1 cho text lớn).

UX Best Practices

Toggle rõ ràng — icon sun/moon ở header, dễ tìm, dễ click. System preference first — mặc định theo OS setting (prefers-color-scheme), cho phép override. Transition mượt — transition: background-color 0.3s, color 0.3s tránh chuyển đổi giật. Test trên OLED — dark mode trên OLED khác LCD, test cả hai.

Chúng Tôi Xây Web tại Cái Răng, Cần Thơ thiết kế website với dark mode chuẩn UX — kết hợp thiết kế UX/UI hiện đại và accessibility đầy đủ.

Liên hệ tư vấn: Zalo 0817.771.184 | Hotline: 0817.771.184 | Form liên hệ