Tự động switch dark mode dựa trên thiết lập hệ thống

dark mode

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à:

  1. 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
  2. light: áp dụng khi hệ thống đang chạy light mode
  3. 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.

Tham khảo

  1. Dark Mode and CSS
  2. Using dark mode in CSS with MacOS Mojave

Tags:

Sửa lần cuối bởi Duoc Nguyen vào ngày 04-05-2019: xem commit, bài lỗi? sửa ngay
Cảm ơn các bạn đã đóng góp vào bài viết này:
Duoc Nguyen
  • : init

Đăng ký nhận email từ 12bit.vn

Để không bao giờ bỏ lỡ bất cứ điều gì hay ho.

Bình luận

Hỗ trợ markdown