Frontend’de Dark Mode için En Modern Yaklaşım: CSS prefers-color-scheme

prefers-color-scheme ile Otomatik Karanlık Mod 🌗

Karanlık mod artık bir “lüks” değil, kullanıcı beklentisi. İster YouTube ister Twitter, WhatsApp herkes bir noktada koyu temaya geçti. Ama hâlâ JavaScript ile karmaşık tema geçişleri mi yazıyorsun? Artık gerek yok! Çünkü CSS kendi kahramanını sahneye çıkardı: prefers-color-scheme

Bu özellik sayesinde tarayıcı, kullanıcının sistem ayarlarını dinliyor. Eğer kullanıcı işletim sisteminde “Dark Mode” seçtiyse, senin web siten de otomatik olarak kararı uygulayabiliyor. Ek buton, ekstra JS, toggleTheme() fonksiyonu derdi yok.

prefers-color-scheme Nedir?

prefers-color-scheme, CSS’te bir medya sorgusudur. Kullanıcının sistem genelinde açık mı yoksa koyu temayı mı tercih ettiğini tespit eder ve senin stillerini buna göre uygular.

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}

Bu kadar basit. Tarayıcı, kullanıcının “dark” tercihine göre siteni karanlık hale getirir. Aynı şekilde:

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

şeklinde açık temayı da tanımlayabilirsin. Geriye sadece “gözlerim dinlendi” yorumlarını toplamak kalıyor. 😇

Neden Bu Kadar Güzel Bir Şey?

• Kullanıcı tercihine saygı: Ziyaretçin zaten cihazında karanlık temayı seçtiyse, senin de bunu tekrar sorman gerekmez.
• Sıfır JavaScript: Tema değişimi tamamen CSS düzeyinde çözülür. Daha hızlı render, daha az kaynak tüketimi.
• Erişilebilirlik açısından altın değerinde: Gece kullanımı sırasında göz yorgunluğunu azaltır.
• Otomatik senkronizasyon: Kullanıcı işletim sisteminde tema değiştirirse, siten de anında güncellenir.

Manuel Kontrol Eklemek (İsteğe Bağlı)

Elbette bazı kullanıcılar kendi temasını seçmek isteyebilir. Bu durumda küçük bir JavaScript dokunuşu ile sistem tercihinin üzerine yazabilirsin:

const theme = localStorage.getItem('theme');
if (theme) {
  document.documentElement.dataset.theme = theme;
}

Ve CSS’te:

:root[data-theme='dark'] {
  background-color: #111;
  color: #eee;
}
:root[data-theme='light'] {
  background-color: #fff;
  color: #222;
}

Artık kullanıcı bir butonla tema değiştirip bu tercihi tarayıcıda kaydedebilir. Yani hem otomatik hem manuel kontrol bir arada! Demokratik bir dark mode yaklaşımı. 😄

Tasarımcılar İçin Bonus: Koyu Tema ≠ Sadece Siyah Arka Plan

Karanlık modda sadece “arka planı siyah yapalım” demek yeterli değil. Işık, kontrast ve doygunluk farklı algılanır. Örneğin:

• Açık temadaki açık gri metin koyu zeminde neredeyse silinir.
• Renkli ikonlar, koyu modda daha az doygun görünür.
• Gölge efektleri (shadow) açık temada derinlik katar, koyu temada ise kaybolur.

💡 Pro İpucu: Transisyon Ekleyin

Kullanıcı temayı değiştirirken ani bir renk patlaması yaşamasın diye geçiş efektleri ekleyebilirsin:

html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

Bu sayede açık <-> koyu geçişleri pürüzsüz olur. Gözler teşekkür eder.

Tarayıcı Desteği

Modern tarayıcıların neredeyse tamamı prefers-color-scheme özelliğini destekliyor: Chrome, Edge, Firefox, Safari... Hepsi bu medya sorgusunu tanıyor.

Desteklemeyen çok eski tarayıcılarda ise CSS’in fallback mantığı devreye girer. Örneğin body’ye varsayılan açık tema rengi vererek kullanıcıyı asla “bembeyaz yazı siyah fon” kaosuna bırakmazsın. 🕳️

Ekstra: Sistem Temasına Göre Görseller

Sadece renkleri değil, görselleri de temaya göre değiştirebilirsin:

@media (prefers-color-scheme: dark) {
  img.logo {
    content: url('logo-dark.svg');
  }
}

🌚 Sonuç

Karanlık mod artık bir “özellik” değil, bir standart kullanıcı beklentisi. CSS’in prefers-color-scheme özelliğiyle bu deneyimi kolay, performanslı ve erişilebilir şekilde sunmak mümkün.

Tema butonlarıyla uğraşmak yerine kullanıcı tercihini dinle; CSS senin adına karar verir.
Bazen en iyi kod, hiç yazmadığın koddur.