Dark Mode Tasarımında Temel Prensipler

Karanlık tema sadece arka planı siyaha boyamak değildir. Başarılı bir dijital strateji, göz yorgunluğunu azaltan ve okunabilirliği koruyan dengeli bir görsel hiyerarşi gerektirir. Modern UI trendleri saf siyah (#000000) yerine koyu gri tonlarının kullanımını zorunlu kılar.

Adım 1: Saf Siyah Yerine Koyu Gri Taban Seçimi

Saf siyah arka plan üzerinde saf beyaz metin kullanımı yüksek kontrasttan dolayı halelenmeye (halation effect) ve göz yorgunluğuna yol açar.

Önerilen Taban: #121212, #1E1E1E veya #242424 tonları.
Avantaj: Gölgelerin, katman derinliklerinin ve yüzey elevation farklarının algılanmasını sağlar.

Adım 2: Derinlik ve Katman (Elevation) Seviyeleri Oluşturma

Açık temada derinlik gölgelerle (box-shadow) verilirken, koyu temada derinlik yüzey açıklaştırma tekniğiyle sağlanır.

Taban Yüzey (0dp): #121212
Kart / Panel (1dp - 4dp): Yüzey üzerine %5 - %12 arası beyaz opaklık eklenmiş gri.
Modal / Dialog (8dp+): Daha yüksek opaklık, daha açık gri ton.

Adım 3: Metin Kontrast Oranları ve Opaklık Hiyerarşisi

WCAG (Web Content Accessibility Guidelines) standartlarına göre normal metinler için minimum 4.5:1 kontrast oranı zorunludur. Saf beyaz yerine opaklık katmanları kullanılmalıdır:

Birincil Metin (High Emphasis): rgba(255, 255, 255, 0.87)
İkincil Metin (Medium Emphasis): rgba(255, 255, 255, 0.60)
Devre Dışı / İpucu Metni (Disabled): rgba(255, 255, 255, 0.38)

Adım 4: Marka ve Vurgu Renklerini Doygunluktan Arındırma (Desaturation)

Açık temada kullanılan yüksek doygunluklu (saturated) renkler, koyu arka planda görsel titreşime neden olur ve kontrast testlerinde başarısız olur.

Doygunluğu %20 - %40 oranında düşürülmüş, pastel/açık tonlu marka renkleri koyu temada okunabilirliği ve erişilebilirliği güvenceye alır.

Adım 5: CSS ile Temiz Implementasyon

Modern web standartlarında dark mode desteği CSS custom properties ve medya sorgusu ile kurulur:

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

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

[data-theme="dark"] {
  --bg-primary: #121212;
  --text-primary: rgba(255, 255, 255, 0.87);
  --surface: #1e1e1e;
}

Kontrol Listesi

Arka plan saf siyah mı yoksa koyu gri mi?
Metin-arka plan kontrastı en az 4.5:1 mi?
Vurgu renklerinin doygunluğu düşürüldü mü?
Sistem tercihi (prefers-color-scheme) ve manuel toggle desteği var mı?