Safari 27.3 giới thiệu Adaptive Dark Mode tự động làm tối web

Apple vừa giới thiệu Adaptive Dark Mode trong bản beta của Safari 27.3, một tính năng cho phép trình duyệt tự động làm tối những trang web vốn chỉ có giao diện sáng. Đây là nỗ lực thu hẹp khoảng cách giữa số người dùng thích chế độ tối và số trang web thực sự hỗ trợ nó.

Theo nhóm phát triển WebKit, gần 40% lượt tải trang web đến từ người dùng đang bật dark mode, nhưng chỉ 10% lượt tải có trang hỗ trợ chế độ này. Safari từng là trình duyệt đầu tiên hỗ trợ dark mode trên web từ mùa xuân 2019 với Safari 12.1.

Ảnh minh họa Adaptive Dark Mode ở giao diện sáng

Cách kích hoạt và nguyên lý hoạt động

Để dùng thử, người dùng cần đặt giao diện hệ thống ở chế độ tối, sau đó truy cập một trang có nền sáng. Safari sẽ hiện bản xem trước của Adaptive Dark Mode và người dùng chỉ cần bấm Try.

Với những trang đã khai báo hỗ trợ dark mode qua HTML hoặc thuộc tính color-scheme: light dark trong CSS, tính năng này không thay đổi gì. Với phần còn lại của web, Safari nhanh chóng phân tích màu sắc để ước lượng trang chủ yếu sáng hay tối. Nếu trang vốn có nền tối và chữ sáng, trình duyệt giữ nguyên; nếu trang có giao diện sáng, nó sẽ chuyển sang tối.

Cốt lõi của công nghệ là biến đổi màu. Nhóm phát triển đã xây dựng một ma trận màu (color matrix) để đảo độ sáng của màu trong khi giữ nguyên sắc độ (hue), dùng để biến nền sáng thành nền tối và chữ tối thành chữ sáng. Khi xử lý màu chữ, tính năng nhắm tới độ tương phản đủ theo chuẩn WCAG với tỷ lệ 4,5:1. Các dải màu gradient sáng trong CSS cũng được chuyển sang tối.

Hệ thống đưa ra phán đoán cẩn thận để nội dung sau biến đổi vẫn đẹp và dùng được: nút bấm có độ tương phản với nền, chữ vẫn đọc được trên ảnh, menu khi rê chuột hiển thị rõ ràng.

Bảng điều khiển Interop của WebKit với Adaptive Dark Mode

Xử lý ảnh và các trường hợp đặc biệt

Phần lớn hình ảnh được giữ nguyên để bảo toàn tính toàn vẹn. Tuy nhiên, nhiều biểu tượng và logo có thể mất tương phản khi nền phía sau bị đảo màu. Vì vậy, Adaptive Dark Mode kiểm tra các ảnh SVG và biến đổi màu khi cần. Với ảnh bitmap, nó phân tích biểu đồ tần suất điểm ảnh (pixel histogram) và đảo màu những logo đen trắng đơn giản.

Một số hiệu ứng như mask và mix-blend-mode có thể cho kết quả không mong muốn trên phần tử đã bị đổi màu, nên trong vài trường hợp tính năng sẽ tắt các hiệu ứng này. Nội dung trong canvas cũng được giữ nguyên vì canvas chứa nhiều loại nội dung khó dự đoán.

Việc Adaptive Dark Mode chạy sâu bên trong engine WebKit cho phép áp dụng biến đổi với tốc độ cao và tiết kiệm năng lượng, đồng thời bảo vệ quyền riêng tư của người dùng.

So sánh giao diện sáng, Adaptive Dark Mode và dark mode tùy chỉnh

Khuyến nghị cho nhà phát triển web

Nhìn chung, một trang web sẽ hoạt động tốt với Adaptive Dark Mode nếu theo các thực hành phát triển web hiện đại. Với site còn dùng kỹ thuật cũ, vài chỉnh sửa nhỏ có thể giúp ích:

• Thay ảnh bitmap của logo và biểu tượng bằng SVG.
• Dùng màu đơn sắc hoặc gradient trong CSS thay cho ảnh nền dạng lặp (tiled background).
• Thay image sprite bằng CSS hiện đại cho bo góc, đổ bóng và trạng thái nút.
• Tạo ảnh nội dung với nền trong suốt thay vì "nướng" màu nền trang vào ảnh.
• Thêm padding cho container để tránh nội dung bị chen chúc.

Muốn kiểm soát hoàn toàn giao diện tối, nhà phát triển nên hỗ trợ đầy đủ bằng :root { color-scheme: light dark }, @media (prefers-color-scheme: dark) { } và hàm light-dark(). Các hàm CSS mới như color-mix(), contrast-color() cùng kỹ thuật dùng biến CSS để tổ chức hệ thống thiết kế cũng mang lại thêm tùy chọn.

Apple khuyến nghị khai báo hỗ trợ dark mode ngay trong thẻ meta color-scheme ở phần head của HTML và/hoặc đặt thuộc tính color-scheme trên :root hoặc body trong CSS, thay vì chèn thông tin này muộn bằng JavaScript.

Nếu muốn trang không bị biến đổi, nhà phát triển có thể dùng thẻ HTML hoặc quy tắc color-scheme: light only. Lưu ý rằng từ khóa only chưa được hỗ trợ trong Safari 27.3 beta 1.

Bảo vệ quyền riêng tư

Apple cho rằng nếu website có thể phát hiện người dùng đã bật Adaptive Dark Mode, lượng thông tin dùng để nhận dạng dấu vân tay trình duyệt (fingerprinting) sẽ tăng lên và làm yếu đi lớp bảo vệ chống tracker. Vì vậy, Safari ngăn website phát hiện việc Adaptive Dark Mode đã được áp dụng: JavaScript truy vấn màu CSS sẽ nhận màu gốc do tác giả khai báo, không phải màu đã biến đổi, và ảnh vẽ vào canvas cũng hiển thị ở dạng gốc.

Nhà quản lý website muốn trao đổi về cách tính năng biến đổi dự án của mình có thể liên hệ qua [email protected]. Người dùng gặp trang hoạt động không tốt có thể gửi báo cáo qua Feedback Assistant.

Góc nhìn

Với lập trình viên và doanh nghiệp Việt Nam, Adaptive Dark Mode là lời nhắc rằng việc hỗ trợ dark mode giờ đây không còn là "tính năng phụ" mà là một phần của trải nghiệm web hiện đại. Những website cũ dùng ảnh nền lặp, image sprite hay logo bitmap sẽ dễ bị biến đổi thiếu thẩm mỹ khi trình duyệt tự xử lý màu.

Cách an toàn nhất là chủ động khai báo color-scheme sớm trong HTML và đầu tư chuyển logo, biểu tượng sang SVG cùng màu CSS. Với các đội phát triển web tại Việt Nam, đây cũng là dịp rà soát lại hệ thống thiết kế để đảm bảo độ tương phản đạt chuẩn, vừa phục vụ người dùng thích giao diện tối, vừa giữ được sự nhất quán thương hiệu thay vì phó mặc cho trình duyệt tự đảo màu.