Chuyển đổi chế độ sáng và tối mượt mà: Mã thông báo, CSS và Chuyển động
Cách xây dựng bộ chuyển đổi chủ đề sáng/tối tuân thủ cài đặt hệ thống, tránh nhấp nháy khi tải, tạo kiểu cho các điều khiển gốc và hoạt ảnh mà không ảnh hưởng đến khả năng truy cập.
Điểm chính
Xây dựng chủ đề trên mã thông báo ngữ nghĩa, tuân theo cài đặt hệ thống với lược đồ màu ưa thích theo mặc định, cho phép mọi người ghi đè lên nó và đặt thuộc tính lược đồ màu sao cho các điều khiển biểu mẫu và thanh cuộn khớp nhau. Áp dụng chủ đề đã lưu trước khi trang hiển thị để tránh hiện tượng nhấp nháy. Giữ hoạt ảnh chuyển đổi ngắn gọn, chẳng hạn như làm mờ chéo nhanh hoặc Chuyển tiếp chế độ xem và bỏ qua hoạt ảnh đó khi bật chuyển động giảm.
Bắt đầu từ cài đặt hệ thống
Tính năng phương tiện lược đồ màu ưa thích cho bạn biết liệu người dùng đã yêu cầu hệ điều hành của họ về chủ đề sáng hay tối. Sử dụng nó làm mặc định và thêm một công tắc trong ứng dụng sẽ ghi đè lên nó và được ghi nhớ.
Chủ đề có mã thông báo, không ghi đè
Xác định màu sắc dưới dạng mã thông báo ngữ nghĩa (bề mặt, văn bản, đường viền, dấu) và cung cấp cho mỗi chủ đề các giá trị riêng, thường là thuộc tính tùy chỉnh CSS trên phần tử gốc. Các thành phần sau đó không bao giờ thay đổi giữa các chủ đề; chỉ có các giá trị mã thông báo mới làm được. Đây là cách tiếp cận mã thông báo ba tầng tương tự được sử dụng cho các hệ thống thiết kế đa thương hiệu.
Đừng quên điều khiển gốc
MDN giải thích rằng thuộc tính color-scheme cho trình duyệt biết sơ đồ nào mà phần tử hỗ trợ, thay đổi màu mặc định của điều khiển biểu mẫu, thanh cuộn và giao diện người dùng tích hợp khác. Nếu không có nó, một trang tối có thể hiển thị các đầu vào và thanh cuộn màu trắng sáng.
Tránh flash khi tải
Nếu chủ đề đã lưu được JavaScript áp dụng sau khi trang hiển thị, mọi người sẽ thấy một chủ đề nhấp nháy không đúng chủ đề. Áp dụng nó càng sớm càng tốt, với một tập lệnh nội tuyến nhỏ trong phần đầu tài liệu hoặc thuộc tính do máy chủ kết xuất, trước khi vẽ biểu định kiểu.
Hoạt hình switch một cách cẩn thận
Một khoảng thời gian giảm dần chéo ngắn, khoảng 150 đến 250 mili giây, khiến sự thay đổi có vẻ có chủ ý. Tránh chuyển đổi mọi thuộc tính màu trên mọi thành phần, việc này có thể làm chậm trên các trang lớn; một ảnh chụp nhanh Chuyển đổi chế độ xem thường mượt mà hơn. Làm cho việc chuyển đổi trở nên rõ ràng, bằng nhãn hoặc chú giải công cụ và xóa hoạt ảnh khi bật chuyển động giảm.
Đoạn mã triển khai thực tế
/* Tokens per theme */
:root { color-scheme: light dark; --surface: #ffffff; --text: #121212; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --surface: #121212; --text: #f2f2f2; }
}
:root[data-theme="dark"] { color-scheme: dark; --surface: #121212; --text: #f2f2f2; }
:root[data-theme="light"] { color-scheme: light; }
body { background: var(--surface); color: var(--text); }
// Switch with a View Transition where supported, instantly otherwise
function setTheme(theme) {
const apply = () => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) return apply();
document.startViewTransition(apply);
}Nguyên tắc chính cần nhớ
- Mặc định là bảng màu ưa thích; để mọi người ghi đè và ghi nhớ nó
- Chủ đề có mã thông báo ngữ nghĩa, không ghi đè theo từng thành phần
- Đặt bảng màu để các điều khiển gốc phù hợp
- Áp dụng chủ đề đã lưu trước lần sơn đầu tiên
- Giữ hoạt ảnh chuyển đổi ngắn và tôn trọng chuyển động giảm
Câu hỏi thường gặp
Nguồn
- prefers-color-scheme — Tài liệu web MDN
- color-scheme — Tài liệu web MDN
- View Transition API — Tài liệu web MDN