Dark Mode

Dark Mode Nedir?

Koyu arka plan + açık metin kullanan alternatif renk şeması. iOS 13 ve Android 10 ile sistem seviyesinde destek geldi. 2026 itibarıyla kullanıcıların büyük çoğunluğu dark mode tercih etmektedir ve Apple/Google her ikisi de dark mode desteğini uygulama kalite kriteri olarak değerlendirmektedir.

Neden Desteklenmeli?

• Kullanıcıların %80+'si dark mode tercih ediyor
• OLED ekranlarda batarya tasarrufu (saf siyah pikseller kapalı kalır)
• Düşük ışıkta göz yorgunluğu azalır
• Modern ve premium hissiyat
• Apple/Google store featuring'de avantaj
• Accessibility: Yüksek duyarlılığı olan kullanıcılar için daha rahat

Tasarım İlkeleri

Renk Seçimi

• Saf siyah (#000000) yerine koyu gri (#121212, #1a1a1a) tercih et
• Saf beyaz (#FFFFFF) metin yerine hafif gri (#E0E0E0) kullan
• Yüksek kontrast göz yorar; 15.8:1 yerine 11:1-13:1 arası ideal
• Marka renklerini dark mode'a uyarla (daha açık/pastel tonlar)
• OLED ekranlar için saf siyah arka plan opsiyonu sunabilirsin (batarya tasarrufu)

Elevation

• Light mode: Shadow ile derinlik
• Dark mode: Daha açık yüzey rengi ile derinlik
• Shadow dark mode'da görülmez, surface tone kullan
• Material Design 3: Tonal elevation (yüzey rengi koyudan açığa)
• Her elevation seviyesi için belirli overlay opacity tanımla

Görsel İçerik

• İkonlar ve illüstrasyonlar her iki modda test edilmeli
• Beyaz arka planlı görsel dark mode'da kötü görünür
• Transparent PNG'ler tercih et
• SVG ikonlarda currentColor kullanarak otomatik tema uyumu sağla
• Asset Catalog (iOS) ve night qualifier (Android) ile mod bazlı asset

Metin Hiyerarşisi

• Primary text: %87 opacity beyaz
• Secondary text: %60 opacity beyaz
• Disabled text: %38 opacity beyaz
• (Material Design önerileri)
• iOS'ta semantic colors kullan: label, secondaryLabel, tertiaryLabel, quaternaryLabel

Platform Implementasyonu

iOS (SwiftUI)

• @Environment(\.colorScheme) ile mevcut tema algılama
• Color asset'leri Asset Catalog'da light/dark varyant tanımla
• preferredColorScheme(.dark) ile uygulama bazında zorlama
• UIUserInterfaceStyle ile system, light, dark seçimi
• Semantic system colors otomatik uyum sağlar (systemBackground, label vb.)

iOS (UIKit)

• traitCollection.userInterfaceStyle kontrolü
• traitCollectionDidChange ile dinamik değişim
• CGColor'ları resolvedColor ile çözümle

Android (Jetpack Compose)

• isSystemInDarkTheme() ile sistem temasını algıla
• MaterialTheme ile light/dark color scheme tanımla
• darkColorScheme() ve lightColorScheme() ile renk paletleri

Android (XML)

• values-night/ klasöründe dark mode renkleri tanımla
• AppCompatDelegate.setDefaultNightMode() ile zorlama
• ?attr/colorSurface gibi theme attribute'ları kullan

React Native

• useColorScheme() hook'u ile sistem teması algılama
• Appearance API ile değişiklikleri dinleme
• Context veya state management ile tema yönetimi
• StyleSheet yerine tema bazlı stil objesi oluştur

// React Native Dark Mode Örneği
import { useColorScheme } from 'react-native';

const colors = {
  light: { background: '#FFFFFF', text: '#1a1a1a', card: '#F5F5F5' },
  dark: { background: '#121212', text: '#E0E0E0', card: '#1E1E1E' }
};

function App() {
  const scheme = useColorScheme(); // 'light' | 'dark'
  const theme = colors[scheme ?? 'light'];
  // ...
}

Kullanıcı Tercihi Yönetimi

Üç seçenek sun:

1. Sistem (varsayılan): Cihaz ayarına uyum
2. Açık (Light): Her zaman açık tema
3. Koyu (Dark): Her zaman karanlık tema

Bu tercihi AsyncStorage/UserDefaults/SharedPreferences ile sakla.

Test Kontrol Listesi

• Tüm ekranlar dark mode'da kontrol edildi mi?
• Metin kontrast oranları yeterli mi? (WCAG AA: 4.5:1)
• Görseller ve ikonlar dark mode'da düzgün görünüyor mu?
• Status bar rengi tema ile uyumlu mu?
• Splash screen dark mode'a uygun mu?
• Üçüncü parti kütüphane UI'ları tema uyumlu mu?
• Sistem tema değişiminde uygulama anlık uyum sağlıyor mu?
• Navigation bar ve tab bar renkleri doğru mu?

Yaygın Hatalar

• Sabit renk kodları kullanmak (tema değişiminde uyumsuzluk)
• Shadow'ları dark mode'da kaldırmamak (görünmez ama performans yükü)
• Placeholder görsellerde beyaz arka plan bırakmak
• Dark mode'u "sadece renkleri tersine çevirmek" olarak görmek
• Status bar'ı light content yapmayı unutmak

Dark mode artık "olsa iyi olur" değil, kullanıcı beklentisidir. İlk günden iki tema desteği ile geliştirin, sonradan eklemek çok daha zordur.

İlgili Konular

• Human Interface Guidelines (Apple)
• Widgets (iOS & Android)
• Device Testing (Cihaz Testi)