Proje: OkulUp · Hub: OkulUp — Domain
Dark Mode Sistemi
Temel Yaklaşım
Hardcoded renk yasak. Tüm renkler useTheme() hook’undan colors objesi üzerinden.
useTheme() Hook’u
const { isDark, colors, brand } = useTheme();colors → ThemeColors interface — light veya dark tema renkleri
Renk Token’ları
| Token | Light | Dark | Kullanım |
|---|---|---|---|
background | FFFFFF | 0F172A | Sayfa arka planı |
backgroundAlt | F9FAFB | #111827 | Section arka planı |
backgroundElevated | FFFFFF | 1E293B | Modal, bottom sheet |
card | FFFFFF | 1E293B | Kart arka planı |
cardHover | F9FAFB | #334155 | Hover state |
textPrimary | #111827 | F1F5F9 | Ana metin |
textSecondary | 6B7280 | 94A3B8 | İkincil metin |
textMuted | 9CA3AF | 64748B | Placeholder, zaman |
textInverse | FFFFFF | 0F172A | Primary buton içi |
border | E5E7EB | #374151 | Kalın border |
borderLight | F3F4F6 | 1F2937 | İnce border |
activeBackground | FFF0E6 | 3D2517 | Aktif item arka planı |
activeText | FF5F1F | FF7A45 | Aktif item metin |
primary | FF5F1F | FF5F1F | Marka rengi (sabit) |
primaryLight | FFF1EB | 3D2517 | Primary light |
success | 10B981 | 34D399 | Başarı |
error | EF4444 | F87171 | Hata |
warning | F59E0B | FBBF24 | Uyarı |
info | 3B82F6 | 60A5FA | Bilgi |
Tema Modu
3 seçenek: 'light' | 'dark' | 'system'
Default: 'system' (iOS/Android system theme takip eder)
Persist: AsyncStorage (theme-storage)
Sabit Kalabilen Renkler
#FF5F1F— primary brand (her iki temada aynı)$white— primary buton içindeki beyaz metin- Icon arka plan renkleri (özel tasarım)
Özel Dark Mode Durumu
const specialBg = isDark ? '#3D2517' : '#fff7ed';Bu pattern sadece colors objesinde karşılığı olmayan özel durumlarda.
Nerede Switch Yapılıyor?
ThemeToggle bileşeni — Drawer’ın alt kısmında
toggleTheme() → light/dark toggle
Related
- conventions-component-architecture — hardcoded renk yasağı
- navigation-architecture — Drawer içindeki ThemeToggle