Dark Mode Tasarımı: Temel Prensipler

Karanlık mod sadece renkleri ters çevirmek değildir. Yanlış kontrast göz yorar, okunabilirliği bozar. Modern trendler ve doğru bir dijital strateji için karanlık mod tasarımı sistemsel olmalıdır. Bu rehber, native web standartlarına uygun, erişilebilir dark mode kurulumunu gösterir.

Adım 1: Saf Siyah (#000000) Kullanımını Bırakın

Saf siyah zemin üzerine saf beyaz metin (#FFFFFF) aşırı kontrast yaratır. Göz yorulmasına ve halasyon (ışık dağılması) etkisine yol açar.

Taban Arka Plan: #121212 veya koyu gri-lacivert tonları (#0F172A) tercih edin.
Metin Rengi: Saf beyaz yerine hafif kırılmış beyazlar (ör. #E2E8F0, #F1F5F9) kullanın.

Kural: Zemin ne kadar koyuysa, metin rengi o kadar yumuşatılmalıdır. Yüksek kontrast oranı her zaman iyi okunabilirlik demek değildir.

Adım 2: Katman ve Derinlik (Elevation) Mantığını Kurun

Açık temada derinlik için gölge (box-shadow) kullanılır. Karanlık temada gölgeler görünmez. Çözüm: Yüzey aydınlığını kademeli olarak artırmak.

Seviye 0 (Sayfa Tabanı): #121212
Seviye 1 (Kartlar / Paneller): #1E1E1E (%5 beyaz opaklık bindirmesi)
Seviye 2 (Modallar / Dropdown): #242424 (%7 beyaz opaklık bindirmesi)
Seviye 3 (Tooltip / Üst Menü): #2C2C2C (%11 beyaz opaklık bindirmesi)

Adım 3: Doygunluğu Azaltılmış (Desaturated) Renk Paleti Seçin

Açık temada çalışan canlı renkler (ör. parlak mavi, kırmızı) karanlık zeminde titreşir (chromatic aberration). Vurgu renklerinin doygunluğunu (saturation) %20-30 oranında düşürün, parlaklığını (lightness) artırın.

Vurgu Rengi Dönüşüm Örneği

Açık Tema Primary: hsl(220, 90%, 50%)
Dark Tema Primary: hsl(220, 65%, 65%)

Adım 4: WCAG Kontrast Oranlarını Doğrulayın

Erişilebilirlik (a11y) standartlarına uyun:

Normal Metin: Minimum 4.5:1 kontrast (WCAG AA).
Büyük Metin (18pt+ veya 14pt bold): Minimum 3.0:1 kontrast.
İkonlar ve Form Kenarlıkları: Minimum 3.0:1 kontrast.

Adım 5: Kodlama - Native CSS Değişkenleri ve Medya Sorgusu

JavaScript bağımlılığı olmadan native CSS Custom Properties ve prefers-color-scheme kullanın.

:root {
  --bg-base: #ffffff;
  --bg-surface: #f8fafc;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --brand: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-base: #0f172a;
    --bg-surface: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --brand: #60a5fa;
  }
}

[data-theme="dark"] {
  --bg-base: #0f172a;
  --bg-surface: #1e293b;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --brand: #60a5fa;
}

body {
  background-color: var(--bg-base);
  color: var(--text-main);
}

Özet Kontrol Listesi

Arka planda saf siyah yok.
Yüzey hiyerarşisi gölgeyle değil, açık gri ton katmanlarıyla kuruldu.
Marka ve aksiyon renklerinin doygunluğu düşürüldü.
Metin kontrastları test edildi (WCAG AA standardı sağlandı).
CSS değişkenleri kullanılarak gereksiz DOM manipülasyonu engellendi.