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';
};

---

Best Practices

1. Đừng dùng pure black (#000000) — Dùng dark gray như #0f0f0f hoặc #1a1a1a tự nhiên hơn
2. Giảm contrast cho text — Pure white trên pure black gây eye strain
3. Sử dụng elevation thay vì shadows — Trong dark mode, dùng màu sáng hơn cho các element “nổi”
4. 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

---

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