Modern Web İçin Karanlık Mod Neden Zorunlu?

Karanlık mod artık estetik tercih değil, modern web standartlarında temel kullanıcı deneyimi gereksinimi. Dijital ajans projelerinde pil tasarrufu, düşük ışıkta göz yorgunluğunu azaltma ve görsel hiyerarşi kurma amacıyla kullanılır.

Adım 1: Saf Siyah (#000000) Tuzağından Kaçının

Saf siyah zemin üzerine saf beyaz metin koymak yüksek kontrast nedeniyle gözde halelenmeye (halation effect) yol açar.

Önerilen arka plan: #121212 veya #1E1E1E gibi koyu gri tonlar.
Yarar: Gölgeler ve yükseklik (elevation) katmanları koyu gri yüzeylerde belirginleşir.

Adım 2: Katman ve Yükseklik (Elevation) Hiyerarşisi Kurun

Aydınlık temada kullanılan gölgeler (box-shadow) karanlık modda görünmez. Derinlik yüzey renginin açılmasıyla verilir.

Taban yüzey (Base): #121212 (%0 yüzey aydınlığı)
Kart / Kartvizit (Surface 1): #1E1E1E (+%5 beyaz opaklık)
Modal / Dialog (Surface 2): #2D2D2D (+%10 beyaz opaklık)

Adım 3: WCAG Kontrast Standartlarını Uygulayın

Erişilebilirlik standartları dark mode için de bağlayıcıdır:

Gövde Metni (WCAG AA): Zemin ile metin arasında en az 4.5:1 kontrast oranı.
Büyük Başlıklar: En az 3:1 kontrast oranı.
İkincil Metinler: Opaklığı düşürülmüş beyaz (ör. rgba(255, 255, 255, 0.7)).

Önemli kural: Metin rengi olarak doğrudan #FFFFFF yerine #E0E0E0 veya rgba(255, 255, 255, 0.87) tercih edin.

Adım 4: Renk Doygunluğunu (Saturation) Düşürün

Açık temadaki parlak vurgu renkleri (primary colors) karanlık zeminde titreşir ve okunabilirliği bozar. Doygunluğu %20-30 azaltın.

Light Mode Accent: #0055FF
Dark Mode Karşılığı: #82AAFF

Adım 5: CSS ile Native Uygulama

CSS Custom Properties ve prefers-color-scheme medya sorgusu kullanarak sistemi kurun:

:root {
  --bg-color: #ffffff;
  --text-color: #121212;
  --surface-color: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --surface-color: #1e1e1e;
  }
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --surface-color: #1e1e1e;
}

Tasarım Trendleri ve Kontrol Listesi

Modern dijital ajans işlerinde karanlık tema kurgularken bu kontrol listesini kullanın:

Resimlerin ve illüstrasyonların parlaklığını filter: brightness(0.8) ile dengeleyin.
Saf renkler yerine desatüre pastel tonları vurgu rengi yapın.
Tüm interaktif butonların odak (focus) durumlarını test edin.