Dark Mode — bu nədir, mobil tətbiqlərdə qaranlıq interfeys mövzusu

Dark Mode nədir və niyə lazımdır?

Dark Mode — ekran fonunun qaranlıq (adətən Android-də #121212, iOS-da #1C1C1E), mətn və interfeys elementlərinin isə açıq rəngdə olduğu rəng sxemidir. Sadə rəng inversiyasından fərqli olaraq, keyfiyyətli Dark Mode xüsusi seçilmiş palitradan istifadə edir: təmiz qara əvəzinə tünd boz fon (halo effektini azaldır), aşağı doymuşluqda vurğu rəngləri və yumşaq kölgələr. Dark Mode-un sistem dəstəyi iOS 13 (sentyabr 2019) və Android 10-da (sentyabr 2019) ortaya çıxdı.

Əsas tətbiq səbəbi — istifadəçi rahatlığı. Zəif işıqlandırmada (axşam, qaranlıqda) parlaq ağ ekran göz gərginliyinə səbəb olur və baş ağrısına gətirib çıxara bilər. Dark Mode oxunma qabiliyyətini itirmədən ekran parlaqlığını azaldır. Fotofobiya və ya işığa həssaslığı olan istifadəçilər üçün qaranlıq mövzu seçim deyil, tətbiqdən rahat istifadə etmək üçün yeganə imkandır. Android Developers məlumatına görə, Android istifadəçilərinin 30%-dən çoxu daima qaranlıq mövzunu aktiv vəziyyətdə saxlayır.

Dark Mode batareyaya qənaət edir OLED ekranlarda. LCD-dən fərqli olaraq, arxa işıqlandırma daima yandıqda, OLED pikselləri özbaşına işıqlanır. Qaranlıq rəng pikselin söndürüldüyü anlamına gəlir — enerji istehlakı azalır. Google (Android Developers Blog, 2019) məlumatına görə, OLED ekranlı Pixel-də 100% parlaqlıqda Dark Mode enerji istehlakını açıq mövzu ilə müqayisədə 60% azaldır. LCD ekranlarda qənaət minimaldır (təxminən 3–5%), çünki matrisanın arxa işıqlandırması piksel rəngindən asılı olmayaraq işləyir.

Mobil ƏS-lərdə Dark Mode-un tarixi

Sistem dəstəyi Dark Mode bir neçə mərhələdən keçdi. iOS 13 (2019) UIUserInterfaceStyle vasitəsilə qlobal qaranlıq mövzu təqdim etdi. Android 10 (2019) öz qaranlıq mövzusu olmayan tətbiqlər üçün Force Dark Mode əlavə etdi. Android 12 (2021) Material You ilə divar kağızından avtomatik qaranlıq palitra yaratmağa başladı. iOS 15 (2021) API-ni Safari və veb məzmun üçün genişləndirdi. StatCounter (2026) məlumatına görə, App Store və Google Play-də top-100 tətbiqin 82%-i Dark Mode-u dəstəkləyir.

iOS-da Dark Mode: Swift API və UIKit dəstəyi

iOS Dark Mode API UITraitEnvironment protokoluna əsaslanır. Hər UIViewController və UIView-in traitCollection.userInterfaceStyle xüsusiyyəti var, hansı ki .unspecified, .light və ya .dark ola bilər. Sistem mövzusu dəyişdikdə iOS traitCollectionDidChange(_:) metodunu çağırır. Tərtibatçı bu metoddakı rəngləri yeniləməli və ya avtomatik olaraq açıq və qaranlıq palitra arasında keçid edən dinamik rənglərdən (UIColor(dynamicProvider:)) istifadə etməlidir.

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
    }
}

// Dark Mode-un məcburi aktivləşdirilməsi
window.overrideUserInterfaceStyle = .dark

Dinamik rənglər — iOS-da Dark Mode-un ən yaxşı tətbiq üsuludur. UIColor(named:) Asset Catalog-dan .light və .dark görünüşü üçün fərqli dəyərləri avtomatik yükləyir. Assets.xcassets-da iki variant (Any Appearance + Dark Appearance) ilə rəng təyin etmək kifayətdir, UIKit özü lazım olanı seçəcək. Dinamik sistem rəngləri (UIColor.systemBackground, .label, .secondaryLabel) artıq Dark Mode-u dəstəkləyir və avtomatik dəyişir.

SwiftUI və Dark Mode

SwiftUI Dark Mode-u qutudan çıxan kimi dəstəkləyir. Bütün standart rənglər və modifierlər (Color.primary, .background, Color(UIColor.systemBackground)) avtomatik uyğunlaşır. Xüsusi rənglər üçün dinamik UIColor ilə Color(uiColor:) və ya mövzunun açıq yoxlanması üçün @Environment(\.colorScheme) mühit dəyişənindən istifadə edin. SwiftUI View-i mövzu dəyişdikdə traitCollectionDidChange çağırmadan avtomatik yenidən çəkilir.

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

    var body: some View {
        Text("Dark Mode")
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .background(colorScheme == .dark ? Color(.systemGray6) : .white)
    }
}

Android-də Dark Mode: Kotlin API və AppCompat

Android Dark Mode AppCompat kitabxanası və Theme.AppCompat.DayNight mövzusu vasitəsilə həyata keçirilir. Gündüz açıq mövzu, gecə isə qaranlıq mövzu istifadə olunur. Məcburi aktivləşdirmə AppCompatDelegate.setDefaultNightMode() ilə təyin edilir: MODE_NIGHT_YES (qaranlıq), MODE_NIGHT_NO (açıq), MODE_NIGHT_FOLLOW_SYSTEM (sistem). Resurslar açıq (res/values/styles.xml) və qaranlıq (res/values-night/styles.xml) bölünür.

// Qaranlıq mövzunun məcburi aktivləşdirilməsi
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // super.onCreate-dən əvvəl quraşdırma
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Cari mövzunun müəyyən edilməsi
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// AndroidManifest.xml-də gecə rejiminin qeydiyyatı
// android:configChanges="uiMode"

Force Dark Mode — qaranlıq mövzunu dəstəkləməyən tətbiqlərin rənglərini avtomatik tərsinə çevirən Android 10+ sistem funksiyasıdır. Tərtibatçı parametrləri və ya mövzuda android:forceDarkAllowed="true" atributu vasitəsilə aktivləşdirilir. Bu müvəqqəti həll yoludur: istehsal üçün values-night vasitəsilə öz qaranlıq palitranızı tətbiq etməlisiniz, əks halda vizual keyfiyyət aşağı olacaq (tərsinə çevrilmiş ikonlar, zəif oxunan rənglər).

Material You Dynamic Themes

Material You (Android 12+) cihazın divar kağızından avtomatik olaraq 5 əsas rəng yaradır: primary, secondary, tertiary, neutral, neutralVariant. Hər rəng üçün açıq və qaranlıq palitralar yaradılır. Tərtibatçı atributlardan istifadə edir: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Sistem cari mövzu üçün variantı özü seçir. Dynamic Color Material Design 3 ilə Android 12+-da dəstəklənir (komponent com.google.android.material:material).

// values/themes.xml — açıq mövzu
<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 — qaranlıq mövzu
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Qaranlıq mövzu dizaynı: kontrast və rəng qaydaları

Dark Mode dizaynı — sadəcə rəng inversiyası deyil. Google Material Design təmiz qara əvəzinə tünd boz (#121212) istifadə etməyi tövsiyə edir. Təmiz qara (#000000) ağ mətnlə çox yüksək kontrast yaradaraq halo effektinə (hərflər ətrafında parıltı) səbəb olur. Elementlərin yüksəklik (elevasiya) səviyyəsi rəng vasitəsilə təyin edilir: element nə qədər yüksəkdirsə, fonu bir o qədər açıqdır. Fon üzərində kart — #1E1E1E, dialoq — #2D2D2D, naviqasiya paneli — #383838.

Rəng kontrastı Dark Mode-da Light Mode-dan aşağı olmalıdır. Material Design tövsiyə edir: primary mətni — ağ (#FFFFFF) 87% qeyri-şəffaflıqla, secondary — 60%, disabled — 38%. Vurğu rəngləri daha az doymuş olmalıdır: açıq mövzuda primary = #6200EE, qaranlıqda — #BB86FC (açıq, yumşaq bənövşəyi). WCAG 2.1-ə görə, adi mətn üçün minimum kontrast 4.5:1 hər iki mövzuda qorunmalıdır.

Şəkillər və ikonlar qaranlıq mövzuda xüsusi emal tələb edir. Şəffaflığı olan ikonlar açıq rəngə boyanmalıdır. Parlaq fonlu fotoşəkillər korlaşdırıcı görünə bilər — parlaqlığı 20–30% azaltmaq və ya yarı şəffaf örtük əlavə etmək tövsiyə olunur. Logolar və marka elementləri üçün qaranlıq fon üçün versiyadan istifadə edin. iOS Asset Catalog və Android VectorDrawable açıq və qaranlıq mövzu üçün ayrıca resursları dəstəkləyir.

Dark Mode və Light Mode müqayisəsi: müsbət və mənfi cəhətlər

Mövzu seçimi istifadə şərtlərindən, məzmun növündən və istifadəçi seçimlərindən asılıdır. Nielsen Norman Group (2020) tədqiqatı göstərdi: normal işıqlandırmada Light Mode oxuma sürətini 15–20% artırır. Lakin zəif işıqlandırma şəraitində Dark Mode göz yorğunluğunu azaldır və oxunma qabiliyyətini yaxşılaşdırır. Çox miqdarda mətn olan interfeyslər üçün (məqalələr, sənədlər) Light Mode adətən daha üstündür.

Enerji istehlakı — OLED-də Dark Mode üçün əsas arqumentdir. Google (2019) məlumatına görə, YouTube qaranlıq mövzuda OLED ekranda açıq mövzu ilə müqayisədə 43% az enerji sərf edir. Google Maps — 32%. İnterfeys nə qədər parlaq və ekran parlaqlığı nə qədər yüksəkdirsə, qənaət də bir o qədər əhəmiyyətlidir. LCD ekranlarda qənaət 5%-i keçmir. Tətbiqdən kənarda parlaq günəş altında çox işləyən istifadəçilər üçün Light Mode yeganə oxuna bilən seçim olaraq qalır.

IT Sectr tövsiyələri — hər iki mövzunu dəyişmə imkanı ilə tətbiq edirik: sistem (follow system), qaranlıq, açıq. Avtomatik keçid yeganə seçim olmamalıdır — istifadəçi gündüz (miqren zamanı) qaranlıq mövzu və ya gecə (oxuyarkən) açıq mövzu istəyə bilər. Layihələrimizdə profil parametrlərində mövzu keçidini əlavə edirik və seçimi yadda saxlayırıq. Premium məzmunlu tətbiqlər üçün (foto, video) tətbiq etmədən əvvəl mövzu önizləməsi tövsiyə olunur.