Dark Mode Tasarımına Giriş

Karanlık mod, modern web standartlarında lüks değil zorunluluk. Kullanıcı göz yorgunluğunu azaltır, OLED ekranlarda pil tasarrufu sağlar. Başarılı bir dijital ajans projesinde karanlık tema, açık temanın sadece ters çevrilmiş hali değildir.

Adım 1: Saf Siyah (#000000) Yerine Koyu Gri Kullanımı

Saf siyah zemin yüksek kontrast şokuna ve göz yorgunluğuna yol açar. Zemin için önerilen renk aralığı: #121212 - #1E1E1E.

Zemin tabanı: #121212
Yükseltilmiş kartlar: #1E1E1E
Diyalog pencereleri: #242424

Saf siyah arka plan üzerinde saf beyaz metin (#FFFFFF) ışık kırılmasına (halation effect) neden olur. Metinlerde %87 opaklıkta beyaz (#DEFFFFFF) tercih edin.

Adım 2: Renk Paletini Desatüre Edin

Açık temadaki parlak doygun renkler koyu zeminde titreşir, okunabilirliği bozar. Renk doygunluğunu (saturation) %20-40 aralığında düşürün.

Birincil renk tonunu açın (daha pastel tonlar seçin).
Hata, uyarı ve başarı renklerinin (kırmızı, sarı, yeşil) parlaklığını düşürün.
WCAG 2.1 AA standardı gereği metin/arka plan kontrast oranını minimum 4.5:1 seviyesinde tutun.

Adım 3: Gölgeler Yerine Katman Aydınlatması (Elevation) Kullanımı

Koyu temada box-shadow görünmez. Derinlik hissi gölgeyle değil, yüzey renginin tonunu açarak verilir. Yüzey kullanıcıya yaklaştıkça beyaz opaklık katmanı artar.

Adım 4: Native CSS ile Karanlık Mod Entegrasyonu

Harici kütüphane eklemeyin. Standart CSS değişkenleri ve prefers-color-scheme medya sorgusu yeterlidir:

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --surface: #f5f5f5;
}

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

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

Adım 5: Görsel ve İkon Kontrast Ayarları

Tasarım trendler listesinde öne çıkan karanlık mod optimizasyonları:

İllüstrasyon ve fotoğrafların parlaklığını filter: brightness(0.85) contrast(1.1) ile yumuşatın.
SVG ikonları doğrudan metin rengi değişkenine bağlayın (currentColor).
Form elemanlarının sınır çizgilerine ince kontrastlı border (#333333) ekleyin.

Sonuç ve Test

Karanlık mod uygulandıktan sonra Chrome DevTools Lighthouse ve Accessibility panelleri üzerinden kontrast oranlarını test edin. Doğru kontrast dengesi, erişilebilir ve modern bir kullanıcı deneyimi sağlar.