Dark Mode Tasarımına Giriş

Dark mode (karanlık mod), modern web tasarımında estetik tercih olmanın ötesinde bir erişilebilirlik ve enerji verimliliği standardıdır. Başarılı bir dijital ajans işinde karanlık mod entegrasyonu, renkleri tersyüz etmekten (invert) ibaret değildir. Göz yorgunluğunu önleyen, WCAG standartlarına uygun ve marka kimliğini koruyan bir renk sistemi gerektirir.

Adım 1: Saf Siyahtan Kaçınma ve Taban Yüzeyleri Belirleme

Saf siyah (#000000) arka planlar, saf beyaz metinlerle birleştiğinde yüksek kontrast nedeniyle 'haloing' (ışık saçılması) ve göz yorgunluğu yaratır. Doğru yaklaşım koyu gri veya soğuk tonlu antrasit tonları seçmektir.

Taban Arka Plan: #121212 veya #0F172A (Slate).
Yüzey (Surface) 1: #1E1E1E (Kartlar, paneller).
Yüzey (Surface) 2: #2D2D2D (Açılır menüler, modallar).

Kural: OLED ekranlarda pil tasarrufu sağlansa bile kullanıcı deneyimi için saf siyah yerine minimum %5-10 parlaklığa sahip gri tonları tercih edin.

Adım 2: Metin Hiyerarşisi ve WCAG Kontrast Oranları

Metin görünürlüğü için Web Content Accessibility Guidelines (WCAG) AA seviyesi en az 4.5:1 kontrast oranı zorunlu tutar. Beyaz metinlerde opaklık hiyerarşisi kurun:

Birincil Metin (High Emphasis): rgba(255, 255, 255, 0.87) - %87 opaklık.
İkincil Metin (Medium Emphasis): rgba(255, 255, 255, 0.60) - %60 opaklık.
Devre Dışı / İpucu (Disabled): rgba(255, 255, 255, 0.38) - %38 opaklık.

Adım 3: Vurgu (Accent) Renklerini Desatüre Etme

Açık temadaki doymuş (canlı) renkler, karanlık yüzeylerde titreşir ve okunabilirliği bozar. Marka renklerinin parlaklığını (lightness) artırın, doygunluğunu (saturation) düşürün.

Açık Tema Buton: #0052CC (Doygun mavi)
Dark Mode Karşılığı: #82B1FF (Pastel, desatüre mavi)

Adım 4: Gölgeler Yerine Derinlik (Elevation) Kullanımı

Karanlık arka planda siyah gölgeler (box-shadow) görünmez. Derinlik hissi vermek için yüzey renginin açıklığını katman katman artırın (Elevation Overlay):

Zemin (0dp): #121212
Kart (1dp): #1E1E1E (%5 beyaz katman)
Dialog/Modal (8dp): #2C2C2C (%12 beyaz katman)

Adım 5: CSS Değişkenleri ile Kodlama

Trendler doğrultusunda modern web uygulamalarında tema geçişi CSS Custom Properties ve prefers-color-scheme medya sorgusuyla yapılmalıdır:

:root {
  --bg-primary: #FFFFFF;
  --text-primary: #1A1A1A;
  --accent: #0052CC;
}

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

[data-theme="dark"] {
  --bg-primary: #121212;
  --text-primary: rgba(255, 255, 255, 0.87);
  --accent: #82B1FF;
}

Özet Kontrol Listesi

Arka planda #000000 kullanılmadı.
Gövde metni kontrastı minimum 4.5:1.
Tüm vurgu renkleri desatüre edildi.
Derinlik için gölge yerine yüzey aydınlığı kullanıldı.
İmaj ve ikon kontrastları kontrol edildi.