Dark mode implementation best practices?

Question

Luyện Phỏng Vấn IT · Accepted Answer

Dùng CSS custom properties cho tất cả màu — khai báo --bg: #fff; --text: #1a1a1a ở :root, override trong dark mode.

Hai cách detect:
- @media (prefers-color-scheme: dark) — tự động theo system setting
- Class-based toggle (.dark trên <html>) — cho user tự chọn + lưu vào localStorage

Color palette: dùng oklch để perceived brightness đồng đều, kiểm tra contrast WCAG AA (4.5:1). Tránh pure black (#000) cho background — dùng dark gray (#1a1a1a) để giảm mỏi mắt.