CSS ile Dark Mode (Karanlık Mod) Rehberi

Karanlık mod (Dark Mode), modern web tasarımında artık bir lüks değil, zorunluluk haline geldi. Göz yorgunluğunu azaltması ve pil tasarrufu sağlaması nedeniyle kullanıcılar bu özelliği sıklıkla tercih ediyor. Peki, web sitenize tek bir satır kod bile yazmadan kullanıcıların sistem tercihlerine nasıl uyum sağlarsınız? Cevap: CSS prefers-color-scheme özelliği.

prefers-color-scheme Nedir?

prefers-color-scheme, CSS'in sunduğu bir medya sorgusudur (Media Query). Bu özellik, kullanıcının işletim sisteminde (Windows, macOS, iOS veya Android) açık renk mi yoksa karanlık renk mi tema seçtiğini algılar. Siteniz bu seçimi otomatik olarak okur ve tasarımı anında adapte eder.

CSS ile Otomatik Dark Mode Yapımı

Bu özelliği kullanmanın en pratik yolu CSS Değişkenleri (CSS Variables) kullanmaktır. Aşağıdaki basit örnekle sitenizi her iki moda da uyumlu hale getirebilirsiniz:

/* Varsayılan olarak Açık Renk Tema (Light Mode) */
:root {
  --arka-plan: #ffffff;
  --metin-rengi: #333333;
  --link-rengi: #0066cc;
}

/* Kullanıcı sistemini Karanlık Mod yapmışsa devreye girecek kodlar */
@media (prefers-color-scheme: dark) {
  :root {
    --arka-plan: #000000;
    --metin-rengi: #cccccc;
    --link-rengi: #4da6ff;
  }
}

/* CSS Değişkenlerinin Elementlere Uygulanması */
body {
  background-color: var(--arka-plan);
  color: var(--metin-rengi);
  transition: background-color 0.3s, color 0.3s; /* Yumuşak geçiş için */
}

a {
  color: var(--link-rengi);
}

prefers-color-scheme Kullanmanın Avantajları

  • Kod Kalabalığı Yapmaz: JavaScript kullanmadan, sadece saf CSS ile çalışır.
  • Performans Dostudur: Sayfa yüklenirken herhangi bir gecikme veya beyaz ekran parlaması (flash) yaşanmaz.
  • Kullanıcı Deneyimi: Kullanıcı cihazında hangi temayı seviyorsa, sitenizle karşılaştığında da aynı konforu yaşar.

Sonuç

Web sitenize karanlık mod eklemek hem profesyonel bir görünüm kazandırır hem de erişilebilirliği artırır. prefers-color-scheme medya sorgusu sayesinde bu dönüşümü birkaç satır CSS ile başlatabilirsiniz.

YORUM FORMU