Mở đầu — vì sao bài này quan trọng
Nếu bạn mở điện thoại lúc này, khả năng cao là ứng dụng nhắn tin, mạng xã hội hay cả hệ điều hành của bạn đang chạy ở chế độ tối. Dark mode đã đi từ một "tính năng hay ho" trở thành một kỳ vọng mặc định của người dùng. Khi Instagram, YouTube, Facebook Messenger hay Zalo đều có dark mode, thì một sản phẩm không hỗ trợ nó bắt đầu trông thiếu chuyên nghiệp, thậm chí lỗi thời.
Nhưng đây là điều mà rất nhiều designer junior hiểu sai: dark mode không phải là "đảo ngược màu sắc". Bạn không thể lấy giao diện light mode, nhấn một nút "invert" và gọi đó là dark mode. Làm như vậy tạo ra những màn hình chói lóa, chữ cháy sáng, bóng đổ vô nghĩa và cảm giác rẻ tiền. Dark mode tử tế là một hệ thống thiết kế song song, có nguyên tắc riêng về độ tương phản, độ sâu, màu sắc và cảm xúc.
Trong bài này, chúng ta sẽ đi vào các nguyên tắc cốt lõi để thiết kế dark mode đúng chuẩn: từ lý do tồn tại của nó, cách xây dựng thang màu nền và màu chữ, cách xử lý độ sâu (elevation) khi không còn dùng bóng đổ được như trước, cho tới cách chọn màu thương hiệu sao cho không "đâm mắt". Đây là kiến thức bạn sẽ dùng ngay khi nhận yêu cầu "làm thêm dark mode cho app" — một yêu cầu gần như chắc chắn sẽ đến trong sự nghiệp của bạn.
Khái niệm cốt lõi
Tại sao dark mode tồn tại?
Có ba lý do chính khiến dark mode trở nên phổ biến, và hiểu chúng giúp bạn thiết kế có mục đích chứ không chạy theo phong trào.
Tiết kiệm pin trên màn hình OLED/AMOLED. Trên các màn hình này (phổ biến ở iPhone từ dòng X trở lên, Samsung Galaxy, hầu hết flagship Android), mỗi điểm ảnh tự phát sáng. Điểm ảnh màu đen tuyệt đối gần như tắt hoàn toàn, không tiêu thụ điện. Các nghiên cứu của Google (đo trên YouTube, Google Maps) cho thấy dark mode có thể tiết kiệm khoảng 30% pin ở độ sáng cao, và lên tới 60% ở mức sáng tối đa với nội dung chủ yếu là nền tối. Lưu ý: điều này không áp dụng cho màn hình LCD (đèn nền luôn bật), nên tiết kiệm pin chủ yếu là câu chuyện của điện thoại đời mới.
Giảm mỏi mắt trong môi trường thiếu sáng. Khi bạn dùng điện thoại trong phòng tối buổi đêm, một màn hình trắng lóa như đèn pin chiếu thẳng vào mắt. Nền tối phát ra ít ánh sáng hơn, giảm chói và giúp mắt dễ chịu hơn. Nhưng cần công bằng: trong môi trường sáng (văn phòng, ngoài trời), light mode lại dễ đọc hơn vì độ tương phản chữ đen trên nền trắng cao hơn. Vì vậy dark mode là lựa chọn tình huống, không phải "tốt hơn tuyệt đối".
Sở thích và bản sắc người dùng. Một khảo sát rộng rãi cho thấy khoảng 80% người dùng bật dark mode trên thiết bị của họ khi có tùy chọn, và tỷ lệ này còn cao hơn ở nhóm lập trình viên, designer, người làm việc nhiều với màn hình. Với nhiều người, dark mode đơn giản là đẹp hơn, "cool" hơn, và mang lại cảm giác tập trung.
Dark mode không phải là màu đảo ngược
Nguyên tắc nền tảng đầu tiên: đừng bao giờ dùng đen tuyệt đối (#000000) làm nền chính. Đen tuyệt đối tạo tương phản quá gay gắt với chữ trắng, gây hiện tượng "halation" — chữ như bị nhòe, rung khi đọc, đặc biệt với người bị loạn thị. Material Design của Google khuyến nghị dùng màu nền tối trung tính như #121212 thay vì đen thuần.
Tương tự, đừng dùng trắng tuyệt đối (#FFFFFF) cho chữ. Chữ trắng full trên nền rất tối cũng chói. Thay vào đó, dùng trắng ở độ mờ (opacity) khác nhau để tạo phân cấp: chữ chính khoảng 87% trắng, chữ phụ 60%, chữ bị vô hiệu hóa 38%. Cách này vừa mềm mắt, vừa tự nhiên tạo ra hệ thống phân cấp thị giác.
Elevation: độ sâu qua độ sáng, không phải bóng đổ
Ở light mode, chúng ta thể hiện độ cao (một card nổi lên trên nền) bằng bóng đổ. Nhưng trên nền tối, bóng đổ tối gần như vô hình. Giải pháp của dark mode là đảo ngược logic: bề mặt càng "cao", càng sáng hơn một chút. Nền gốc là #121212; một card đặt lên trên có thể là #1E1E1E; một modal cao hơn nữa là #242424. Material Design gọi đây là "elevation overlay" — càng lên cao, lớp phủ trắng mờ càng dày, bề mặt càng sáng. Đây là khác biệt tư duy quan trọng nhất giữa hai chế độ.
Màu thương hiệu và màu nhấn phải được "giảm bão hòa"
Màu thương hiệu rực rỡ vốn đẹp trên nền trắng thường trở nên chói và rung mắt trên nền tối. Nguyên tắc: trong dark mode, hãy dùng phiên bản nhạt hơn và ít bão hòa hơn của màu nhấn. Ví dụ, một màu xanh dương primary #1A73E8 ở light mode nên chuyển sang tông sáng nhạt hơn như #8AB4F8 trong dark mode để đảm bảo dễ đọc và không gây mỏi. Đây cũng là lý do bạn cần một bộ token màu riêng cho từng chế độ.
Tình huống thực tế
Ví dụ 1: Đội ngũ fintech Việt Nam và cái bẫy "invert nhanh"
Một startup ví điện tử ở TP.HCM (giả định, quy mô khoảng 30 người) nhận phản hồi liên tục từ người dùng đòi dark mode. Áp lực deadline lớn, đội thiết kế quyết định làm nhanh: dùng một plugin đảo màu tự động trên toàn bộ giao diện. Kết quả release ra là một thảm họa — logo thương hiệu màu cam bị đảo thành xanh dương lạ hoắc, biểu đồ số dư đảo màu khiến "màu xanh tăng, đỏ giảm" bị lộn ngược gây hiểu nhầm tài chính, và ảnh chụp thẻ ngân hàng của người dùng cũng bị đảo màu trông như âm bản.
Sau ba ngày với hàng trăm review một sao, đội phải gỡ tính năng. Họ làm lại từ đầu theo hướng token: định nghĩa background, surface, text-primary, brand... thành các biến riêng cho hai chế độ, giữ nguyên logo và ảnh, chỉ đổi màu nền và chữ có kiểm soát. Lần release thứ hai được đón nhận tích cực.
Bài học: đảo màu tự động phá vỡ ngữ nghĩa (semantics). Màu tăng/giảm, logo, hình ảnh nội dung phải được xử lý thủ công. Dark mode là công việc thiết kế, không phải một thao tác một nút.
Ví dụ 2: Grab và câu chuyện elevation trong app đặt xe
Hãy quan sát một app đặt xe quen thuộc như Grab khi ở dark mode. Bản đồ nền tối, còn tấm thẻ (bottom sheet) hiển thị thông tin chuyến đi trượt lên từ dưới có màu xám nhạt hơn nền bản đồ rõ rệt. Khi bạn mở thêm một hộp thoại xác nhận, hộp thoại đó lại sáng hơn một bậc nữa.
Nếu đội thiết kế chỉ dùng bóng đổ như light mode, tấm thẻ này sẽ "chìm" vào nền bản đồ tối và người dùng khó nhận ra ranh giới đâu là nội dung tương tác được. Bằng cách áp dụng nguyên tắc "cao hơn thì sáng hơn", mỗi lớp giao diện được tách bạch rõ ràng chỉ bằng chênh lệch độ sáng.
Bài học: trong dark mode, hệ thống elevation dựa trên độ sáng bề mặt là công cụ chính để tạo phân cấp không gian. Hãy thiết kế sẵn một thang 4–5 bậc surface và dùng nhất quán.
Ví dụ 3: Đội SaaS B2B và bài toán tương phản chưa đạt chuẩn
Một công ty SaaS phục vụ doanh nghiệp (giả định, sản phẩm quản lý kho) ra mắt dark mode và tự thấy "đẹp lung linh". Nhưng khi một khách hàng lớn yêu cầu tuân thủ tiêu chuẩn tiếp cận WCAG, đội QA đo lại và phát hiện phần chữ phụ màu xám #6B6B6B trên nền #121212 chỉ đạt tỷ lệ tương phản khoảng 2.9:1 — thấp hơn ngưỡng tối thiểu 4.5:1 cho chữ thường. Người dùng lớn tuổi và người thị lực kém gần như không đọc được các nhãn phụ.
Đội phải điều chỉnh chữ phụ lên sáng hơn (khoảng 60% trắng, tức xấp xỉ #9E9E9E) để đạt chuẩn. Điều thú vị: nhiều người vẫn nghĩ dark mode "dịu mắt hơn" nên mặc định là dễ tiếp cận, trong khi thực tế nền tối lại rất dễ rơi vào tình trạng tương phản thấp nếu không đo đạc.
Bài học: dark mode không miễn nhiễm với vấn đề tiếp cận. Luôn kiểm tra tỷ lệ tương phản chữ trên từng lớp surface, vì nền càng tối thì sai số càng dễ bị bỏ qua bằng mắt thường.
Hướng dẫn từng bước
Dưới đây là quy trình xây dựng dark mode có hệ thống, giả định bạn làm trong Figma và tư duy theo token.
Bước 1 — Xây thang màu nền (surface scale). Bắt đầu với nền gốc không phải đen thuần, ví dụ #121212. Tạo tiếp 3–4 bậc sáng dần cho các lớp cao hơn: #1E1E1E, #242424, #2C2C2C, #333333. Đặt tên ngữ nghĩa: surface/base, surface/raised, surface/overlay, surface/modal. Mỗi bậc tương ứng một mức elevation.
Bước 2 — Định nghĩa hệ chữ theo opacity. Thay vì chọn nhiều mã màu xám, hãy dùng trắng với các mức: text/primary = trắng 87%, text/secondary = trắng 60%, text/disabled = trắng 38%. Cách này giữ chữ luôn hài hòa trên mọi lớp surface.
Bước 3 — Chuyển hóa màu thương hiệu và màu nhấn. Với mỗi màu accent ở light mode, tạo một biến thể dark: sáng hơn, giảm bão hòa. Nếu bạn đã học về HSL, hãy giảm Saturation và tăng Lightness một chút. Kiểm tra để màu nhấn nổi trên nền tối nhưng không rung mắt.
Bước 4 — Định nghĩa màu ngữ nghĩa (semantic colors). Success, warning, error, info cần biến thể dark riêng. Đặc biệt lưu ý màu xanh lá và đỏ trong bối cảnh tài chính — giữ đúng nghĩa tăng/giảm, chỉ điều chỉnh độ sáng, tuyệt đối không hoán đổi.
Bước 5 — Ràng buộc bằng Figma Variables với hai mode. Tạo một collection màu có hai mode Light và Dark. Mỗi token (background, surface, text-primary, brand...) có một giá trị cho mỗi mode. Áp token vào component thay vì màu cứng. Khi đổi mode, cả file tự đổi theo.
Bước 6 — Kiểm tra tương phản. Với từng cặp chữ/nền quan trọng, dùng plugin như Stark hoặc Contrast để đo. Đảm bảo chữ thường đạt tối thiểu 4.5:1, chữ lớn 3:1. Đo trên từng lớp surface vì nền sáng lên sẽ đổi kết quả.
Bước 7 — Rà soát hình ảnh, biểu đồ, minh họa. Ảnh nội dung giữ nguyên. Biểu đồ cần bảng màu tối riêng để đường kẻ và số liệu vẫn đọc được. Icon dạng nét cân nhắc đổi màu, không đảo.
Bước 8 — Tôn trọng lựa chọn của hệ thống. Thiết kế để app đọc thiết lập của thiết bị (system preference) và có công tắc thủ công cho người muốn ghi đè. Đừng ép người dùng vào một chế độ duy nhất.
Lỗi thường gặp & mẹo
Lỗi: dùng đen thuần và trắng thuần. Đây là lỗi số một. #000000 nền và #FFFFFF chữ tạo tương phản 21:1 gây chói và halation. Mẹo: nền tối nhất nên quanh #121212, chữ sáng nhất quanh trắng 87%.
Lỗi: bê nguyên bóng đổ từ light mode. Bóng tối trên nền tối vô hình. Mẹo: dùng độ sáng bề mặt để thể hiện elevation; nếu vẫn muốn bóng, làm nó tinh tế hơn và kết hợp với chênh lệch surface.
Lỗi: quên giảm bão hòa màu nhấn. Màu rực trên nền tối gây rung mắt (chromostereopsis), nhất là đỏ và xanh dương đậm cạnh nhau. Mẹo: luôn tạo biến thể dark nhạt hơn cho accent.
Lỗi: đảo màu ngữ nghĩa và hình ảnh. Không bao giờ đảo logo, ảnh chụp, màu tăng/giảm tài chính. Mẹo: chỉ token hóa nền, surface, chữ, accent; phần còn lại xử lý riêng.
Lỗi: bỏ qua trạng thái hover/pressed. Trên nền tối, hiệu ứng nhấn thường là làm bề mặt sáng lên thêm chút, ngược với light mode làm tối đi. Mẹo: định nghĩa overlay state riêng cho dark.
Lỗi: cho rằng dark mode luôn dễ tiếp cận hơn. Nền tối dễ rơi vào tương phản thấp. Mẹo: đo đạc, đừng tin mắt.
Mẹo bổ sung: thiết kế light mode và dark mode song song ngay từ đầu bằng token, đừng để dark mode thành việc "làm sau". Sửa lại toàn bộ màu cứng về sau tốn gấp nhiều lần.
Bài tập thực hành
- Xây bộ token nền tảng. Trong Figma, tạo một collection Variables tên "Color" với hai mode Light và Dark. Định nghĩa tối thiểu các token:
background,surface-raised,surface-overlay,text-primary,text-secondary,border,brand. Điền giá trị hợp lý cho cả hai mode theo nguyên tắc trong bài.
- Chuyển đổi một màn hình có sẵn. Lấy một màn hình bạn đã thiết kế ở light mode (ví dụ màn hình danh sách sản phẩm hoặc màn hình profile). Áp token vào và tạo phiên bản dark mode. Ghi lại: bạn phải xử lý riêng những phần nào (ảnh, biểu đồ, logo, màu tăng/giảm)?
- Kiểm toán tương phản. Dùng plugin Stark hoặc Contrast đo ít nhất 5 cặp chữ/nền trong bản dark mode của bạn. Lập bảng: cặp màu — tỷ lệ tương phản — đạt/không đạt WCAG AA. Sửa những cặp chưa đạt.
- Thang elevation. Thiết kế một card, một modal và một tooltip chồng lớp lên nhau trong dark mode, chỉ dùng chênh lệch độ sáng surface (không dùng bóng) để phân tách. Kiểm tra xem mắt có phân biệt rõ ba lớp không.
Tóm tắt
Dark mode là một hệ thống thiết kế song song, không phải phép đảo màu. Nó tồn tại vì ba lý do thực tế: tiết kiệm pin trên màn hình OLED (khoảng 30% trở lên), giảm mỏi mắt trong môi trường tối, và sở thích áp đảo của người dùng (khoảng 80% bật khi có tùy chọn). Các nguyên tắc cốt lõi: tránh đen và trắng tuyệt đối, dùng nền quanh #121212 với chữ theo mức opacity; thể hiện độ sâu bằng độ sáng bề mặt thay vì bóng đổ; và giảm bão hòa màu nhấn để không gây rung mắt.
Ba tình huống thực tế cho thấy các bẫy phổ biến: đảo màu tự động phá vỡ ngữ nghĩa và hình ảnh, bỏ quên hệ elevation làm giao diện mất phân cấp, và ngộ nhận rằng dark mode đương nhiên dễ tiếp cận trong khi nó rất dễ rơi vào tương phản thấp. Quy trình đúng là token hóa ngay từ đầu với Figma Variables hai mode, đo tương phản trên từng lớp surface, và luôn tôn trọng lựa chọn của người dùng. Nắm vững những nguyên tắc này, bạn sẽ biến yêu cầu "làm thêm dark mode" từ một cơn ác mộng thành một phần tự nhiên trong hệ thống thiết kế của mình.