Karanlık Mod Temelleri ve Dijital Strateji

Karanlık mod (Dark Mode), modern kullanıcı deneyimi trendleri arasında kalıcı bir standart haline geldi. Başarılı bir dijital strateji, salt siyah bir arka plan kullanmak yerine göz yorgunluğunu azaltan, pil tüketimini optimize eden ve okunabilirliği koruyan yüzey hiyerarşisi kurmayı gerektirir.

Adım Adım Karanlık Mod Renk Paleti Oluşturma

1. Taban Yüzey Rengini Seçin

Saf siyah (#000000) yüksek kontrast nedeniyle gözde halelenme (halation) etkisi yaratır. Taban yüzey için koyu gri tonları tercih edin:

Önerilen Taban: #121212 veya #1E1E1E
İkincil Yüzey: #242424
Kart/Panel: #2C2C2C

2. Derinlik ve Yükseklik (Elevation) Katmanları Tanımlayın

Aydınlık modda gölgeler (box-shadow) derinlik sağlarken, karanlık modda yüzey açıklaşarak derinlik kazanır. Yüzey katmanı yükseldikçe beyaz opaklık katmanı ekleyin.

0dp (Zemin): #121212
1dp (Kartlar): %5 beyaz kaplama
8dp (Modallar/Menüler): %12 beyaz kaplama

3. Marka Renklerinin Doygunluğunu Azaltın (Desaturation)

Aydınlık modda kullanılan yüksek doygunluklu renkler, koyu arka plan üzerinde titreşim hissi yaratır. Vurgu renklerinin doygunluk oranını düşürün, parlaklığını artırın.

Kontrast Oranları ve WCAG Erişilebilirlik Standartları

WCAG 2.1 standartlarına göre metin ve zemin arasındaki kontrast oranları:

Normal Metin: Minimum 4.5:1 kontrast oranı.
Büyük Metin (18pt+ veya 14pt bold): Minimum 3:1 kontrast oranı.
Saf Beyaz Yerine Opaklık: Metin için #FFFFFF yerine rgba(255, 255, 255, 0.87) birincil, rgba(255, 255, 255, 0.60) ikincil metin kullanın.

Kontrast testi için WebAIM Contrast Checker veya tarayıcı geliştirici araçlarının erişilebilirlik panellerini kullanın.

CSS Değişkenleri ile Doğru Uygulama

Temiz mimari için CSS custom properties ve prefers-color-scheme medya sorgusu kullanın:

:root {
  --bg-primary: #ffffff;
  --text-primary: #121212;
  --accent: #0056b3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #121212;
    --text-primary: rgba(255, 255, 255, 0.87);
    --accent: #80bfff;
  }
}

Sık Yapılan Hatalar

Renkleri Doğrudan Tersine Çevirmek (Invert): Tüm renkleri tersine çevirmek anlamsal renk hiyerarşisini bozar.
Yetersiz Kontrastlı İkonlar: Pasif ikonların arka planla erimesi kullanıcı deneyimini düşürür.
Görsel Parlaklığını Ayarlamamak: Koyu temada yüksek parlaklıklı fotoğraflar rahatsız edicidir; opacity: 0.85 uygulayarak yumuşatın.