UI/UX

Dark Mode: Không chỉ là trend, mà là sự tôn trọng người dùng

Tại sao dark mode trở thành tiêu chuẩn của web hiện đại, và cách implement nó đúng cách với Tailwind CSS.

Thinkinh.

• 23 tháng 12, 2025 • 3 phút đọc

Dark Mode: Không chỉ là trend, mà là sự tôn trọng người dùng

Dark Mode — Hơn cả một giao diện

Bạn có để ý không? Hầu như mọi ứng dụng hiện đại đều có dark mode. Từ Twitter, Discord đến VS Code, GitHub… Dark mode đã trở thành expectation, không còn là nice-to-have.

Tại sao Dark Mode quan trọng?

1. Bảo vệ mắt

Nghiên cứu cho thấy dark mode có thể giảm eye strain, đặc biệt khi làm việc trong môi trường thiếu sáng.

2. Tiết kiệm pin

Với màn hình OLED/AMOLED, pixel đen = pixel tắt = tiết kiệm năng lượng. Có thể tiết kiệm đến 30% pin!

3. Accessibility

Một số người dùng có light sensitivity cần dark mode để sử dụng được thiết bị.

4. Aesthetic

Let’s be honest: dark mode looks cool. 😎

Implement Dark Mode với Tailwind CSS

Tailwind CSS v4 làm việc này cực kỳ đơn giản:

/* global.css */
@theme {
  --color-surface-light: #ffffff;
  --color-surface-dark: #0f0f0f;
}

body {
  @apply bg-white dark:bg-[#0f0f0f];
}

<!-- Toggle dark class on html element -->
<html class="dark">
  ...
</html>

JavaScript Toggle

const toggle = document.getElementById('theme-toggle');

toggle.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');
  
  // Persist preference
  const isDark = document.documentElement.classList.contains('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

Respect System Preference

const getThemePreference = () => {
  if (localStorage.getItem('theme')) {
    return localStorage.getItem('theme');
  }
  return window.matchMedia('(prefers-color-scheme: dark)').matches 
    ? 'dark' 
    : 'light';
};

Think-inh Insight

Dark mode không phải là "invert colors". Đó là một hệ thống design riêng biệt với các cân nhắc về contrast, depth, và readability.

Best Practices

Đừng dùng pure black (#000000) — Dùng dark gray như #0f0f0f hoặc #1a1a1a tự nhiên hơn
Giảm contrast cho text — Pure white trên pure black gây eye strain
Sử dụng elevation thay vì shadows — Trong dark mode, dùng màu sáng hơn cho các element “nổi”
Test color accessibility — Đảm bảo WCAG contrast ratio

Color Palette cho Dark Mode

Element	Light Mode	Dark Mode
Background	`#ffffff`	`#0f0f0f`
Surface	`#f9fafb`	`#1a1a1a`
Border	`#e5e7eb`	`#2a2a2a`
Text Primary	`#1f2937`	`#f5f5f5`
Text Secondary	`#6b7280`	`#9ca3af`

📌 Key Takeaway

Dark mode là expectation, không phải nice-to-have
Respect system preference + cho phép user toggle
Avoid pure black — use dark grays
Test accessibility và contrast ratios

Bạn team dark mode hay light mode? Comment bên dưới! 🌙

Chia sẻ bài viết:

Thinkinh.

Gen Z yêu code và yêu chữ. Viết blog như một cách để suy nghĩ rõ ràng hơn.

Tìm hiểu thêm về tôi →