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 стално укључује тамну тему.

DarkMode штеди батерију на OLED екранима. За разлику од LCD, где позадинско осветљење увек гори, OLED пиксели светле самостално. Тамна боја значи да је пиксел искључен — потрошња енергије опада. Према Google (Android Developers Blog, 2019), на Pixel са OLED екраном Dark Mode при 100% осветљености смањује потрошњу енергије за 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), тамна, светла. Аутоматско пребацивање не би требало да буде једина опција — корисник може желети тамну тему дању (при мигрени) или светлу ноћу (при читању). У нашим пројектима додајемо прекидач теме у подешавања профила и памтимо избор. За апликације са премијум садржајем (фото, видео) препоручује се преглед теме пре примене.