Bagaimana cara mendeteksi jika OS dalam mode gelap di browser?


138

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.


1
Sejauh yang saya tahu, tidak ada permintaan media CSS untuk Safari untuk mendeteksi mode terang atau gelap, tetapi Safari secara definitif mendukung widget gelap di halaman HTML. Mungkin bermanfaat untuk mengajukan radar.
mschmidt

Jangan beri tahu saya, tetapi setelah Stackoverflow memperkenalkan mode gelap, saya mencari di Google bagaimana mereka menerapkan mode "sistem" dan menemukan pertanyaan ini. Saya mengharapkan banyak lalu lintas untuk ini :-)
usr-local-ΕΨΗΕΛΩΝ

Jawaban:


177

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.

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


2
Baru saja mengujinya. Jika Anda mengubah tema di pengaturan mac os Anda, maka Anda perlu me-restart browser. Sayang sekali itu tidak disinkronkan dengan cepat.
Herman Starikov

3
@HermanStarikov Saya memposting pembaruan tentang masalah ini yang Anda gambarkan. Dengan Safari Technology Preview Release 71 Anda dapat beralih di waktu nyata.
Davy de Vries

Bagus! Saya membuat sedikit demo tentang bagaimana tema nantinya dengan bootstrap: twitter.com/Hermanhasawish/status/1071517994302562305
Herman Starikov

2
Apakah ada cara untuk mendeteksi ini dalam JavaScript?
Akash Kava

7
@AkashKava Saya mencari di Google, ya itu mungkin jika Anda menggunakan sesuatu seperti ini: window.matchMedia("(prefers-color-scheme: dark)").matchesJika saya punya waktu luang, saya akan menambahkan solusi javascript lengkap untuk jawaban saya.
Davy de Vries

68

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";
});

Hai! Ini sangat bagus. Saya ingin tahu - bagaimana tepatnya cara kerja sintaks ini?
Stormblessed

1
@Stormblessed pertama akan memeriksa apakah browser mendukung matchMediadan kemudian akan mencoba mencocokkan prefers-color-scheme: darkstring. Jika cocok kami dalam mode gelap.
Mark Szabo

Dengan operator Elvis baru ini dapat ditulis sebagaiif (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
Mark Szabo

oh itu masuk akal! Sintaks dengan .matches tampak seperti sedang melakukan perbandingan antara hal pertama dan yang kedua atau sesuatu. Terima kasih!
Stormblessed

Seharusnya jawaban yang diperiksa.
podperson

22

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 .



2

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;
  }
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.