Nhiều người tưởng làm chế độ tối (dark mode — phiên bản giao diện nền tối) chỉ là lấy bản sáng rồi đảo ngược: nền trắng thành đen, chữ đen thành trắng. Làm vậy gần như chắc chắn ra một bản tối chói mắt, màu nhấn rung lên như đèn neon, và chữ tạo quầng sáng khó đọc. Một bản tối tử tế cần được tính lại từng lớp màu, đúng nguyên tắc thị giác chứ không phải một phép nghịch đảo.
Vì sao không được đảo màu cơ học
Mắt người phản ứng với màu trên nền tối khác hẳn trên nền sáng. Cùng một sắc đỏ coral, đặt trên nền trắng thì dịu, đặt trên nền đen lại loé lên và “vibrate” (rung — viền màu nhoè ra). Cùng một độ chênh sáng, trên nền tối lại tạo cảm giác gắt hơn. Đảo màu cơ học bỏ qua toàn bộ những khác biệt này, nên kết quả luôn thô.
Bản tối là một chủ đề (theme — bộ màu thay thế) riêng, có hệ màu riêng, chứ không phải hàm số đảo ngược của bản sáng. Hiểu đúng điểm này là bước đầu để thiết kế dark mode cho ra hồn.
Chọn nền tối đúng: đừng dùng đen tuyền
Sai lầm phổ biến nhất là lấy #000000 làm nền. Đen tuyền tạo độ chênh tối đa với chữ trắng, gây quầng sáng (halo) quanh chữ và làm mắt mỏi nhanh. Material Design lấy nền gốc là xám rất đậm #121212 chứ không phải đen, vì nền xám cho phép thể hiện bóng đổ, chiều sâu và dải màu rộng hơn; trên nền đen thì bóng đổ gần như vô hình (theo Material Design dark theme).
Quy tắc thực tế:
- Nền nền (base) nằm quanh
#0E0E0E–#161616, không chạm#000000. - Chữ chính không dùng trắng tinh
#FFFFFFmà hạ xuống xám sáng như#E0E0E0để giảm gắt. - Riêng màn OLED có thể dùng nền sát đen để tiết kiệm pin, nhưng vẫn nên giữ chữ ở mức xám sáng.
Giảm độ bão hoà màu nhấn
Màu thương hiệu rực rỡ trên nền sáng thường quá no màu khi đặt lên nền tối. Material Design khuyến nghị dùng tông màu nhạt và đã giảm bão hoà (dải 200–50 trong bảng màu của họ) vì các tông này đọc rõ hơn trên nền tối, còn màu no màu sẽ rung và khó đọc.
Với web22.dev, coral #FF6986 dùng nguyên xi trên nền tối sẽ chói; ở bản tối nên hạ bão hoà và nâng nhẹ độ sáng để màu mềm lại mà vẫn nhận ra thương hiệu. Đây cũng là cách Web22 xử lý màu khi nhận thiết kế website có cả chế độ tối cho khách. Đây là lý do màu nhấn ở dark mode hầu như luôn là một biến thể riêng, không phải đúng mã màu của bản sáng.
Giữ tương phản đủ chuẩn
Giảm gắt không có nghĩa là giảm tương phản tới mức chữ mờ. Ngưỡng cần giữ vẫn theo WCAG:
| Đối tượng | Tỷ lệ tương phản tối thiểu | Nguồn |
|---|---|---|
| Chữ thường (body) | 4.5:1 | WCAG 2.x AA (SC 1.4.3) |
| Chữ lớn / tiêu đề | 3:1 | WCAG 2.x AA |
| Biểu tượng, viền nút, đồ hoạ mang nghĩa | 3:1 | WCAG 2.1 SC 1.4.11 (non-text contrast) |
WCAG 2.2 (bản hiện hành) bổ sung nhấn mạnh về độ rõ của khung lấy nét (focus visible) và kích thước vùng chạm, nên khi làm bản tối cần kiểm tra cả trạng thái hover, focus của nút, không chỉ trạng thái tĩnh.
Chiều sâu bằng lớp sáng dần, không bằng bóng đen
Trên nền sáng, vật nổi lên nhờ bóng đổ tối. Trên nền tối, bóng đổ gần như tàng hình, nên cách thể hiện độ nổi (elevation — độ nâng của bề mặt) đổi chiều: bề mặt càng nổi thì càng sáng hơn nền dưới nó. Material Design làm điều này bằng lớp phủ bán trong suốt màu sáng (elevation overlay), bề mặt nổi cao thì lớp phủ đậm hơn nên sáng hơn. Hiểu đơn giản: card nổi nằm trên nền nền sẽ là một sắc xám nhạt hơn một chút, kèm viền mảnh hoặc quầng sáng nhẹ thay cho bóng đen.
Dùng token cho cả hai chế độ
Đây là chỗ bản tối “đứng” được lâu dài. Thay vì gắn cứng mã màu vào từng thành phần, bạn đặt tên theo vai trò bằng design token (biến thiết kế — đơn vị nhỏ nhất lưu màu, cỡ chữ, khoảng cách), rồi mỗi chế độ gán một giá trị khác nhau cho cùng token:
:root {
--bg-surface: #FFFFFF;
--text-primary: #1A1A1A;
--accent: #FF6986;
}
[data-theme="dark"] {
--bg-surface: #121212;
--text-primary: #E0E0E0;
--accent: #FF8AA0; /* coral đã giảm bão hoà cho nền tối */
}Giao diện chỉ tham chiếu var(--bg-surface), var(--text-primary)… nên đổi chế độ chỉ là đổi tập giá trị token, cấu trúc không động tới. Cách đặt token theo vai trò (surface, text, accent, border) đúng tinh thần design token là gì và cách đặt tên cho hai chế độ.
Khi nào website nên có dark mode
Dark mode không bắt buộc với mọi site. Nó đáng làm khi: người dùng hay xem ban đêm hoặc lâu (đọc dài, dashboard, công cụ làm việc); sản phẩm có nhiều màn cần nhìn lâu; hoặc nhóm người dùng kỹ thuật mong đợi tính năng này. Với một landing ngắn ít người ở lại lâu, công sức làm và bảo trì hai bộ màu có thể không xứng. Nếu làm, hãy tôn trọng lựa chọn hệ điều hành qua prefers-color-scheme và cho người dùng tự bật/tắt.
Câu hỏi thường gặp
Dark mode có làm web nhanh hơn không?
Không trực tiếp. Trên màn OLED, nền tối tiết kiệm pin chút ít vì điểm ảnh đen gần như tắt, nhưng tốc độ tải trang không đổi.
Có cần làm bản tối riêng cho ảnh không?
Ảnh chụp giữ nguyên, nhưng ảnh minh hoạ/biểu tượng có nền trắng cứng nên có biến thể trong suốt hoặc đổi màu theo chế độ, tránh mảng trắng chói trên nền tối.
Tự đảo màu bằng filter CSS được không?
Dùng filter: invert() chỉ nên coi là cách chữa cháy. Nó đảo cả ảnh, làm sai màu thương hiệu và không kiểm soát được tương phản, nên không thay được một bộ token tối làm bài bản.
Nếu bạn cần dựng một bản tối đúng từ token tới component để đồng bộ với bản sáng, có thể tham khảo dịch vụ thiết kế UI/UX của Web22.