Nguồn: Hacker News
Tóm tắt
Bài viết của CSSence phân loại sáu cấp độ khác nhau để triển khai dark mode trong web, từ cách tiếp cận đơn giản nhất không cần CSS cho đến các giải pháp phức tạp với JavaScript. Tác giả lấy cảm hứng từ CSS Naked Day để suy nghĩ về tại sao nhiều trang web thiếu hỗ trợ dark mode ngay cả ở mức cơ bản nhất.
Cấp độ 1 (Barebone) chỉ cần một thẻ meta đơn giản: <meta name="color-scheme" content="light dark">. Cấp độ 2 (Basic) sử dụng CSS color-scheme: light dark trên element html. Cấp độ 3 (Benign) tận dụng hàm CSS mới light-dark() cho phép chỉ định màu sắc khác nhau cho hai chế độ một cách ngắn gọn, ví dụ: background-color: light-dark(white, black).
Cấp độ 4 (Bold) sử dụng media query @media (prefers-color-scheme: dark) cho phép tùy biến hoàn toàn, không chỉ giới hạn ở màu sắc mà còn có thể thay đổi hình ảnh, hiệu ứng và bố cục. Các cấp độ cao hơn (5 và 6) thêm vào khả năng chuyển đổi thủ công bằng JavaScript và lưu trữ tùy chọn của người dùng, cung cấp trải nghiệm cá nhân hóa tốt hơn.
Bài viết cũng nhấn mạnh tầm quan trọng của thẻ meta ở level 1 khi nó cho phép trình duyệt biết về color scheme trước khi CSS được tải, tránh hiện tượng flash of incorrect color scheme. Đây là tổng quan thực tiễn và có hệ thống về một tính năng ngày càng quan trọng trong thiết kế web hiện đại.