Dark Mode Tasarımı: Modern Web Standartları

Dark mode sadece estetik tercih değil. Göz yorgunluğunu azaltır, OLED ekranlarda pil tasarrufu sağlar. Başarılı bir dijital ajans projesinde karanlık tema, ışıkları kapatmaktan fazlasıdır. Doğru kontrast, derinlik ve renk dengesi gerekir.

Adım 1: Saf Siyah (#000000) Kullanmaktan Kaçının

Saf siyah arka plan üzerine saf beyaz metin yüksek kontrast yaratır, gözü yorar (halasyon etkisi). Modern web trendler koyu gri tonları önerir.

Ana Arka Plan: #121212 veya #1E1E1E kullanın.
Yüzey Katmanları: Derinlik için gölge yerine yüzey aydınlatması (elevation) uygulayın. Katman yükseldikçe gri tonu açın.
Metin Rengi: #FFFFFF yerine #E0E0E0 veya rgba(255, 255, 255, 0.87) tercih edin.

İpucu: Yüzey seviyelerini belirlemek için ana renge %5, %7, %9 oranlarında beyaz opaklık ekleyin.

Adım 2: WCAG Kontrast Standartlarını Karşılayın

Erişilebilirlik zorunluluktur. Web Content Accessibility Guidelines (WCAG) standartlarına uyun:

Metin Kontrastı (WCAG AA): Normal metin için minimum 4.5:1.
Büyük Metin: Minimum 3:1 (18pt veya 14pt bold).
UI Bileşenleri ve İkonlar: Minimum 3:1.

Adım 3: Doygunluğu Düşürülmüş (Desaturated) Renkler Seçin

Açık temadaki canlı renkler koyu temada titreşir. Renk paletindeki vurgu (accent) renklerinin doygunluğunu (saturation) düşürün.

Canlı mavi (#0055FF) yerine pastel mavi (#82AAFF).
Hata/Uyarı tonlarında açık kırmızı/turuncu varyasyonları.
Vurgu renklerinde 200-300 ton aralığı (Material Design skalası).

Adım 4: CSS Native Değişkenler ve prefers-color-scheme

Temiz kod, sıfır kütüphane bağımlılığı. CSS custom properties ve medya sorgusu kullanın:

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

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

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

Adım 5: Görseller ve İllüstrasyonları Koyu Temaya Uyarlayın

Parlak görseller karanlık modda dengeyi bozar.

Görsellere hafif parlaklık/kontrast filtresi uygulayın: filter: brightness(0.8) contrast(1.2);
Şeffaf PNG yerine koyu moda uyumlu SVG illüstrasyonlar kullanın.
Haritalar ve gömülü iframe bileşenleri için dark tema varyantları tanımlayın.

Kontrol Listesi (Checklist)

[ ] Saf siyah yerine koyu gri taban seçildi mi?
[ ] Metin/arka plan kontrast oranı en az 4.5:1 mi?
[ ] Vurgu renklerinin doygunluğu düşürüldü mü?
[ ] Sistem tercihi (prefers-color-scheme) destekleniyor mu?
[ ] Görsel parlaklıkları dengelendi mi?