Làm thế nào để phát hiện nếu HĐH ở chế độ tối trong trình duyệt?

Tương tự như " Cách phát hiện nếu OS X ở chế độ tối? " Chỉ dành cho trình duyệt.

Có ai tìm thấy nếu có một cách để phát hiện xem hệ thống của người dùng có ở Chế độ tối OS X mới trong Safari / Chrome / Firefox không?

Chúng tôi muốn thay đổi thiết kế trang web của chúng tôi thành thân thiện với chế độ tối dựa trên chế độ hoạt động hiện tại.

Tiêu chuẩn mới được đăng ký trên W3C trong Truy vấn truyền thông cấp 5 .

LƯU Ý: hiện chỉ khả dụng trong Safari Technology Preview Release 68

Trong trường hợp ưu tiên người dùng là light:

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

Trong trường hợp ưu tiên người dùng là dark:

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

Ngoài ra còn có tùy chọn no-preferencetrong trường hợp người dùng không có ưu tiên. Nhưng tôi khuyên bạn chỉ nên sử dụng CSS bình thường trong trường hợp đó và xếp tầng CSS của bạn một cách chính xác.

EDIT (7 tháng 12 năm 2018):

Trong Safari Technology Preview Release 71, họ đã công bố một công tắc bật tắt trong Safari để giúp việc kiểm tra dễ dàng hơn. Tôi cũng đã làm một trang thử nghiệm để xem hành vi của trình duyệt.

Nếu bạn đã cài đặt Safari Technology Preview Release 71, bạn có thể kích hoạt thông qua:

Phát triển> Tính năng thử nghiệm> Hỗ trợ CSS chế độ tối

Sau đó, nếu bạn mở trang thử nghiệm và mở trình kiểm tra phần tử, bạn có một biểu tượng mới để chuyển chế độ Tối / Sáng.

-

EDIT (11 feb 2019): Apple xuất xưởng trong chế độ tối Safari 12.1 mới

-

EDIT (5 sep 2019): Hiện tại 25% thế giới có thể sử dụng CSS chế độ tối. Nguồn: caniuse.com

Các trình duyệt sắp tới:

• iOS 13 (Tôi đoán nó sẽ được xuất xưởng vào tuần tới sau Keynote của Apple)
• EdgeHTML 76 (không chắc chắn khi nào sẽ được chuyển đi)

-

EDIT (5 nov 2019): Hiện 74% trên thế giới có thể sử dụng CSS chế độ tối. Nguồn: caniuse.com

-

EDIT (3 tháng 2 năm 2020): Microsoft Edge 79 hỗ trợ chế độ tối. (phát hành vào ngày 15 tháng 1 năm 2020)

-

Đề xuất của tôi sẽ là: bạn nên xem xét thực hiện chế độ tối vì hầu hết người dùng có thể sử dụng ngay bây giờ (đặc biệt là cho thiết bị di động hay còn gọi là tiết kiệm pin).

Lưu ý: Tất cả các trình duyệt chính hiện đang hỗ trợ chế độ tối, ngoại trừ: IE, Edge

Nếu bạn muốn phát hiện nó từ JS, bạn có thể sử dụng mã này:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Để theo dõi các thay đổi:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

Điều này hiện đang (tháng 9 năm 2018) đang được thảo luận trong "Bản thảo trình soạn thảo nhóm làm việc CSS" . Spec đã ra mắt (xem ở trên), có sẵn như là một truy vấn phương tiện truyền thông. Một cái gì đó đã hạ cánh trong Safari, xem thêm ở đây . Vì vậy, về lý thuyết bạn có thể làm điều này trong Safari / Webkit:

@media (prefers-dark-interface) { color: white; background: black }

Nhưng dường như đây là chuyện riêng tư . Trên MDN, một tính năng phương tiện CSS inverted-colorsđược đề cập . Plug: Tôi viết blog về chế độ tối ở đây .

Tôi đã tìm kiếm qua Mozilla API, dường như chúng không có bất kỳ biến nào tương ứng với màu cửa sổ trình duyệt. Mặc dù tôi đã tìm thấy một trang có thể giúp bạn: Cách sử dụng Kiểu hệ điều hành trong CSS . Mặc dù tiêu đề bài viết, màu sắc khác nhau đối với Chrome và Firefox.

Theo Mozilla, đây là phương pháp được ưa thích kể từ tháng 9 năm 2019

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}