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.userInterfaceStylekontrolütraitCollectionDidChangeile 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()velightColorScheme()ile renk paletleri
Android (XML)
values-night/klasöründe dark mode renkleri tanımlaAppCompatDelegate.setDefaultNightMode()ile zorlama?attr/colorSurfacegibi 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:
- Sistem (varsayılan): Cihaz ayarına uyum
- Açık (Light): Her zaman açık tema
- 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.