Trong phiên bản Mojave, macOS đã hỗ trợ dark mode, khi chuyển sang dark mode, các app có hỗ trợ dark mode đều tự động thay đổi color trong app của mình để chuyển thành dark theme. Liệu chúng ta có thể làm như vậy với web hay không?
Trong mô tả của Media Queries Level 5 có mô tả về media future ‘prefers-color-scheme’ như sau:
The prefers-color-scheme media feature is used to detect if the user has requested the system use a light or dark color theme.
Mô tả này ở trạng thái drafts và hiện tại cũng chỉ được hỗ trợ bởi Safari Technology Preview 68 trở lên, cũng hợp lý thôi vì macOS và Safari đều là của Apple mà. Và bạn cũng cần phải cài đặt macOS Mojave để test.
Theo như mô tả thì media future này có 3 value là:
- no-preference: áp dụng khi không biết hệ thống đang chọn mode nào, hoặc một giá trị nào đó khác light/dark
- light: áp dụng khi hệ thống đang chạy light mode
- dark: áp dụng khi hệ thống chạy dark mode
Ví dụ
Bạn phải mở ví dụ này bằng Safari Technology Preview 68 trên macOS Mojave:
Bạn có thể xem video mình quay lại ví dụ này:
Ta cũng có thể sửa lại ví dụ trong hai bài Thay đổi giá trị CSS Variable bằng JavaScript và Ứng dụng CSS variables để xây dựng tính năng dark theme thành như sau:
Lời kết
Hiện tại bạn chưa thể sử dụng prefers-color-scheme được trên các site production, vì chưa phiên bản stable của trình duyệt nào hỗ trợ, nhưng đây có lẽ là một future hay.