Dark Mode — какво е, тъмна тема на интерфейса в мобилните приложения

Какво е Dark Mode и защо е необходим?

Dark Mode — цветова схема на интерфейса, при която фонът на екрана е тъмен (обикновено #121212 в Android, #1C1C1E в iOS), а текстът и елементите на интерфейса са светли. За разлика от простата инверсия на цветовете, качественият Dark Mode използва специално подбрана палитра: тъмносив фон вместо чисто черен (намалява хало ефекта), ниска наситеност на акцентните цветове и меки сенки. Системната поддръжка на Dark Mode се появи в iOS 13 (септември 2019) и Android 10 (септември 2019).

Основна причина за внедряване — комфорт на потребителя. При слаба осветеност (вечер, на тъмно) яркият бял екран причинява напрежение на очите и може да предизвика главоболие. Dark Mode намалява яркостта на екрана без загуба на четимост. За потребители с фотофобия или чувствителност към светлина, тъмната тема не е опция, а единствената възможност за удобно използване на приложението. Според Android Developers, повече от 30% от потребителите на Android постоянно включват тъмна тема.

Dark Mode пести батерия на OLED екрани. За разлика от LCD, където подсветката винаги свети, OLED пикселите светят самостоятелно. Тъмният цвят означава, че пикселът е изключен — консумацията на енергия намалява. Според Google (Android Developers Blog, 2019), на Pixel с OLED екран при 100% яркост Dark Mode намалява консумацията на енергия с 60% в сравнение със светлата тема. На LCD екрани икономията е минимална (около 3–5%), тъй като подсветката на матрицата работи независимо от цвета на пикселите.

История на Dark Mode в мобилните операционни системи

Системна поддръжка Dark Mode премина през няколко етапа. iOS 13 (2019) въведе глобална тъмна тема чрез UIUserInterfaceStyle. Android 10 (2019) добави Force Dark Mode за приложения без собствена тъмна тема. Android 12 (2021) с Material You започна автоматично да генерира тъмна палитра от тапета. iOS 15 (2021) разшири API за Safari и уеб съдържание. Според StatCounter (2026), 82% от топ 100 приложения в App Store и Google Play поддържат Dark Mode.

Dark Mode в iOS: Swift API и поддръжка на UIKit

iOS Dark Mode API се основава на протокола UITraitEnvironment. Всеки UIViewController и UIView има свойство traitCollection.userInterfaceStyle, което може да бъде .unspecified, .light или .dark. При промяна на системната тема iOS извиква метода traitCollectionDidChange(_:). Разработчикът трябва да актуализира цветовете в този метод или да използва динамични цветове (UIColor(dynamicProvider:)), които автоматично превключват между светла и тъмна палитра.

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

Динамични цветове — най-добрият начин за имплементация на Dark Mode в iOS. UIColor(named:) автоматично зарежда различни стойности от Asset Catalog за .light и .dark изглед. Достатъчно е да зададете цвета в Assets.xcassets с два варианта (Any Appearance + Dark Appearance) и UIKit сам ще избере подходящия. Динамичните системни цветове (UIColor.systemBackground, .label, .secondaryLabel) вече поддържат Dark Mode и се променят автоматично.

SwiftUI и Dark Mode

SwiftUI поддържа Dark Mode веднага след изваждане от кутията. Всички стандартни цветове и модификатори (Color.primary, .background, Color(UIColor.systemBackground)) се адаптират автоматично. За персонализирани цветове използвайте Color(uiColor:) с динамичен UIColor или променливата на средата @Environment(\.colorScheme) за изрична проверка на темата. SwiftUI View се пречертава автоматично при смяна на темата, без необходимост от извикване на traitCollectionDidChange.

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

Dark Mode в Android: Kotlin API и AppCompat

Android Dark Mode се имплементира чрез библиотеката AppCompat и темата Theme.AppCompat.DayNight. През деня се използва светла тема, през нощта — тъмна. Принудителното включване се задава чрез AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (тъмна), MODE_NIGHT_NO (светла), MODE_NIGHT_FOLLOW_SYSTEM (системна). Ресурсите се разделят на светли (res/values/styles.xml) и тъмни (res/values-night/styles.xml).

// Принудително включване на тъмна тема
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Настройка преди super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Определяне на текущата тема
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Регистриране на нощен режим в AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode — системна функция на Android 10+, която автоматично инвертира цветовете на приложения, които не поддържат тъмна тема. Включва се чрез Настройки за разработчици или чрез атрибута android:forceDarkAllowed="true" в темата. Това е временно решение: за продукция трябва да имплементирате собствена тъмна палитра чрез values-night, в противен случай визуалното качество ще бъде ниско (инвертирани икони, лошо четими цветове).

Material You Dynamic Themes

Material You (Android 12+) автоматично генерира 5 ключови цвята от тапета на устройството: primary, secondary, tertiary, neutral, neutralVariant. За всеки цвят се създават светли и тъмни палитри. Разработчикът използва атрибути: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Системата сама избира варианта за текущата тема. Dynamic Color се поддържа на Android 12+ с Material Design 3 (компонент com.google.android.material:material).

// values/themes.xml — светла тема
<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 — тъмна тема
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Дизайн на тъмна тема: правила за контраст и цвят

Дизайн на Dark Mode — не е просто инверсия на цветовете. Google Material Design препоръчва използването на тъмносиво (#121212) вместо чисто черно. Чистото черно (#000000) създава твърде висок контраст с бял текст, причинявайки хало ефект (ореол около буквите). Нивото на елевация на елементите се определя чрез цвят: колкото по-висок е елементът, толкова по-светъл е фонът му. Карта на фон — #1E1E1E, диалог — #2D2D2D, навигационен панел — #383838.

Цветови контраст в Dark Mode трябва да бъде по-нисък, отколкото в Light Mode. Material Design препоръчва: primary текст — бял (#FFFFFF) с непрозрачност 87%, secondary — 60%, disabled — 38%. Акцентните цветове трябва да бъдат по-малко наситени: ако в светлата тема primary = #6200EE, то в тъмната — #BB86FC (светло, приглушено лилаво). Според WCAG 2.1, минималният контраст 4.5:1 за обикновен текст трябва да се спазва и в двете теми.

Изображения и икони изискват отделна обработка в тъмната тема. Иконите с прозрачност трябва да бъдат пребоядисани в светъл цвят. Снимките със светъл фон могат да изглеждат ослепителни — препоръчва се намаляване на яркостта с 20–30% или добавяне на полупрозрачно наслагване. За лога и бранд елементи използвайте версията за тъмен фон. iOS Asset Catalog и Android VectorDrawable поддържат отделни ресурси за светла и тъмна тема.

Сравнение на Dark Mode и Light Mode: плюсове и минуси

Избор между теми зависи от условията на използване, типа съдържание и предпочитанията на потребителя. Изследване на Nielsen Norman Group (2020) показа: при нормално осветление Light Mode осигурява 15–20% по-висока скорост на четене. Въпреки това, при условия на слаба осветеност, Dark Mode намалява умората на очите и подобрява четимостта. За интерфейси с голям обем текст (статии, документи) Light Mode обикновено е за предпочитане.

Консумация на енергия — ключов аргумент за Dark Mode на OLED. Според Google (2019), YouTube в тъмна тема на OLED екран консумира 43% по-малко енергия, отколкото в светла тема. Google Maps — 32%. Колкото по-ярък е интерфейсът и колкото по-високо е нивото на яркост на екрана, толкова по-значителна е икономията. На LCD екрани икономията не надвишава 5%. За потребители, които работят много с приложението на открито на ярко слънце, Light Mode остава единствената четима опция.

Препоръки на IT Sectr — имплементираме и двете теми с възможност за превключване: системна (follow system), тъмна, светла. Автоматичното превключване не трябва да бъде единствената опция — потребителят може да иска тъмна тема през деня (при мигрена) или светла тема през нощта (при четене). В нашите проекти добавяме превключвател на тема в настройките на профила и запомняме избора. За приложения с премиум съдържание (снимки, видео) се препоръчва преглед на темата преди прилагане.