Karanlık Mod: Gerekçeler Nerede Zayıf, Tasarım Nerede Kırılıyor
Karanlık mod çoğu ürüne estetik bir tercihle giriyor, gerekçe olarak da göz sağlığı gösteriliyor. O gerekçenin arkasındaki kanıt sanıldığı kadar sağlam değil. Buna karşılık karanlık modun ürettiği tasarım problemleri gayet somut: kontrast, katman ayrımı, varlıkların görünürlüğü ve temanın koddaki karşılığı.
Gerekçeler ne kadar sağlam
Karanlık modun göz yorgunluğunu azalttığı ya da baş ağrısını önlediği net biçimde gösterilmiş değil. Düşük ışıklı ortamda parlak bir ekranın rahatsız ettiği doğru, ama bunun çözümü illa koyu tema değil, parlaklık ayarı da aynı işi görüyor. Işığa duyarlılık ya da katarakt gibi durumlarda koyu arayüzün gerçek bir faydası var; buradaki kazanç genel kullanıcı kitlesine genellenemez.
Pil tarafı daha ölçülebilir. OLED ekranda siyah piksel kapalı durur, dolayısıyla kazanç gerçektir. Yalnız bu kazanç parlaklık düştükçe küçülür ve ekranın büyük kısmını fotoğraf, video, renkli grafik kaplıyorsa neredeyse yok olur. Bir haber okuyucuda anlamlı, bir galeri uygulamasında pazarlama cümlesi.
Şeffaf arka plan sorunu çözmez
Koyu temaya geçen ekiplerin sık verdiği tavsiye şu: görselleri şeffaf arka planlı PNG, SVG ya da WebP olarak kullanın. Bu tavsiye yarım. Şeffaflık kutuyu çözer, mürekkebi çözmez. Koyu gri çizgilerle yapılmış şeffaf bir logo, beyaz kutusundan kurtulur ve doğrudan koyu zemine karışır.
Bir projede temayı koyuya çevirdiğimizde ilk kaybolan şey logolar oldu, hepsinin arka planı şeffaftı ama çizgileri koyu griydi.
Kalıcı çözüm iki yoldan biri: ya her varlığın iki sürümü olur ve tema değişkenine bağlanır, ya da vektörler fill="currentColor" ile bırakılır, rengi metin rengiyle birlikte gelir. İkincisi tek renkli ikonlarda üç satırla biter, ayrı bir varlık yönetimine gerek kalmaz.
Kontrastı sonuna kadar açma tuzağı
WCAG normal metin için en az 4.5:1 ister. Saf beyaz metin saf siyah zeminde 21:1 verir, yani sınırın dört katından fazlası. Bu iyi bir şey gibi görünüyor ama koyu zeminde aşırı kontrast, özellikle astigmatı olan okuyucularda harflerin etrafında bulanık bir taşma bırakır ve uzun metni yorucu hale getirir.
Pratikte daha iyi çalışan aralık, tam siyah yerine koyu gri bir zemin ve tam beyaz yerine hafif kırık bir metin rengi. Kontrastı ölçmeyi bırakma, ama hedefin tavan değil eşik olsun.
Gölge çalışmıyorsa katman tonla kurulur
Açık temada derinliği gölge taşır. Koyu zeminde gölgenin gidecek yeri yoktur, kart da zemin de aynı karanlığa gömülür. Burada katman farkını yüzey tonuyla kurmak gerekir: bileşen yükseldikçe zemini bir tık açılır. Ayırıcı ince çizgiler de aynı sebeple açık temadan devralınamaz, koyu temada kendi tonlarını ister.
Aynı şey taranabilir alanlar için de geçerli. QR kodu ters kontrastla basarsan bazı okuyucular kodu yakalayamaz, orada temayı zorlamanın karşılığı yok.
Asıl maliyet arayüzde değil kodda
Karanlık mod bir tasarım kararı gibi konuşuluyor, faturası ise koddan çıkıyor. Renkler bileşenlerin içine tek tek yazılmışsa karanlık mod bir anahtar değil, bir refactor işidir. Tahmini gözle yapma: projede kaç tane sabit renk değeri geçtiğini ara, sayı kaç yüzse iş o kadardır. Renkler zaten değişken katmanına toplanmışsa geriye tema haritasını yazmak kalır, bu birkaç günlük iştir.
Kanal tutarlılığı da aynı hesaba dahil. Uygulama koyu tema sunarken ondan çıkan e-postalar ve gömülü web görünümleri açık temada kalıyorsa kullanıcı kesintiyi görür, iş yarım kalmıştır.
Kime öncelikli, kime değil
Karanlık mod uzun ve kesintisiz okunan arayüzlerde, sık açılan mesajlaşma uygulamalarında ve düşük ışıkta kullanılan video ya da ses araçlarında gerçek karşılık buluyor. Görsel yoğun ürünlerde ise hem pil kazancı hem okuma konforu argümanı zayıflıyor.
Uygulama şu şekilde kurulmalı: sistem tercihini oku ve doğrudan uygula, kullanıcının çoğu ayrıca bir anahtar aramıyor. Uygulama içi seçim yine dursun, ama varsayılanı ezmek için değil, sistem tercihinin yanlış geldiği durumlar için. Erişilebilirlik önceliklerin hâlâ kontrast, odak görünürlüğü ve klavye erişimiyse karanlık mod sıraya onların arkasına girer.