Dark Mode Toggle’ında “Sistem” Seçeneği Gerçekten Gerekli mi?

Web geliştiricisi Lea Verou’ya göre, iyi tasarlanmış iki durumlu (açık/koyu) bir tema kontrolü, üç durumlu (açık/koyu/sistem) bir toggle’ın tüm işlevini karşılayabilir. Yöntem basit: kontrol varsayılan olarak işletim sistemi tercihini takip eder, kullanıcı ilk kez override yaptığında bu tercih localStorage‘da saklanır ve o andan sonra kullanıcının seçimi geçerli olur.

Üç Durumlu Toggle Neden Bu Kadar Yaygın?

Açık / Koyu / Sistem üçlüsü, artık web’de neredeyse varsayılan bir desen. Mantık açık görünüyor: kullanıcıya işletim sistemi tercihini açıkça seçebileceği üçüncü bir buton vermek “tam kontrol” hissi yaratıyor. Ama Verou’nun itirazı tam olarak burada: bu üçüncü buton, genellikle zaten olan bir davranışı (sistem tercihini takip etmek) ayrı bir seçenek olarak tekrar sunuyor.

İki Durumlu Kontrol Nasıl Üç Durumu Kapsıyor?

Mekanizma şöyle işliyor:

• Varsayılan davranış: Sayfa açılınca prefers-color-scheme okunur, tema buna göre ayarlanır
• İlk override: Kullanıcı toggle’a bastığında tercih localStorage‘a yazılır
• Sonraki ziyaretler: Kayıtlı tercih varsa o kullanılır, yoksa sistem tercihine geri dönülmeye devam edilir

Basitleştirilmiş bir uygulama örneği:

const stored = localStorage.getItem('tema');
const sistemKoyu = window.matchMedia('(prefers-color-scheme: dark)').matches;
const aktifTema = stored ?? (sistemKoyu ? 'koyu' : 'acik');

document.documentElement.dataset.tema = aktifTema;

toggleButonu.addEventListener('click', () => {
  const yeni = aktifTema === 'koyu' ? 'acik' : 'koyu';
  localStorage.setItem('tema', yeni);
  document.documentElement.dataset.tema = yeni;
});

Dinamik Etiket: Toggle Sadece Karşıt Seçeneği Gösterir

Verou’nun önerisinin can alıcı noktası burada: toggle her zaman iki seçenek göstermek zorunda değil. Aktif olmayan tek seçeneği göstermesi yeterli — çünkü kullanıcı zaten hangi modda olduğunu ekrandan görüyor.

Üç Durumun Gerçekten Gerekli Olduğu Durumlar

Verou, bu sadeleştirmenin her yerde geçerli olmadığını da kabul ediyor. İki durum yetersiz kaldığında:

Eleştiriler Ne Diyor?

Yazının yorumlarında öne çıkan itiraz şu: “sistem” seçeneğini gizlemek, kullanıcının gelecekteki tercihini açıkça ifade etme imkanını azaltıyor. Örneğin kullanıcı bilinçli olarak “her zaman sistemi takip et” demek isteyebilir — dinamik etiket tekniği bunu örtük bir şekilde çözse de, bazı kullanıcılar için üçüncü seçeneğin açıkça orada durması daha şeffaf. CSS’in yeni özelliklerinde sıklıkla görüldüğü gibi, “daha az kod, aynı işlev” prensibi her zaman UX açısından da en iyi seçenek olmayabilir.

Sık Sorulan Sorular

İki durumlu dark mode toggle nasıl kurulur?

prefers-color-scheme media query’siyle sistem tercihi okunur, kullanıcı override yaptığında bu tercih localStorage‘a yazılır ve sonraki ziyaretlerde öncelikli kullanılır.

localStorage’da tema tercihi nasıl saklanır?

localStorage.setItem('tema', 'koyu') gibi basit bir anahtar-değer çifti yeterli. Sayfa her yüklendiğinde bu değer kontrol edilip yoksa sistem tercihine düşülür.

Üç durumlu toggle ne zaman gerçekten gerekli?

Ayrı bir ayarlar panelinde veya sisteme bağlı birden çok tema şeması sunan uygulamalarda üç durum anlamlı. Standart blog ve pazarlama sitelerinde genellikle gereksiz.

Bu yaklaşımın en büyük eleştirisi ne?

“Sistem” seçeneğini gizlemenin, kullanıcının açıkça “her zaman sistemi takip et” diyebilme kontrolünü azalttığı yönünde.