Tarayıcılarda işletim sisteminin karanlık modda olup olmadığı nasıl tespit edilir?

"Benzer OS X karanlık modunda olup olmadığını nasıl tespit etmek için? " Yalnızca tarayıcılar için.

Safari / Chrome / Firefox'ta kullanıcının sisteminin yeni OS X Dark Mode'da olup olmadığını tespit etmenin bir yolu olup olmadığını kimse buldu mu?

Mevcut çalışma moduna bağlı olarak sitemizin tasarımını karanlık mod dostu olacak şekilde değiştirmek istiyoruz.

Yeni standart, Medya Sorguları Seviye 5'te W3C'ye kaydedilir .

NOT: şu anda yalnızca Safari Teknoloji Önizleme Sürümü 68'de mevcuttur

Kullanıcı tercihinin şu olması durumunda light:

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

Kullanıcı tercihinin şu olması durumunda dark:

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

no-preferenceBir kullanıcının tercihi olmaması durumunda da seçenek vardır. Ancak bu durumda normal CSS kullanmanızı ve CSS'nizi doğru şekilde kademelendirmenizi tavsiye ederim.

DÜZENLEME (7 Aralık 2018):

In Safari Teknoloji Önizleme Sürümü 71 onlar daha kolay test yapmak için Safari'de bir geçiş düğmesini açıkladı. Tarayıcı davranışını görmek için bir test sayfası da yaptım .

Eğer varsa Safari Teknoloji Önizleme Sürümü 71 Üzerinden etkinleştirebilirsiniz yüklü:

Geliştirme> Deneysel Özellikler> Karanlık Mod CSS Desteği

Ardından, test sayfasını ve öğe denetçisini açarsanız, Koyu / Açık moduna geçiş yapmak için yeni bir simgeniz olur.

-

DÜZENLEME (11 Şubat 2019): Apple, yeni Safari 12.1 karanlık modunda geliyor

-

DÜZENLEME (5 Eylül 2019): Şu anda dünyanın% 25'i karanlık mod CSS kullanabilir. Kaynak: caniuse.com

Yaklaşan tarayıcılar:

• iOS 13 (Sanırım önümüzdeki hafta Apple'ın Keynote'undan sonra gönderilecek)
• EdgeHTML 76 (ne zaman gönderileceğinden emin değilim)

-

DÜZENLEME (5 Kasım 2019): Şu anda dünyanın% 74'ü karanlık mod CSS'yi kullanabilir. Kaynak: caniuse.com

-

DÜZENLE (3 Şubat 2020): Microsoft Edge 79 karanlık modu destekler. (15 Ocak 2020'de yayınlandı)

-

Benim önerim şu: karanlık modu uygulamayı düşünmelisiniz çünkü çoğu kullanıcı bunu kullanabilir (özellikle mobil aka pil tasarrufu için).

Not: IE, Edge dışında tüm büyük tarayıcılar artık karanlık modu desteklemektedir.

JS'den tespit etmek istiyorsanız, bu kodu kullanabilirsiniz:

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

Değişiklikleri izlemek için:

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

Bu konu şu anda (Eylül 2018) "CSS Çalışma Grubu Düzenleyicisi Taslakları" nda tartışılmaktadır . Spec başlatıldı (yukarıya bakın), ortam sorgusu olarak kullanılabilir. Safari'ye bir şey düştü, ayrıca buraya bakın . Yani teoride bunu Safari / Webkit'te yapabilirsiniz:

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

Ama öyle görünüyor ki bu özel . MDN bir CSS medya özelliği inverted-colorsolduğu belirtilen . Plug: Burada karanlık mod hakkında blog yazdım .

Mozilla API'ye rağmen arama yaptım, tarayıcı penceresinin rengine karşılık gelen herhangi bir değişkene sahip görünmüyorlar. Yine de size yardımcı olabilecek bir sayfa buldum: CSS'de İşletim Sistemi Stilleri Nasıl Kullanılır . Makale başlığına rağmen renkler Chrome ve Firefox için farklıdır.

Mozilla'ya göre, işte Eylül 2019 itibarıyla tercih edilen yöntem

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