Karanlık modun altı seviyesi (2024)

• Tarayıcının yerleşik özelliklerinden JavaScript medya sorgularına kadar, karanlık mod uygulama kapsamını kademeli olarak genişleten 8 seviyelik bir sınıflandırma özeti
• En basit yöntem, yalnızca <meta name="color-scheme" content="light dark"> veya color-scheme: light dark bildirimiyle kullanıcının renk şeması tercihini takip eden bir yapı kurmak
• Daha üst seviyelerde light-dark() fonksiyonu, @media (prefers-color-scheme: dark) ve şemaya göre ayrı stil dosyaları ile yalnızca renkler değil, görseller ve gölgeler de kapsamlı biçimde ayarlanabiliyor
• Yalnızca kullanıcının sistem ayarını izlemekle kalmayıp Automatic·light·dark olmak üzere üç seçenek sunan bir değiştirici kurulabiliyor; :has() ve gerçek meta öğesi üzerinden tema tespiti de mümkün
• Safari’nin erişilebilirlik sınırları ve yazdırma sırasında prefers-color-scheme davranışına dair gözlemler de yer alıyor; yakın dönem CSS özellikleriyle bile light/dark modu yerleşik hale getirmenin kolaylaştığı görülüyor

---

Karanlık modu seviyelere göre uygulamak

• Level 1: Barebone

  • CSS’de tek satır bile yazmadan light/dark ayrımını etkinleştirmek mümkün; belgenin head kısmına yalnızca <meta name="color-scheme" content="light dark"> eklemek, tarayıcının kullanıcının renk şeması tercihini izlemeye başlaması için yeterli
  • content niteliğindeki öğelerin sırası teorik olarak anlam taşır; renk şeması tercihi belirtmeyen kullanıcılar, boşlukla ayrılmış listedeki ilk değeri alır
  • Mevcut işletim sistemi ayarlarında renk şeması seçmeme gibi bir seçenek bulunmadığından, pratikte sonuç işletim sistemi ayarıyla eşleşen şemaya çıkar
  • content içinde yalnızca tek bir değer de verilebilir; bu durumda kullanıcı tercihi dikkate alınmadan ilgili şema zorla uygulanır
  • Bu meta etiketi, bir bakıma sonraki seviyedeki CSS yaklaşımına karşılık gelen HTML tarafındaki yöntem olarak işlev görür

• Level 2: Basic

  • CSS tarafında html { color-scheme: light dark; } bildirimiyle light/dark modu ayrımı uygulanabilir
  • DOM’da zaten meta etiketi varsa bu bildirim gerekli değildir; HTML’i kontrol edebiliyorsanız, tarayıcının CSS’yi parse etmeden önce yönergeyi görebilmesi için meta etiketi kullanılması önerilir
  • Her iki yöntem de kullanıcı aracısının varsayılan stillerini ve bunların içindeki light/dark modunu kullanabilmeyi sağlar
  • Buna CSS eklerken ağırlıklı olarak CSS system colors kullanılırsa oldukça düzenli bir tasarım elde edilebilir
  • Meta etiketinin her zaman tüm belgeye uygulanmasına karşılık, CSS color-scheme bildirimi kök öğe dışında başka yerlere de verilebilir; bu fark ek kullanım alanları doğurur

• Level 3: Benign

  • CSS’ye görece yakın zamanda eklenen light-dark() renk fonksiyonu ile basit light/dark modu ayarlamaları yapılabilir
  • Örnekte background-color: light-dark(black, white); ve color: light-dark(white, black); şeklinde kullanılır; ilk argüman light modda, ikinci argüman dark modda uygulanır
  • Argüman olarak doğrudan gerçek renkler verilebildiği gibi, renk olarak yorumlanan custom properties de kullanılabilir
  • Yazının tamamında yalnızca bu seviyenin, yazıldığı tarih itibarıyla tarayıcı desteği yeterli değildir

• Level 4: Bold

  • Geleneksel @media (prefers-color-scheme: dark) medya sorgusu ile karanlık mod geçişi uygulanabilir
  • light ya da dark tarafını sorgulamanız fark etmeksizin, yalnızca basit renk değişimiyle sınırlı olmayan en üst düzey özelleştirme mümkündür
  • Karanlık modda görsellere filtreyle düşük doygunluk uygulamak ya da kutu gölgelerini dış çizgiyle değiştirmek gibi ayarlamaların tümü yapılabilir

• Level 5: Bisectional

  • Medya sorguları HTML içinde de kullanılabilir; link öğesinin media niteliğine yazılarak şemaya göre stil dosyaları ayrılabilir
  • Örnek olarak light.css ve dark.css dosyalarının sırasıyla prefers-color-scheme: light ve prefers-color-scheme: dark ile bağlanması gösterilir
  • Özelleştirme kapsamı genişse ayrı dosya yapısı daha uygun olabilir; tarayıcı, sorguyla eşleşmeyen CSS dosyasını yok sayabildiğinden indirilecek dosya sayısı bire düşebilir

• Level 6: Ballistic

  • JavaScript tarafında window.matchMedia('(prefers-color-scheme:dark)') ile renk şeması medya sorgusu kullanılabilir
  • Diğer medya sorgularında olduğu gibi light veya dark şemanın etkin olup olmadığı sorgulanıp, sonuca göre istenen işlem yapılabilir
  • Gerçek uygulamalarda önceki seviyelerdeki tekniklerden yalnızca birine bağlı kalmak yerine karma kullanım da mümkündür

Kullanıcı değiştiricisi ve ileri düzey kalıplar

• Level 7: Beyond

  • Yalnızca kullanıcının sistem tercihine bağlı kalmadan bir color scheme switcher kurulabilir
  • Bu değiştirici basit bir boolean değildir; başlangıç varsayılanı olarak prefers-color-schemei izleyen bir Automatic modu gerekir
  • Bunun üzerine değiştirici eklendiğinde kullanıcı Automatic, light, dark olmak üzere üç moddan birini seçebilir

• Level 8: Beguiling

  • Level 7 değiştiricisini uygularken genelde HTML öğesine .dark sınıfı ya da data-theme="dark" gibi bir nitelik eklemek yaygındır
  • Bunun yerine :has() kullanılarak gerçek <meta name="color-scheme" content="dark"> varlığı doğrudan sorgulanabilir
  • Örnekte html:has(meta[name="color-scheme"][content="dark"]) seçicisi altında --color-bg, --color-text gibi CSS değişkenleri dark mod değerlerine atanır
  • Ayrı bir sınıf ya da veri niteliği olmadan da tema, gerçek meta öğesine göre belirlenebilir

Ek tartışmalar ve gözlemler

• CSS Naked Day gözlemi

  • Stiller kaldırıldıktan sonra ziyaret edilen neredeyse tüm sitelerde karanlık mod eksikliği dikkat çekmiş ve bu da karanlık mod seviyeleri ayrımına yol açmış
  • Yeni bir siteyi sıfırdan kurup yeni stiller yazarken, güncel CSS özellikleriyle light/dark modu yerleşik hale getirmenin çok kolaylaştığı da belirtiliyor

• Safari erişilebilirlik sorunları

  • Görece yakın zamana kadar Safari’nin karanlık modda erişilebilir bağlantı renkleri sunmadığına dikkat çekiliyor
  • Önceki bir CSS Naked Day sırasında bu sorun fark edilip meta etiketi kaldırılmış ve yalnızca light renk şeması kullanılmış
  • Daha sonra meta etiketi yeniden eklenmiş olsa da, eski Safari sürümlerini kullananlarda erişilebilirlikte düşüş yaşanabileceği kabul ediliyor
  • Safari’nin karanlık modunda metin kutularında görünür kenarlık eksikliği de gözlemlenmiş
  • Yalnızca kullanıcı aracısı stilleriyle, doğru semantik HTML kullanılsa bile tam erişilebilirlik garanti edilemediğinden, gelecekteki CSS Naked Day için de yeterli stil bırakmanın yolları düşünülüyor

• Yazdırma ve screen and koşulu

  • Bisectional örneğinde screen and ... kullanılmasının nedeni olarak yazıcı hedefini hariç tutma niyeti açıklanıyor
  • Temadan bağımsız çekirdek bir stil dosyası ya da ayrı bir yazdırma stil dosyası olduğu varsayılıyor; karanlık modun yazıcıda fazla mürekkep tüketebileceği düşünülerek güvenli bir ayrım tercih ediliyor
  • Gerçek testlerde sistem karanlık modu açıkken yazdırılsa bile yalnızca siyah metin ve beyaz kâğıt çıktığı, tarayıcıların yazdırmada ilgili karanlık mod stilini uygulamadığı gözlemlenmiş
  • Ek testlerde yazdırma önizlemesinde prefers-color-scheme değerinin her zaman light olarak raporlandığı görülmüş; bu durum Firefox ve Chromium’da doğrulanmış
  • Siyah kâğıt ve beyaz mürekkep kullanan bir yazıcınız varsa ne yazık ki şanssızsınız şeklinde şakacı bir ifade de yer alıyor

[GN⁺]

Hacker News yorumları

• Çok fazla özelleştirme yapıyorsanız ayrı dosya mantıklı olabilir, ancak media query ile eşleşmeyen CSS'in hiç indirilmediği açıklamasının gerçek tarayıcı davranışıyla örtüşmediğini düşünüyorum. Benim deneyimimde tarayıcı sonunda hepsini indiriyor, sadece önceliği farklı veriyor
• Sunucudan ilk içeriği beklerken ortaya çıkan flashbang benzeri parlamayı engellemenin hâlâ bir yolu yok mu diye merak etmiştim
  • Ben Firefox'ta userContent.css içinde background-color belirtme yöntemini fena bulmuyorum
  • Ben sadece ekran parlaklığını düşürüp dark mode'u kapattım ve flashbang ortadan kalktı. Üstelik batarya da daha uzun gidiyor
• Ben bu yazının dark mode arka planındaki siyahlık seviyesi tercihiyle ilgili olacağını sanmıştım. Saf siyahın OLED'de batarya açısından daha verimli olduğunu da duymuştum, ayrıca tam siyahtan ziyade daha az mürekkepli griyi tercih eden insanlar da tanıyorum. Yine de bunun gerçekten altı kademeye kadar çıkması gerekip gerekmediğinden emin değilim; hissedilebilir farkın en fazla 3-4 kademe civarında olduğunu düşünüyorum
  • Bana göre daha genel çözüm, Reader Mode uyumluluğunun standartlaştırılması olurdu. Her sitenin tüm kullanıcı tercihlerine ayrı ayrı uyum sağlamaya çalıştığı n x m problemi yerine, sitenin tek bir basit içerik görünümünü desteklediği ve kullanıcıya özel ayarları tarayıcının bunun üstünde yönettiği bir yapı daha iyi olurdu
  • Ben OLED'de saf siyahı tercih ediyorum. Ne kadar az piksel yanarsa burn-in yükünün o kadar azalacağını düşünüyorum ve zaten ömrü sınırlı olduğuna göre uzun vadede monitörü 2-3 yıl yerine 5 yıldan fazla kullanmak isterim
• Bana göre en üst seviye 9, hatta 0; yani sadece bilgisayarı kapatıp gidip uyumak
• OP'nin 3 durumlu toggle'ı düzgün şekilde uygulamış olmasına sevindim
• Ben aşağı kaydırdıkça kademelerin dinamik olarak uygulanmasının daha eğlenceli olacağını düşünmüştüm
  • Ya da sayfanın uygun yerlerinde okurun doğrudan kademe seçebilmesi de güzel olabilirdi
• Bence bu 8 kademe değil mi?
• Gerçekten de 2024 yılındaymışız hissi verdi
• Bu durumda akla gelen ilk şey elbette xkcd 3227 oldu