Cách thêm chế độ tối vào website hoặc ứng dụng (không bị chớp trắng)

Để thêm chế độ tối, hãy định nghĩa màu sắc là các token có tên (nền, chữ, bề mặt, viền, màu nhấn) thay vì giá trị viết cứng, gán cho mỗi token một giá trị sáng và một giá trị tối, rồi chuyển giữa chúng bằng đặc tính media CSS prefers-color-scheme để website theo cài đặt hệ thống của khách truy cập. Nếu bạn cũng muốn có nút chuyển thủ công, hãy lưu lựa chọn trong trình duyệt và áp dụng bằng một script inline nhỏ trong phần head của trang để không bị chớp trắng khi tải. Sau đó kiểm tra độ tương phản, hình ảnh và biểu đồ ở cả hai giao diện. Trong một công cụ tạo ứng dụng bằng AI, một prompt rõ ràng có thể làm hầu hết các việc này; phần kiểm tra mới quyết định chất lượng.

Hai cách tiếp cận

Cách tiếp cận	Hoạt động thế nào	Phù hợp với	Đánh đổi
Theo hệ thống	Đặc tính media CSS `prefers-color-scheme` chọn sáng hoặc tối	Website đơn giản, không cần giao diện điều khiển	Khách truy cập không thể chọn khác với cài đặt thiết bị của họ
Nút chuyển + mặc định theo hệ thống	Bắt đầu từ cài đặt hệ thống; một công tắc Sáng / Tối / Hệ thống ghi đè và được ghi nhớ	Ứng dụng mọi người dùng thường xuyên	Cần một chút JavaScript, và phải giải quyết vấn đề chớp khi tải

Hầu hết các ứng dụng hoạt động tốt nhất với cách thứ hai: tôn trọng hệ thống theo mặc định, và cho phép người dùng ghi đè.

Bắt đầu với các token màu

Chế độ tối rất khó làm khi màu được rải rác trong mã dưới dạng white, #333 và gray-100. Nó trở nên dễ khi mọi màu đều đến từ một tập nhỏ các token có tên:

Token	Sáng	Tối
`background`	trắng gần như tinh khiết	xám rất tối
`surface` (thẻ, menu)	trắng	xám tối hơi sáng hơn
`text`	đen gần như tuyệt đối	trắng ngà
`text-muted`	xám vừa	xám vừa nhưng sáng hơn
`border`	xám nhạt	xám tối có chút tương phản
`accent`	màu thương hiệu của bạn	thường là phiên bản sáng hơn hoặc bớt bão hòa

Mỗi thành phần dùng tên token. Khi đó việc chuyển giao diện chỉ là đổi một bộ giá trị, không phải sửa từng thành phần.

Một số mẹo cho bảng màu tối:

Tránh đen tuyền và trắng tuyệt đối cho các vùng lớn; xám rất tối và trắng ngà dễ đọc hơn.
Thể hiện chiều sâu bằng các bề mặt sáng hơn, không phải bóng đổ — bóng đổ hầu như không thấy trên nền tối.
Làm dịu bớt các màu thương hiệu rực rỡ; chúng có thể phát sáng khó chịu trên nền tối.
Giữ độ tương phản đọc được. Mức AA của WCAG yêu cầu tối thiểu 4,5:1 cho văn bản thông thường. Chữ xám nhạt thường không đạt trong giao diện tối.

Với Tailwind CSS

Tailwind là công cụ tạo kiểu mặc định trong nhiều ứng dụng xây bằng AI. Theo tài liệu chế độ tối của Tailwind, biến thể dark: mặc định dùng prefers-color-scheme, nên các lớp như bg-white dark:bg-gray-900 theo cài đặt hệ thống mà không cần thêm gì.

Để có nút chuyển thủ công trong Tailwind v4, tài liệu hướng dẫn chuyển biến thể sang một class trên phần tử cha:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Sau đó ứng dụng thêm hoặc xóa class dark trên phần tử gốc. Tài liệu cũng gợi ý một script inline trong head để áp dụng lựa chọn đã lưu (hoặc cài đặt hệ thống) trước khi trang được vẽ — đúng là cách tránh hiện tượng chớp.

Tránh chớp trắng

Hiện tượng chớp xảy ra vì trang được vẽ ở chế độ sáng, rồi JavaScript tải, đọc lựa chọn đã lưu và chuyển sang tối. Cách khắc phục:

Đặt một script inline nhỏ trong phần head để đọc giao diện đã lưu và đặt class trên phần tử gốc trước khi có gì được hiển thị.
Đặt thuộc tính CSS color-scheme cho từng giao diện để các phần do trình duyệt vẽ (thanh cuộn, điều khiển biểu mẫu) khớp nhau.
Đặt màu nền rõ ràng cho trang ở cả hai giao diện.
Nếu ứng dụng được render trên máy chủ, hãy đảm bảo máy chủ và trình duyệt thống nhất giao diện ban đầu, nếu không trang có thể render lại và bị nhấp nháy.

Các prompt mẫu

Thiết lập đầy đủ:

Thêm chế độ tối. Trước tiên thay các màu viết cứng bằng token giao diện (nền, bề mặt, chữ, chữ phụ, viền, màu nhấn) với giá trị sáng và tối. Mặc định theo cài đặt hệ thống của khách truy cập. Thêm công tắc giao diện trên header với các lựa chọn Sáng, Tối và Hệ thống, ghi nhớ lựa chọn trong localStorage, và áp dụng bằng một script inline trong head để không bị chớp trắng khi tải. Đặt color-scheme cho từng giao diện. Giữ nguyên thiết kế sáng hiện tại.

Sửa những gì còn lại:

Kiểm tra mọi trang ở chế độ tối và sửa: chữ có độ tương phản thấp (hướng tới ít nhất 4,5:1), nền trắng viết cứng, viền biến mất, biểu đồ có chữ tối trên nền tối, và logo bị mất. Không thay đổi giao diện sáng.

Hình ảnh và biểu đồ:

Dùng phiên bản logo sáng cho chế độ tối. Làm cho trục, lưới và nhãn của biểu đồ dùng các token giao diện. Thêm viền mờ cho ảnh chụp màn hình ở chế độ tối để chúng không hòa vào nền.

Từng bước

Kiểm tra màu sắc. Tìm các màu viết cứng và thay bằng token. Đây là phần lớn công việc.
Định nghĩa giá trị tối cho từng token.
Theo hệ thống bằng prefers-color-scheme (hoặc mặc định dark: của Tailwind).
Thêm nút chuyển nếu bạn muốn: Sáng, Tối, Hệ thống. Lưu lựa chọn trong trình duyệt; với ứng dụng yêu cầu đăng nhập, bạn cũng có thể lưu vào hồ sơ người dùng.
Ngăn chớp bằng script inline trong head và color-scheme.
Kiểm tra các phần khó: logo, biểu tượng, hình ảnh có nền trắng, biểu đồ, khối mã, bản đồ, nhúng, email.
Kiểm tra cả hai giao diện trên máy tính và điện thoại, với hệ thống đặt sáng và tối, và sau khi tải lại cứng.

Những lỗi thường gặp

Đảo ngược mọi thứ. Bộ lọc đảo màu làm hỏng ảnh và màu thương hiệu.
Bỏ sót màu viết cứng. Một thẻ trắng trên trang tối sẽ lộ ra ngay.
Chữ xám tương phản thấp. Trông có vẻ phong cách nhưng khó đọc.
Chớp trắng khi tải. Đặc biệt dễ thấy trên điện thoại vào ban đêm.
Quên các nhúng bên thứ ba. Bản đồ, video và widget có thể vẫn sáng; hãy kiểm tra xem chúng có tùy chọn tối không.
Nút chuyển chỉ có hai trạng thái. Khi ai đó đã bấm, họ không thể quay lại việc theo hệ thống.
Làm hỏng giao diện sáng. Hãy nói rõ trong prompt rằng thiết kế sáng phải giữ nguyên.

Danh sách kiểm tra

Mọi màu đều đến từ token giao diện
Theo cài đặt hệ thống theo mặc định
Có nút tùy chọn với Sáng, Tối và Hệ thống, được ghi nhớ
Không chớp trắng khi tải hoặc tải lại
Đã đặt color-scheme để điều khiển biểu mẫu và thanh cuộn khớp nhau
Độ tương phản chữ tối thiểu 4,5:1 ở cả hai giao diện
Logo, hình ảnh, biểu đồ và nhúng đã được kiểm tra ở chế độ tối
Giao diện sáng không thay đổi
Đã kiểm tra trên máy tính và điện thoại

Chế độ tối với Mythex

Các ứng dụng xây trên Mythex mặc định dùng Vite, React, TypeScript và Tailwind, nên cách tiếp cận Tailwind ở trên áp dụng trực tiếp: dán prompt thiết lập đầy đủ vào chat, rồi kiểm tra Preview ở cả hai giao diện và ở kích thước điện thoại. Hướng dẫn prompt thiết kế của Mythex là nêu rõ những gì cần thay đổi và những gì cần giữ nguyên, điều này rất quan trọng ở đây — hãy nói rằng giao diện sáng phải giữ như cũ. Xem Thiết kế & prompt giao diện, và khôi phục bằng checkpoint nếu một lượt chỉnh sửa đi sai hướng.

Để có thêm về việc làm cho giao diện đúng ý, xem cách thiết kế ứng dụng đẹp bằng AI và cách viết prompt cho công cụ tạo ứng dụng bằng AI.

Câu hỏi thường gặp

Làm sao để website theo cài đặt chế độ tối của thiết bị?

Dùng đặc tính media CSS prefers-color-scheme, cho biết hệ thống của khách truy cập đang ở chế độ sáng hay tối. Biến thể dark: của Tailwind mặc định dùng đặc tính này.

Vì sao website của tôi chớp trắng trước khi chuyển sang chế độ tối?

Giao diện đã lưu được áp dụng bằng JavaScript sau khi trang đã được vẽ. Cách khắc phục là đặt một script inline nhỏ trong phần head của trang để thiết lập class giao diện trước khi có gì được hiển thị, và đặt màu nền rõ ràng cho cả hai giao diện.

Chế độ tối có nên là màu đen tuyền không?

Thường thì không. Các màu xám rất tối dễ chịu hơn cho mắt khi đọc lâu và cho phép thể hiện chiều sâu bằng các bề mặt sáng hơn một chút. Màu đen tuyền có thể phù hợp với thiết kế dành cho màn hình OLED hoặc nhiều hình ảnh, video.

Tôi có cần nút chuyển chế độ tối nếu đã theo cài đặt hệ thống không?

Không bắt buộc. Theo hệ thống là một mặc định tốt, nhưng một nút chuyển với các lựa chọn Sáng, Tối và Hệ thống sẽ giúp những người muốn website khác với cài đặt thiết bị của họ.