Karanlık Mod'un Anormal Görünmesinin Nedeni ve Çözümü

Web geliştiricileri için kullanıcı deneyimini iyileştirmenin önemli unsurlarından biri tema seçenekleridir. Koyu mod (dark mode) kullanıcıların tercihlerine göre otomatik olarak uygulansa da, manuel geçiş butonlarıyla birlikte kullanıldığında bazı uyumsuzluklar ortaya çıkabiliyor. Peki, neden bazı web sitelerinde koyu tema aktifken bile kaydırma çubukları, açılır listeler ve form alanları aydınlık kalıyor? Bu durumun arkasında yatan teknik detayları ve basit bir çözümü birlikte inceleyelim.

Koyu Modun Temel Mekanizması: prefers-color-scheme

Modern tarayıcılar, kullanıcıların işletim sistemi düzeyindeki tema tercihini algılayabilmek için prefers-color-scheme adında bir medya sorgusunu destekler. Bu özellik sayesinde geliştiriciler, kullanıcıların tercihine göre otomatik olarak tema değiştirebilir:

@media (prefers-color-scheme: dark) {
  :root {
    --ana-renk: #2a2a2a;
    --metin-renk: #ffffff;
  }
}

Bu yaklaşımın en büyük avantajı, tarayıcıya temasal kontrollerin (form alanları, açılır listeler gibi) otomatik olarak kullanıcı tercihine göre ayarlanmasını sağlayan color-scheme özelliğini kullanabilmektir:

:root {
  color-scheme: light dark;
}

Bu kod satırı, tarayıcıya "kullanıcının tercihini saygı göster" mesajı gönderir. Böylece tüm yerleşik arayüz öğeleri hem aydınlık hem de koyu mod için uygun şekilde görüntülenir.

Manuel Geçiş Butonlarının Tuzağı

Ancak bazı durumlarda geliştiriciler, kullanıcılara tema seçme özgürlüğü sağlamak amacıyla manuel geçiş butonları eklemek isteyebilir. Tipik bir uygulama şu şekilde çalışır:

• document.documentElement öğesine .dark sınıfı eklenip çıkarılır.
• CSS dosyasında bu sınıfa özel stiller tanımlanır:

:root.dark {
  --ana-renk: #1a1a1a;
  --metin-renk: #f0f0f0;
}

JavaScript tarafında ise tema geçişi şu şekilde sağlanır:

function temaDegistir() {
  const kok = document.documentElement;
  kok.classList.toggle("dark");
  localStorage.setItem(
    "tema",
    kok.classList.contains("dark") ? "dark" : "light"
  );
}

Görünüşte her şey yolunda gibi dursa da, bu yaklaşımın ciddi bir eksikliği vardır: yerleşik arayüz öğeleri (kaydırma çubukları, select kutuları, tarih seçicileri) hâlâ aydınlık modda kalır. Bu da kullanıcı deneyimini olumsuz etkileyen bir uyumsuzluğa yol açar.

Asıl Sorun: color-scheme ve OS Tercihi

Yukarıdaki örnekte görüldüğü gibi, :root öğesine eklenen color-scheme: light dark; özelliği, tarayıcıya OS düzeyindeki tercihi takip etmesini söyler. Ancak manuel geçiş butonu kullanıldığında, geliştiricinin niyeti OS tercihini değil, kullanıcının tercihini dikkate almaktır. Bu durumda, color-scheme özelliğinin OS tercihini dinlemeye devam etmesi sorunun kaynağıdır.

Basit Çözüm: Manuel Kontrolü Aktif Hale Getirin

Sorunu çözmek için color-scheme özelliğinin OS tercihini dinlemesini durdurmanız ve temanın manuel olarak kontrol edilmesini sağlamanız gerekir. Bunu yapmanın en basit yolu, her tema için ayrı color-scheme değerleri tanımlamaktır:

:root {
  color-scheme: light;
}

:root.dark {
  color-scheme: dark;
}

Bu değişiklikle birlikte, yerleşik arayüz öğeleri artık tema geçişine uygun şekilde otomatik olarak ayarlanacaktır.

Gerçek Dünya Örneği: Memos Uygulaması

Açık kaynaklı not alma uygulaması Memos, geçtiğimiz dönemde benzer bir sorunla karşılaştı. Koyu mod aktifken bile kaydırma çubukları aydınlık kalıyordu. Geliştiriciler, color-scheme özelliğini tema geçişiyle senkronize ederek bu sorunu çözdüler:

const temaKoyuMu = (tema) => tema.endsWith("-dark") || tema.endsWith(".dark");

const tema = localStorage.getItem("tema");
document.documentElement.style.colorScheme = temaKoyuMu(tema) ? "dark" : "light";

Eğer eski bir Memos sürümünü kullanıyorsanız, Ayarlar → Sistem → Ek Senaryo bölümüne aşağıdaki kodu ekleyebilirsiniz:

(function() {
  const temaKoyuMu = (tema) => tema === "default-dark" || tema === "midnight";
  
  const temaGuncelle = (tema) => {
    document.documentElement.style.colorScheme = temaKoyuMu(tema) ? "dark" : "light";
  };
  
  const gozlemci = new MutationObserver(() => {
    temaGuncelle(document.documentElement.getAttribute("data-tema"));
  });
  
  gozlemci.observe(document.documentElement, { attributes: true });
  temaGuncelle(document.documentElement.getAttribute("data-tema"));
})();

Kullanıcılar Gerçekten Manuel Geçişe mi İhtiyaç Duyuyor?

Bu noktada sorulması gereken önemli bir soru var: kullanıcılar gerçekten manuel tema geçişine ihtiyaç duyuyor mu? Çoğu durumda, prefers-color-scheme ve color-scheme: light dark kombinasyonu en uygun çözümdür. Bu yaklaşım JavaScript gerektirmez, tüm tarayıcılarda çalışır ve kullanıcının tercihini tamamen saygıyla karşılar.

Manuel geçiş butonu eklemek, geliştirme sürecini karmaşıklaştırmanın yanı sıra gereksiz bir karmaşıklık da ekler. Kullanıcıların tema değiştirme ihtimali gerçekten var mı? Yoksa sadece geliştiriciler mi gereksiz yere karmaşıklık ekliyor?

Bazen, daha basit olmak en iyisidir. Koyu mod uygulamasının temel amacı kullanıcı deneyimini iyileştirmek olmalıdır. Gereksiz karmaşıklıklar, bu amaca ulaşmada engel teşkil edebilir.

Koyu modunuzda yerleşik arayüz öğeleriyle ilgili sorunlar yaşıyor musunuz? Deneyimlerinizi yorumlarda paylaşın ve birlikte en iyi pratiği belirleyelim.