Tại sao user thích dark mode?
- Dễ chịu cho mắt: giảm ánh sáng trắng khi làm việc ban đêm.
- Tiết kiệm pin: đặc biệt trên màn OLED, pixel đen tiêu thụ ít điện.
- Thẩm mỹ: nhiều người thấy dark mode “ngầu” và hiện đại.
- Cá nhân hóa: user thích được chọn giao diện theo sở thích.
Những nỗi đau của dev khi làm dark mode
- Quản lý màu sắc: phải maintain 2 bộ màu (light & dark). Nếu design không chuẩn, dễ lỗi contrast.
- Hình ảnh & logo: logo tối hợp light mode, nhưng mất nét khi sang dark mode → cần nhiều phiên bản.
- CSS phức tạp: phải dùng CSS variable, hoặc theme switcher, tăng gấp đôi khối lượng style.
- Kiểm thử: phải test tất cả component ở cả 2 mode, bug dễ nhân đôi.
- Performance: nếu switch theme bằng JS runtime, dễ gây flash trắng/đen khi load.
Ví dụ code dark mode với CSS variables
:root {
--bg: #ffffff;
--text: #111111;
}
[data-theme="dark"] {
--bg: #111111;
--text: #f1f1f1;
}
body {
background: var(--bg);
color: var(--text);
}
Cách này đơn giản nhưng yêu cầu tất cả component đều dựa trên variable. Nếu có phần tử hard-code màu, sẽ bị “lệch mode”.
Dark mode và vấn đề UX
Không phải lúc nào dark mode cũng tốt. Nhiều nghiên cứu chỉ ra rằng khi đọc text dài (article, ebook), light mode cho khả năng đọc tốt hơn. Dark mode thích hợp cho môi trường code, dashboard, hoặc giải trí, nhưng không hẳn phù hợp mọi nội dung.
Các cách triển khai dark mode
- CSS media query:
@media (prefers-color-scheme: dark)tự động theo hệ thống user. - Toggle thủ công: user có nút switch light/dark.
- Kết hợp: mặc định theo system, user vẫn override bằng toggle.
Bảng so sánh: Dark mode vs Light mode
| Tiêu chí | Dark mode | Light mode |
|---|---|---|
| Độ dễ chịu cho mắt | Tốt hơn trong môi trường thiếu sáng, ban đêm | Tốt hơn khi đọc ngoài trời hoặc ánh sáng mạnh |
| Tiêu thụ pin | Tiết kiệm pin trên màn OLED | Không tiết kiệm bằng dark mode |
| Khả năng đọc nội dung dài | Dễ mỏi mắt khi đọc nhiều text dài | Rõ ràng, dễ đọc khi văn bản nhiều |
| Tính thẩm mỹ | Hiện đại, “ngầu”, hợp code/dashboard | Truyền thống, sáng sủa, quen thuộc |
| Phù hợp ngữ cảnh | App mạng xã hội, code editor, dashboard | Website tin tức, ebook, blog đọc dài |
| Thách thức cho dev | Quản lý màu sắc, ảnh/logo, test gấp đôi | Dễ triển khai, ít rủi ro UI |
Case study vui: Khi Facebook bật dark mode
Khi Facebook tung dark mode, nhiều người dùng hào hứng vì giao diện “ngầu” và dịu mắt hơn. Nhưng phía sau là hàng ngàn component phải chỉnh lại. Team UI phải test từng nút, từng tooltip, từng icon xem có “chìm nghỉm” trong nền đen không. Có những trường hợp logo đối tác trắng trên nền sáng thì đẹp, nhưng sang dark mode lại biến mất hoàn toàn.
Kết quả là hàng tháng trời dev UI phải “chạy nước rút” chỉ để đảm bảo mọi thứ trông ổn cả ở light lẫn dark. Dark mode khiến user thích thú, nhưng với dev, đó thực sự là một cuộc đại tu toàn hệ thống.
Kết luận
User nghiện dark mode vì thẩm mỹ và trải nghiệm thoải mái, nhưng dev phải đối mặt với nhiều thách thức kỹ thuật. Giải pháp là chuẩn hóa từ đầu: dùng CSS variables, thiết kế logo/icon đa nền, và test ở cả hai mode. Dark mode không còn là “nice-to-have” mà là một phần không thể thiếu trong UX hiện đại.
Bình luận