Dark Mode — ce este, tema întunecată a interfeței în aplicațiile mobile

Ce este Dark Mode și de ce este necesar?

Dark Mode — este o schemă de culori a interfeței în care fundalul ecranului este întunecat (de obicei #121212 în Android, #1C1C1E în iOS), iar textul și elementele interfeței sunt deschise. Spre deosebire de simpla inversare a culorilor, Dark Mode de calitate utilizează o paletă special selectată: fundal gri închis în loc de negru pur (reduce efectul de halo), saturație redusă a culorilor de accent și umbre moi. Suportul sistemic pentru Dark Mode a apărut în iOS 13 (septembrie 2019) și Android 10 (septembrie 2019).

Motivul principal al implementării — confortul utilizatorului. În condiții de iluminare slabă (seara, în întuneric), ecranul alb luminos provoacă încordare oculară și poate declanșa dureri de cap. Dark Mode reduce luminozitatea ecranului fără a pierde lizibilitatea. Pentru utilizatorii cu fotofobie sau sensibilitate la lumină, tema întunecată nu este o opțiune, ci singura posibilitate de a utiliza confortabil aplicația. Conform Android Developers, peste 30% dintre utilizatorii Android păstrează tema întunecată activată permanent.

Dark Mode economisește bateria pe ecranele OLED. Spre deosebire de LCD, unde iluminarea de fundal este mereu aprinsă, pixelii OLED luminează independent. Culoarea întunecată înseamnă că pixelul este dezactivat — consumul de energie scade. Conform Google (Android Developers Blog, 2019), pe Pixel cu ecran OLED, Dark Mode la 100% luminozitate reduce consumul de energie cu 60% comparativ cu tema deschisă. Pe ecranele LCD, economisirea este minimă (aproximativ 3–5%), deoarece iluminarea matricei funcționează independent de culoarea pixelilor.

Istoria Dark Mode în sistemele de operare mobile

Suportul sistemic Dark Mode a trecut prin mai multe etape. iOS 13 (2019) a introdus tema întunecată globală prin UIUserInterfaceStyle. Android 10 (2019) a adăugat Force Dark Mode pentru aplicațiile fără temă întunecată proprie. Android 12 (2021) cu Material You a început să genereze automat paleta întunecată din fundalul de ecran. iOS 15 (2021) a extins API pentru Safari și conținut web. Conform StatCounter (2026), 82% dintre cele mai bune 100 de aplicații din App Store și Google Play acceptă Dark Mode.

Dark Mode în iOS: API Swift și suport UIKit

API Dark Mode în iOS se bazează pe protocolul UITraitEnvironment. Fiecare UIViewController și UIView are proprietatea traitCollection.userInterfaceStyle, care poate fi .unspecified, .light sau .dark. La schimbarea temei de sistem, iOS apelează metoda traitCollectionDidChange(_:). Dezvoltatorul trebuie să actualizeze culorile în această metodă sau să folosească culori dinamice (UIColor(dynamicProvider:)), care comută automat între paleta deschisă și cea întunecată.

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

// Activarea forțată a Dark Mode
window.overrideUserInterfaceStyle = .dark

Culorile dinamice — cea mai bună modalitate de implementare a Dark Mode în iOS. UIColor(named:) încarcă automat valori diferite din Asset Catalog pentru .light și .dark appearance. Este suficient să setați culoarea în Assets.xcassets cu două variante (Any Appearance + Dark Appearance), iar UIKit va alege singur cea potrivită. Culorile dinamice de sistem (UIColor.systemBackground, .label, .secondaryLabel) acceptă deja Dark Mode și se schimbă automat.

SwiftUI și Dark Mode

SwiftUI acceptă Dark Mode din cutie. Toate culorile și modificatorii standard (Color.primary, .background, Color(UIColor.systemBackground)) se adaptează automat. Pentru culori personalizate, utilizați Color(uiColor:) cu UIColor dinamic sau variabila de mediu @Environment(\.colorScheme) pentru verificarea explicită a temei. View-ul SwiftUI se redesenează automat la schimbarea temei, fără a fi nevoie să apelați 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 în Android: API Kotlin și AppCompat

Dark Mode în Android este implementat prin biblioteca AppCompat și tema Theme.AppCompat.DayNight. Ziua se folosește tema deschisă, noaptea — cea întunecată. Activarea forțată se setează prin AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (întunecat), MODE_NIGHT_NO (deschis), MODE_NIGHT_FOLLOW_SYSTEM (sistemic). Resursele sunt împărțite în deschise (res/values/styles.xml) și întunecate (res/values-night/styles.xml).

// Activarea forțată a temei întunecate
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Setarea înainte de super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Determinarea temei curente
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Înregistrarea modului nocturn în AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode — funcția de sistem Android 10+ care inversează automat culorile aplicațiilor care nu acceptă tema întunecată. Se activează prin Setările dezvoltatorului sau prin atributul android:forceDarkAllowed="true" în temă. Aceasta este o soluție temporară: pentru producție trebuie să implementați propria paletă întunecată prin values-night, altfel calitatea vizuală va fi scăzută (pictograme inversate, culori greu lizibile).

Material You Dynamic Themes

Material You (Android 12+) generează automat 5 culori cheie din fundalul de ecran al dispozitivului: primary, secondary, tertiary, neutral, neutralVariant. Pentru fiecare culoare se creează palete deschise și întunecate. Dezvoltatorul folosește atributele: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Sistemul alege singur varianta pentru tema curentă. Dynamic Color este acceptat pe Android 12+ cu Material Design 3 (componenta com.google.android.material:material).

// values/themes.xml — tema deschisă
<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 — tema întunecată
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Proiectarea temei întunecate: reguli de contrast și culoare

Proiectarea Dark Mode — nu este doar o simplă inversare a culorilor. Google Material Design recomandă utilizarea griului închis (#121212) în loc de negru pur. Negrul pur (#000000) creează un contrast prea mare cu textul alb, provocând efectul de halo (aureolă în jurul literelor). Nivelul de elevație al elementelor este determinat prin culoare: cu cât elementul este mai sus, cu atât fundalul său este mai deschis. Cardul pe fundal — #1E1E1E, dialogul — #2D2D2D, panoul de navigare — #383838.

Contrastul culorilor în Dark Mode trebuie să fie mai scăzut decât în Light Mode. Material Design recomandă: text primary — alb (#FFFFFF) cu opacitate 87%, secondary — 60%, disabled — 38%. Culorile de accent trebuie să fie mai puțin saturate: dacă în tema deschisă primary = #6200EE, atunci în tema întunecată — #BB86FC (violet deschis, atenuat). Conform WCAG 2.1, contrastul minim de 4.5:1 pentru textul obișnuit trebuie respectat în ambele teme.

Imagini și pictograme necesită procesare separată în tema întunecată. Pictogramele cu transparență trebuie recolariate în culoare deschisă. Fotografiile cu fundal luminos pot părea orbitoare — se recomandă reducerea luminozității cu 20–30% sau adăugarea unui strat semi-transparent. Pentru logo-uri și elemente de marcă, utilizați versiunea pentru fundal întunecat. iOS Asset Catalog și Android VectorDrawable acceptă resurse separate pentru tema deschisă și cea întunecată.

Comparație între Dark Mode și Light Mode: avantaje și dezavantaje

Alegerea între teme depinde de condițiile de utilizare, tipul de conținut și preferințele utilizatorului. Cercetarea Nielsen Norman Group (2020) a arătat: în iluminare normală, Light Mode asigură o viteză de citire cu 15–20% mai mare. Totuși, în condiții de iluminare slabă, Dark Mode reduce oboseala ochilor și îmbunătățește lizibilitatea. Pentru interfețe cu volum mare de text (articole, documente), Light Mode este de obicei preferat.

Consumul de energie — argumentul cheie pentru Dark Mode pe OLED. Conform Google (2019), YouTube în tema întunecată pe ecran OLED consumă cu 43% mai puțină energie decât în tema deschisă. Google Maps — cu 32%. Cu cât interfața este mai luminoasă și nivelul de luminozitate al ecranului este mai ridicat, cu atât economisirea este mai semnificativă. Pe ecranele LCD, economisirea nu depășește 5%. Pentru utilizatorii care lucrează mult cu aplicația în aer liber la soare puternic, Light Mode rămâne singura opțiune lizibilă.

Recomandări IT Sectr — implementăm ambele teme cu posibilitatea de comutare: sistemică (follow system), întunecată, deschisă. Comutarea automată nu ar trebui să fie singura opțiune — utilizatorul poate dori tema întunecată ziua (în caz de migrenă) sau tema deschisă noaptea (la citit). În proiectele noastre, adăugăm comutatorul de temă în setările profilului și salvăm alegerea. Pentru aplicațiile cu conținut premium (foto, video), se recomandă previzualizarea temei înainte de aplicare.