Karanlık Mod — nedir, mobil uygulamalarda karanlık arayüz teması

Karanlık Mod nedir ve neden gereklidir?

Karanlık Mod, ekran arka planının koyu (genellikle Android'de #121212, iOS'te #1C1C1E) olduğu, metin ve arayüz öğelerinin ise açık olduğu bir renk şemasıdır. Basit renk tersine çevirmenin aksine, kaliteli bir Karanlık Mod özenle seçilmiş bir palet kullanır: saf siyah yerine koyu gri arka plan (hale etkisini azaltır), düşük doygunlukta vurgu renkleri ve yumuşak gölgeler. Sistem düzeyinde Karanlık Mod desteği iOS 13 (Eylül 2019) ve Android 10'da (Eylül 2019) ortaya çıktı.

Benimsenmesinin ana nedeni kullanıcı konforudur. Düşük ışıkta (akşam, karanlıkta) parlak beyaz bir ekran göz yorgunluğuna neden olur ve baş ağrısını tetikleyebilir. Karanlık Mod, okunabilirlikten ödün vermeden ekran parlaklığını azaltır. Fotofobisi veya ışığa duyarlılığı olan kullanıcılar için karanlık tema bir seçenek değil, bir uygulamayı rahatça kullanmanın tek yoludur. Android Developers'a göre, Android kullanıcılarının %30'undan fazlası karanlık temayı her zaman açık tutar.

Karanlık Mod, OLED ekranlarda pil tasarrufu sağlar. LCD'den farklı olarak, arkadan aydınlatma her zaman açıkken, OLED pikseller kendi kendine parlar. Koyu bir renk, pikselin kapalı olduğu anlamına gelir — güç tüketimi düşer. Google'a (Android Developers Blog, 2019) göre, OLED ekranlı bir Pixel'de %100 parlaklıkta Karanlık Mod, açık temaya kıyasla güç tüketimini %60 azaltır. LCD ekranlarda tasarruf minimumdur (yaklaşık %3–5) çünkü matris arka aydınlatması piksel renginden bağımsız olarak çalışır.

Mobil işletim sistemlerinde Karanlık Mod'un tarihi

Sistem desteği birkaç aşamadan geçti. iOS 13 (2019), UIUserInterfaceStyle aracılığıyla küresel bir karanlık tema tanıttı. Android 10 (2019), kendi karanlık teması olmayan uygulamalar için Force Dark Mode'u ekledi. Android 12 (2021) ile Material You, duvar kağıtlarından otomatik olarak karanlık palet oluşturmaya başladı. iOS 15 (2021), Safari ve web içeriği için API'yi genişletti. StatCounter'e (2026) göre, App Store ve Google Play'deki ilk 100 uygulamanın %82'si Karanlık Mod'u desteklemektedir.

iOS'te Karanlık Mod: Swift API ve UIKit desteği

iOS Karanlık Mod API'si, UITraitEnvironment protokolüne dayanır. Her UIViewController ve UIView, .unspecified, .light veya .dark olabilen traitCollection.userInterfaceStyle özelliğine sahiptir. Sistem teması değiştiğinde, iOS traitCollectionDidChange(_:) yöntemini çağırır. Geliştirici, bu yöntemde renkleri güncellemeli veya açık ve karanlık palet arasında otomatik olarak geçiş yapan dinamik renkleri (UIColor(dynamicProvider:)) kullanmalıdır.

class ViewController: UIViewController {

    @IBOutlet var titleLabel: UILabel!

    override func traitCollectionDidChange(_: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
            updateColors()
        }
    }

    func updateColors() {
        let isDark = traitCollection.userInterfaceStyle == .dark
        view.backgroundColor = isDark ? UIColor(named: "darkBackground") : .systemBackground
        titleLabel.textColor = isDark ? .white : .darkText
    }
}

// Karanlık Mod'u zorla etkinleştir
window.overrideUserInterfaceStyle = .dark

Dinamik renkler — iOS'te Karanlık Mod uygulamanın en iyi yoludur. UIColor(named:), .light ve .dark görünümler için Varlık Kataloğu'ndan otomatik olarak farklı değerler yükler. Assets.xcassets'te iki varyantla (Any Appearance + Dark Appearance) bir renk tanımlamanız yeterlidir ve UIKit otomatik olarak doğru olanı seçer. Dinamik sistem renkleri (UIColor.systemBackground, .label, .secondaryLabel) zaten Karanlık Mod'u destekler ve otomatik olarak değişir.

SwiftUI ve Karanlık Mod

SwiftUI, Karanlık Mod'u kutudan çıktığı gibi destekler. Tüm standart renkler ve değiştiriciler (Color.primary, .background, Color(UIColor.systemBackground)) otomatik olarak uyum sağlar. Özel renkler için dinamik bir UIColor ile Color(uiColor:) veya açık tema kontrolü için @Environment(\.colorScheme) değişkenini kullanın. SwiftUI View, traitCollectionDidChange çağırmaya gerek kalmadan tema değiştiğinde otomatik olarak yeniden çizilir.

struct ThemeView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("Karanlık Mod")
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .background(colorScheme == .dark ? Color(.systemGray6) : .white)
    }
}

Android'de Karanlık Mod: Kotlin API ve AppCompat

Android Karanlık Mod, AppCompat kitaplığı ve Theme.AppCompat.DayNight teması aracılığıyla uygulanır. Gündüz açık tema, gece ise karanlık tema kullanılır. Zorunlu etkinleştirme, AppCompatDelegate.setDefaultNightMode() ile ayarlanır: MODE_NIGHT_YES (karanlık), MODE_NIGHT_NO (açık), MODE_NIGHT_FOLLOW_SYSTEM (sistem). Kaynaklar açık (res/values/styles.xml) ve karanlık (res/values-night/styles.xml) olarak ayrılır.

// Karanlık temayı zorla etkinleştir
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // super.onCreate'dan önce ayarla
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Geçerli temayı belirle
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// AndroidManifest.xml'de gece modunu kaydet
// android:configChanges="uiMode"

Force Dark Mode, Android 10+'da karanlık tema desteği olmayan uygulamaların renklerini otomatik olarak tersine çeviren bir sistem özelliğidir. Geliştirici seçenekleri veya temadaki android:forceDarkAllowed="true" niteliği aracılığıyla etkinleştirilir. Bu geçici bir çözümdür: üretim için, values-night aracılığıyla kendi karanlık paletinizi uygulamanız gerekir, aksi takdirde görsel kalite düşük olur (ters çevrilmiş simgeler, okunması zor renkler).

Material You Dynamic Themes

Material You (Android 12+), cihazın duvar kağıdından otomatik olarak 5 ana renk oluşturur: primary, secondary, tertiary, neutral, neutralVariant. Her renk için açık ve karanlık paletler oluşturulur. Geliştirici nitelikleri kullanır: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Sistem, geçerli tema için varyantı kendisi seçer. Dynamic Color, Material Design 3 (com.google.android.material:material bileşeni) ile Android 12+'da desteklenir.

// values/themes.xml — açık tema
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_light</item>
    <item name="colorOnPrimary">@color/on_primary_light</item>
</style>

// values-night/themes.xml — karanlık tema
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Karanlık tema tasarımı: kontrast ve renk kuralları

Karanlık Mod tasarımı sadece renkleri tersine çevirmek değildir. Google Material Design, saf siyah yerine koyu gri (#121212) kullanılmasını önerir. Saf siyah (#000000), beyaz metinle çok yüksek kontrast oluşturarak hale etkisine (harflerin etrafında parıltı) neden olur. Öğelerin yükseklik seviyesi renkle ifade edilir: öğe ne kadar yüksekse, arka planı o kadar açıktır. Arka plan üzerinde kart — #1E1E1E, iletişim kutusu — #2D2D2D, gezinme paneli — #383838.

Renk kontrastı Karanlık Mod'da Açık Mod'dan daha düşük olmalıdır. Material Design şunları önerir: birincil metin — beyaz (#FFFFFF) %87 opaklıkla, ikincil — %60, devre dışı — %38. Vurgu renkleri daha az doygun olmalıdır: açık temada primary = #6200EE ise, karanlık temada — #BB86FC (açık, yumuşak mor). WCAG 2.1'e göre, normal metin için minimum 4.5:1 kontrastı her iki temada da korunmalıdır.

Görseller ve simgeler karanlık temada ayrı işlem gerektirir. Şeffaflığa sahip simgeler açık renklere boyanmalıdır. Arka planı parlak olan fotoğraflar kamaşmaya neden olabilir — parlaklığı %20–30 azaltmanız veya yarı saydam bir katman eklemeniz önerilir. Logolar ve marka öğeleri için karanlık arka plan sürümünü kullanın. iOS Varlık Kataloğu ve Android VectorDrawable, açık ve karanlık temalar için ayrı kaynakları destekler.

Karanlık Mod ve Açık Mod: avantajlar ve dezavantajlar

Temalar arasında seçim, kullanım koşullarına, içerik türüne ve kullanıcı tercihlerine bağlıdır. Nielsen Norman Group (2020) tarafından yapılan bir araştırma gösterdi: normal aydınlatmada Açık Mod, %15–20 daha yüksek okuma hızı sağlar. Ancak düşük ışık koşullarında Karanlık Mod, göz yorgunluğunu azaltır ve okunabilirliği artırır. Büyük miktarda metin (makaleler, belgeler) içeren arayüzler için Açık Mod genellikle tercih edilir.

Güç tüketimi, OLED'de Karanlık Mod için önemli bir argümandır. Google'a (2019) göre, OLED ekranda karanlık temadaki YouTube, açık temaya göre %43 daha az enerji tüketir. Google Haritalar — %32. Arayüz ne kadar parlaksa ve ekran parlaklığı ne kadar yüksekse tasarruf o kadar büyük olur. LCD ekranlarda tasarruf %5'i geçmez. Uygulamayı parlak güneş altında dışarıda çokça kullanan kullanıcılar için Açık Mod okunabilir tek seçenek olmaya devam etmektedir.

IT Sectr önerileri — geçiş seçenekleriyle (sistemi takip et, karanlık, açık) her iki temayı da uyguluyoruz. Otomatik geçiş tek seçenek olmamalıdır — kullanıcı gündüz karanlık temayı (migren için) veya gece açık temayı (okumak için) isteyebilir. Projelerimizde profil ayarlarına bir tema değiştirici ekliyoruz ve seçimi hatırlıyoruz. Premium içerikli (fotoğraf, video) uygulamalarda, uygulamadan önce tema önizlemesi önerilir.