Chế độ tối tự động với JavaScript

Một trong những tính năng được yêu cầu nhiều nhất trong các ứng dụng là chế độ tối. Đối với nhiều người dùng, chế độ tối cung cấp giao diện thân thiện hơn với ít tông màu trắng có thể gây mỏi mắt hơn. Chế độ tối cũng được biết là tiết kiệm pin trên màn hình AMOLED.

Thông thường, các nhà thiết kế web sử dụng prefers-color-schemetính năng phương tiện CSS để cung cấp một chủ đề khác khi bật chế độ tối. prefers-color-schemecó được tùy chọn của người dùng thông qua cài đặt hệ điều hành hoặc cài đặt tác nhân người dùng. Đây là một ví dụ đơn giản:

/* Style rules for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
/* Style rules for light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

const darkMode = window.matchMedia("(prefers-color-scheme:dark)").matches;

Chế độ tối là một tính năng cực kỳ hữu ích đối với hầu hết người dùng. Tận dụng matchMedia()phương pháp để cung cấp trải nghiệm tốt hơn cho người dùng của bạn.

Nếu bạn thích bài viết này, bạn cũng có thể thích cuốn sách của Faraz Kelhini, JavaScript không đồng bộ hiện đại . Đến hết ngày 15 tháng 5 năm 2022, bạn có thể sử dụng mã khuyến mãi fkajs_medium_35 để tiết kiệm 35% cho phiên bản sách điện tử. Mã khuyến mãi không hợp lệ khi mua hàng trước.

Bài viết của Faraz Kelhini