Modern Web Trendlerinde Dark Mode Neden Standart Oldu?

Karanlık mod (Dark Mode), artık modern web tasarımında opsiyonel bir özellik değil, temel bir kullanıcı beklentisidir. Dijital ajans projelerinde ve modern web arayüzlerinde kullanıcıların göz yorgunluğunu azaltmak, pil tasarrufu sağlamak ve şık bir görsel deneyim sunmak için karanlık tema standart haline geldi. Başarılı bir karanlık mod uygulamak, yalnızca arka planı siyaha, metinleri beyaza çevirmekten ibaret değildir.

Adım 1: Saf Siyah (#000000) Kullanımından Kaçının

Saf siyah arka plan üzerine saf beyaz metin (#FFFFFF) yerleştirmek, yüksek kontrast nedeniyle gözde halelenmeye (halasyon etkisi) ve ciddi göz yorgunluğuna yol açar.

Koyu Gri Tonları Seçin: Ana arka plan için #121212, #1E1E1E veya #242424 gibi koyu gri tonları tercih edin.
Göz Konforu Sağlayın: Koyu gri yüzeyler, beyaz piksellerin yaydığı sert ışığı kırar ve derinlik algısını kolaylaştırır.

Adım 2: WCAG Kontrast Standartlarını Koruyun

Erişilebilirlik (A11y), başarılı UI tasarımının omurgasıdır. Metin ve arka plan arasındaki renk kontrastını Web İçeriği Erişilebilirlik Yönergeleri (WCAG) standartlarına göre doğrulayın.

Normal Metinler: En az 4.5:1 kontrast oranı sağlayın (WCAG AA).
Büyük Başlıklar: En az 3:1 kontrast oranı yakalayın.
Gövde Metin Rengi: #FFFFFF yerine rgba(255, 255, 255, 0.87) gibi hafif opak beyazlar kullanarak sert parlamayı engelleyin.

Adım 3: Doygunluğu Düşürülmüş (Desaturated) Renk Paleti Kurun

Aydınlık temadaki canlı renkler, koyu arka plan üzerinde titreşiyor gibi görünür ve okunabilirliği bozar.

Doygunluk (Saturation) Seviyesini Düşürün: Vurgu ve buton renklerinizin doygunluğunu %20-%40 oranında azaltın.
Pastel Tonlara Yaklaşın: Koyu arka planda görünürlüğü artırmak için daha açık (lighter tone) ve desatüre renk tonları seçin.

Önemli Kural: Aydınlık modda kullanılan marka ana rengini doğrudan karanlık moda taşımayın. Rengin 200 veya 300 ton varyasyonunu türeterek koyu arka plana uyarlayın.

Adım 4: Katman (Elevation) Mantığı ile Derinlik Oluşturun

Aydınlık modda gölgeler (box-shadow) derinlik sağlarken, karanlık modda gölgeler görünmez olur. Derinliği yüzey aydınlığıyla oluşturun.

Zemin Katmanı (Base): En koyu ton (Örn: #121212).
Kart / Kartvizit Katmanı (Elevation 1): Hafif açık ton (Örn: #1E1E1E).
Açılır Menü / Modal Katmanı (Elevation 2): Daha açık ton (Örn: #2C2C2C).

Adım 5: CSS Değişkenleri ve Medya Sorguları ile Uygulama

Modern web projelerinde sistem temasını algılamak için prefers-color-scheme medya sorgusu ve CSS custom properties kullanın.

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

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

Özet Kontrol Listesi

Dijital ajans standartlarında kusursuz bir dark mode için yayına almadan önce şu adımları doğrulayın:

Saf siyah yerine koyu gri taban kullanıldı mı?
Kontrast oranı en az 4.5:1 seviyesinde mi?
Görseller ve ikonlar koyu temaya göre optimize edildi mi?
Farklı katmanlar yüzey aydınlığı ile ayrıştırıldı mı?