Dark Mode Tasarımının Temelleri

Karanlık mod sadece arka planı siyaha çevirmek değildir. Yanlış kontrast ve aşırı doygun renkler göz yorar, okunabilirliği bozar. Modern web projelerinde başarılı bir dark mode için WCAG standartlarına uygun renk hiyerarşisi kurmak gerekir.

1. Saf Siyah (#000000) Kullanmaktan Kaçının

Saf siyah arka plan üzerine saf beyaz (#FFFFFF) metin koymak yüksek kontrast nedeniyle halasyon (ışık dağılması) etkisi yaratır. Gözü çabuk yorar.

Ana Arka Plan: #121212 veya #1E1E1E gibi koyu gri tonları seçin.
Metin Rengi: Saf beyaz yerine #E0E0E0 veya rgba(255, 255, 255, 0.87) tercih edin.

2. Derinlik ve Katman Hiyerarşisi (Elevation)

Açık temada derinlik gölgelerle (box-shadow) verilir. Karanlık modda gölgeler görünmez. Derinlik yüzey renginin tonunu açarak sağlanır.

Taban Yüzey (0dp): #121212
Kart / Kartvizit (1dp): #1E1E1E (Taban + %5 beyaz opaklık)
Açılır Menü / Dialog (4dp): #272727 (Taban + %9 beyaz opaklık)
Modal / Pop-up (8dp): #2D2D2D (Taban + %12 beyaz opaklık)

3. Doygunluğu Düşürülmüş (Desaturated) Vurgu Renkleri

Açık temadaki canlı renkler (örneğin saf mavi veya kırmızı) koyu arka planda titreşir ve kontrast testlerinden geçemez.

Bir dijital ajans UI kit hazırlarken marka ana renginin doygunluğunu (saturation) %20-30 oranında düşürmeli ve parlaklığını (lightness) artırmalıdır. Bu işlem WCAG AA 4.5:1 kontrast oranını korur.

4. Adım Adım Dark Mode CSS Mimarisi

Modern web projelerinde tema geçişini CSS custom properties (değişkenler) ile yönetin:

:root {
  --bg-main: #FFFFFF;
  --surface: #F5F5F5;
  --text-primary: #121212;
  --accent: #0056B3;
}

[data-theme="dark"] {
  --bg-main: #121212;
  --surface: #1E1E1E;
  --text-primary: #E0E0E0;
  --accent: #66B2FF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-main: #121212;
    --surface: #1E1E1E;
    --text-primary: #E0E0E0;
    --accent: #66B2FF;
  }
}

5. Erişilebilirlik ve Kontrast Kontrolü

Tasarım trendleri takip edilirken erişilebilirlik göz ardı edilmemelidir.

Gövde metni için minimum kontrast oranı 4.5:1 olmalıdır.
Büyük başlıklar için minimum oran 3.0:1 seviyesindedir.
İkonlar ve buton sınırları için en az 3.0:1 kontrast sağlayın.
Görsellerin parlaklığını karanlık modda hafifçe düşürün (filter: brightness(0.8)).