Bagaimana cara mendeteksi jika OS dalam mode gelap di browser?

Mirip dengan " Bagaimana mendeteksi jika OS X dalam mode gelap? " Hanya untuk browser.

Adakah yang menemukan jika ada cara untuk mendeteksi apakah sistem pengguna berada dalam Mode Gelap OS X yang baru di Safari / Chrome / Firefox?

Kami ingin mengubah desain situs kami menjadi mode ramah gelap berdasarkan mode operasi saat ini.

Standar baru terdaftar di W3C di Media Queries Level 5 .

CATATAN: saat ini hanya tersedia di Safari Technology Preview Release 68

Dalam hal preferensi pengguna adalah light:

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

Dalam hal preferensi pengguna adalah dark:

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

Ada juga opsi no-preferencejika pengguna tidak memiliki preferensi. Tapi saya sarankan Anda hanya menggunakan CSS normal dalam kasus itu dan mengalirkan CSS Anda dengan benar.

EDIT (7 Des 2018):

Dalam Safari Technology Preview Release 71 mereka mengumumkan sakelar sakelar di Safari untuk mempermudah pengujian. Saya juga membuat halaman pengujian untuk melihat perilaku browser.

Jika Anda telah menginstal Safari Technology Preview Release 71, Anda dapat mengaktifkannya melalui:

Kembangkan> Fitur Eksperimental> Mode Gelap Dukungan CSS

Kemudian jika Anda membuka halaman pengujian dan membuka inspektur elemen, Anda memiliki ikon baru untuk beralih ke mode Gelap / Terang.

-

EDIT (11 feb 2019): Apple mengirim dalam mode gelap Safari 12.1 yang baru

-

EDIT (5 sep 2019): Saat ini 25% dari dunia dapat menggunakan CSS mode gelap. Sumber: caniuse.com

Browser yang akan datang:

• iOS 13 (saya kira itu akan dikirim minggu depan setelah Keynote Apple)
• EdgeHTML 76 (tidak yakin kapan itu akan dikirim)

-

EDIT (5 November 2019): Saat ini 74% dunia dapat menggunakan CSS mode gelap. Sumber: caniuse.com

-

EDIT (3 Feb 2020): Microsoft Edge 79 mendukung mode gelap. (dirilis pada 15 Jan 2020)

-

Saran saya adalah: Anda harus mempertimbangkan menerapkan mode gelap karena sebagian besar pengguna dapat menggunakannya sekarang (terutama untuk ponsel alias hemat baterai).

Catatan: Semua browser utama mendukung mode gelap sekarang, kecuali: IE, Edge

Jika Anda ingin mendeteksinya dari JS, Anda dapat menggunakan kode ini:

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

Untuk melihat perubahan:

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

Saat ini (September 2018) sedang dibahas dalam "Draf Editor Kelompok Kerja CSS" . Spec telah diluncurkan (lihat di atas), tersedia sebagai kueri media. Sesuatu telah mendarat di Safari, lihat juga di sini . Jadi secara teori Anda bisa melakukan ini di Safari / Webkit:

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

Tapi sepertinya ini rahasia . Pada MDN fitur media CSS inverted-colorsyang disebutkan . Pasang: Saya membuat blog tentang mode gelap di sini .

Saya mencari melalui Mozilla API, mereka tampaknya tidak memiliki variabel yang sesuai dengan warna browser-windows. Meskipun saya menemukan halaman yang dapat membantu Anda: Cara Menggunakan Gaya Sistem Operasi di CSS . Meskipun artikel-header warna berbeda untuk Chrome dan Firefox.

Menurut Mozilla, berikut adalah metode yang disukai pada September 2019

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