Dark Mode — bu nima, mobil ilovalarda qorongʻu interfeys mavzusi

Dark Mode nima va nima uchun kerak?

Dark Mode — ekran foni qorongʻi (odatda Android da #121212, iOS da #1C1C1E), matn va interfeys elementlari ochiq rangda boʻlgan rang sxemasi. Oddiy rang inversiyasidan farqli oʻlaroq, sifatli Dark Mode maxsus tanlangan palitradan foydalanadi: toza qora oʻrniga toʻq kulrang fon (halo effektini kamaytiradi), past toʻyinganlikdagi urgʻu ranglari va yumshoq soyalar. Dark Mode ning tizimli qoʻllab-quvvatlashi iOS 13 (sentyabr 2019) va Android 10 da (sentyabr 2019) paydo boʻldi.

Asosiy joriy etish sababi — foydalanuvchi qulayligi. Zaif yoritishda (kechqurun, qorongʻida) yorqin oq ekran koʻz zoʻriqishiga sabab boʻladi va bosh ogʻrigʻiga olib kelishi mumkin. Dark Mode oʻqish qobiliyatini yoʻqotmasdan ekran yorqinligini kamaytiradi. Fotofobiya yoki yorugʻlikka sezgirligi boʻlgan foydalanuvchilar uchun qorongʻu mavzu tanlov emas, balki ilovadan qulay foydalanishning yagona imkoniyatidir. Android Developers maʼlumotlariga koʻra, Android foydalanuvchilarining 30% dan ortigʻi doimiy ravishda qorongʻu mavzuni yoqadi.

Dark Mode batareyani tejaydi OLED ekranlarda. LCD dan farqli oʻlaroq, orqa yoritish doimo yoniq boʻlganida, OLED piksellari mustaqil ravishda yoritiladi. Qorongʻu rang pikselning oʻchirilganligini anglatadi — energiya isteʼmoli pasayadi. Google (Android Developers Blog, 2019) maʼlumotlariga koʻra, OLED ekranli Pixel da 100% yorqinlikda Dark Mode energiya isteʼmolini ochiq mavzuga nisbatan 60% ga kamaytiradi. LCD ekranlarda tejamkorlik minimal (taxminan 3–5%), chunki matritsaning orqa yoritilishi piksel rangidan qatʼiy nazar ishlaydi.

Mobil OT larda Dark Mode tarixi

Tizimli qoʻllab-quvvatlash Dark Mode bir necha bosqichdan oʻtdi. iOS 13 (2019) UIUserInterfaceStyle orqali global qorongʻu mavzuni taqdim etdi. Android 10 (2019) oʻz qorongʻu mavzusi boʻlmagan ilovalar uchun Force Dark Mode ni qoʻshdi. Android 12 (2021) Material You bilan fon rasmidan avtomatik qorongʻu palitra yaratishni boshladi. iOS 15 (2021) API ni Safari va veb-kontent uchun kengaytirdi. StatCounter (2026) maʼlumotlariga koʻra, App Store va Google Play dagi top-100 ilovalarning 82% i Dark Mode ni qoʻllab-quvvatlaydi.

iOS da Dark Mode: Swift API va UIKit qoʻllab-quvvatlashi

iOS Dark Mode API UITraitEnvironment protokoliga asoslanadi. Har bir UIViewController va UIView traitCollection.userInterfaceStyle xususiyatiga ega boʻlib, u .unspecified, .light yoki .dark boʻlishi mumkin. Tizim mavzusi oʻzgarganda iOS traitCollectionDidChange(_:) metodini chaqiradi. Dasturchi ushbu metoddagi ranglarni yangilashi yoki ochiq va qorongʻu palitra oʻrtasida avtomatik oʻtadigan dinamik ranglardan (UIColor(dynamicProvider:)) foydalanishi kerak.

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 ni majburiy yoqish
window.overrideUserInterfaceStyle = .dark

Dinamik ranglar — iOS da Dark Mode ni amalga oshirishning eng yaxshi usuli. UIColor(named:) Asset Catalog dan .light va .dark koʻrinish uchun turli qiymatlarni avtomatik yuklaydi. Assets.xcassets da ikki variant (Any Appearance + Dark Appearance) bilan rangni sozlash kifoya, UIKit oʻzi keraklisini tanlaydi. Dinamik tizim ranglari (UIColor.systemBackground, .label, .secondaryLabel) allaqachon Dark Mode ni qoʻllab-quvvatlaydi va avtomatik oʻzgaradi.

SwiftUI va Dark Mode

SwiftUI Dark Mode ni qutidan chiqqandayoq qoʻllab-quvvatlaydi. Barcha standart ranglar va modifierlar (Color.primary, .background, Color(UIColor.systemBackground)) avtomatik moslashadi. Maxsus ranglar uchun dinamik UIColor bilan Color(uiColor:) yoki @Environment(\.colorScheme) muhit oʻzgaruvchisidan mavzuni aniq tekshirish uchun foydalaning. SwiftUI View mavzu oʻzgarganda traitCollectionDidChange ni chaqirmasdan avtomatik qayta chiziladi.

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 da Dark Mode: Kotlin API va AppCompat

Android Dark Mode AppCompat kutubxonasi va Theme.AppCompat.DayNight mavzusi orqali amalga oshiriladi. Kunduzi ochiq mavzu, kechasi esa qorongʻu mavzu ishlatiladi. Majburiy yoqish AppCompatDelegate.setDefaultNightMode() orqali sozlanadi: MODE_NIGHT_YES (qorongʻu), MODE_NIGHT_NO (ochiq), MODE_NIGHT_FOLLOW_SYSTEM (tizim). Resurslar ochiq (res/values/styles.xml) va qorongʻu (res/values-night/styles.xml) ga boʻlinadi.

// Qorongʻu mavzuni majburiy yoqish
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // super.onCreate dan oldin sozlash
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Joriy mavzuni aniqlash
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// AndroidManifest.xml da tungi rejimni roʻyxatdan oʻtkazish
// android:configChanges="uiMode"

Force Dark Mode — qorongʻu mavzuni qoʻllab-quvvatlamaydigan ilovalar ranglarini avtomatik teskari oʻgiradigan Android 10+ tizim funksiyasi. Dasturchi sozlamalari yoki mavzudagi android:forceDarkAllowed="true" atributi orqali yoqiladi. Bu vaqtinchalik yechim: ishlab chiqarish uchun values-night orqali oʻz qorongʻu palitrangizni amalga oshirishingiz kerak, aks holda vizual sifat past boʻladi (teskari oʻgirilgan piktogrammalar, yomon oʻqiladigan ranglar).

Material You Dynamic Themes

Material You (Android 12+) qurilma fon rasmidan avtomatik ravishda 5 ta asosiy rang yaratadi: primary, secondary, tertiary, neutral, neutralVariant. Har bir rang uchun ochiq va qorongʻu palitralar yaratiladi. Dasturchi atributlardan foydalanadi: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Tizim joriy mavzu uchun variantni oʻzi tanlaydi. Dynamic Color Material Design 3 bilan Android 12+ da qoʻllab-quvvatlanadi (komponent com.google.android.material:material).

// values/themes.xml — ochiq mavzu
<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 — qorongʻu mavzu
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Qorongʻu mavzu dizayni: kontrast va rang qoidalari

Dark Mode dizayni — oddiy rang inversiyasi emas. Google Material Design toza qora oʻrniga toʻq kulrang (#121212) ishlatishni tavsiya qiladi. Toza qora (#000000) oq matn bilan juda yuqori kontrast yaratib, halo effektiga (harflar atrofida yorugʻlik) sabab boʻladi. Elementlarning balandlik (elevatsiya) darajasi rang orqali aniqlanadi: element qanchalik baland boʻlsa, foni shunchalik ochiq boʻladi. Fon ustidagi kart — #1E1E1E, dialog — #2D2D2D, navigatsiya paneli — #383838.

Rang kontrasti Dark Mode da Light Mode dan past boʻlishi kerak. Material Design tavsiya qiladi: primary matni — oq (#FFFFFF) 87% shaffoflik bilan, secondary — 60%, disabled — 38%. Urgʻu ranglari kamroq toʻyingan boʻlishi kerak: ochiq mavzuda primary = #6200EE boʻlsa, qorongʻuda — #BB86FC (ochiq, yumshoq binafsha). WCAG 2.1 ga koʻra, oddiy matn uchun minimal kontrast 4.5:1 har ikki mavzuda ham saqlanishi kerak.

Rasmlar va piktogrammalar qorongʻu mavzuda alohida ishlov berishni talab qiladi. Shaffoflikka ega piktogrammalar ochiq rangga boʻyalishi kerak. Yorqin fonli fotosuratlar koʻzni qamashtiruvchi koʻrinishi mumkin — yorqinlikni 20–30% ga kamaytirish yoki yarim shaffof qoplama qoʻshish tavsiya etiladi. Logotiplar va brend elementlari uchun qorongʻu fon uchun versiyadan foydalaning. iOS Asset Catalog va Android VectorDrawable ochiq va qorongʻu mavzu uchun alohida resurslarni qoʻllab-quvvatlaydi.

Dark Mode va Light Mode taqqoslashi: afzallik va kamchiliklar

Mavzu tanlovi foydalanish shartlariga, kontent turiga va foydalanuvchi afzalliklariga bogʻliq. Nielsen Norman Group (2020) tadqiqoti shuni koʻrsatdiki: normal yoritishda Light Mode oʻqish tezligini 15–20% ga oshiradi. Biroq zaif yoritish sharoitida Dark Mode koʻz charchoqini kamaytiradi va oʻqish qobiliyatini yaxshilaydi. Koʻp miqdorda matnli interfeyslar uchun (maqolalar, hujjatlar) Light Mode odatda afzalroq.

Energiya isteʼmoli — OLED da Dark Mode uchun asosiy argumentdir. Google (2019) maʼlumotlariga koʻra, YouTube qorongʻu mavzuda OLED ekranda ochiq mavzuga nisbatan 43% kam energiya sarflaydi. Google Maps — 32%. Interfeys qanchalik yorqin va ekran yorqinligi qanchalik yuqori boʻlsa, tejamkorlik shunchalik sezilarli. LCD ekranlarda tejamkorlik 5% dan oshmaydi. Ilova bilan ochiq havoda yorqin quyosh ostida koʻp ishlaydigan foydalanuvchilar uchun Light Mode yagona oʻqiladigan variant boʻlib qoladi.

IT Sectr tavsiyalari — ikkala mavzuni oʻzgartirish imkoniyati bilan amalga oshiramiz: tizim (follow system), qorongʻu, ochiq. Avtomatik oʻtish yagona variant boʻlmasligi kerak — foydalanuvchi kunduzi (migren vaqtida) qorongʻu mavzuni yoki kechasi (oʻqiyotganda) ochiq mavzuni xohlashi mumkin. Loyihalarimizda profil sozlamalarida mavzu kalitini qoʻshamiz va tanlovni eslab qolamiz. Premium kontentli ilovalar uchun (foto, video) qoʻllashdan oldin mavzu oldindan koʻrish tavsiya etiladi.