Dark Mode — mi ez, sötét felület téma mobilalkalmazásokban

Mi az a Dark Mode és miért van rá szükség?

Dark Mode — a felület színsémája, amelyben a képernyő háttér színe sötét (általában #121212 Androidban, #1C1C1E iOS-ben), a szöveg és a felületi elemek pedig világosak. Az egyszerű színinverzióval ellentétben a minőségi Dark Mode speciálisan kiválasztott palettát használ: sötétszürke háttér a tiszta fekete helyett (csökkenti a halo hatást), alacsony telítettségű akcentus színek és lágy árnyékok. A Dark Mode rendszer szintű támogatása az iOS 13-ban (2019. szeptember) és az Android 10-ben (2019. szeptember) jelent meg.

A bevezetés fő oka — a felhasználói kényelem. Gyenge megvilágítás mellett (este, sötétben) a világos fehér képernyő szem megerőltetést okozhat, és fejfájást válthat ki. A Dark Mode csökkenti a képernyő fényerejét az olvashatóság elvesztése nélkül. A fotofóbiában vagy fényérzékenységben szenvedő felhasználók számára a sötét téma nem opció, hanem az alkalmazás kényelmes használatának egyetlen lehetősége. Az Android Developers szerint az Android-felhasználók több mint 30%-a állandóan bekapcsolva tartja a sötét témát.

A Dark Mode akkumulátort takarít meg az OLED képernyőkön. A LCD-vel ellentétben, ahol a háttérvilágítás mindig ég, az OLED pixelek önállóan világítanak. A sötét szín azt jelenti, hogy a pixel ki van kapcsolva — az energiafogyasztás csökken. A Google (Android Developers Blog, 2019) szerint egy OLED képernyős Pixel készüléken 100%-os fényerő mellett a Dark Mode 60%-kal csökkenti az energiafogyasztást a világos témához képest. LCD képernyőkön a megtakarítás minimális (körülbelül 3–5%), mivel a mátrix háttérvilágítása a pixel színétől függetlenül működik.

A Dark Mode története a mobil operációs rendszerekben

Rendszer támogatás A Dark Mode több szakaszon ment keresztül. Az iOS 13 (2019) bevezette a globális sötét témát az UIUserInterfaceStyle segítségével. Az Android 10 (2019) hozzáadta a Force Dark Mode-ot a saját sötét témával nem rendelkező alkalmazások számára. Az Android 12 (2021) a Material You-val elkezdte automatikusan generálni a sötét palettát a háttérképből. Az iOS 15 (2021) kiterjesztette az API-t a Safari és a webes tartalmak számára. A StatCounter (2026) szerint az App Store és Google Play top 100 alkalmazásának 82%-a támogatja a Dark Mode-ot.

Dark Mode iOS-ben: Swift API és UIKit támogatás

iOS Dark Mode API az UITraitEnvironment protokollon alapul. Minden UIViewController és UIView rendelkezik a traitCollection.userInterfaceStyle tulajdonsággal, amely lehet .unspecified, .light vagy .dark. A rendszer téma váltásakor az iOS meghívja a traitCollectionDidChange(_:) metódust. A fejlesztőnek frissítenie kell a színeket ebben a metódusban, vagy használhat dinamikus színeket (UIColor(dynamicProvider:)), amelyek automatikusan váltanak a világos és sötét paletta között.

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

// A Dark Mode kényszerített bekapcsolása
window.overrideUserInterfaceStyle = .dark

Dinamikus színek — a legjobb módszer a Dark Mode megvalósítására iOS-ben. Az UIColor(named:) automatikusan betölti a különböző értékeket az Asset Catalog-ból a .light és .dark megjelenéshez. Elég beállítani a színt az Assets.xcassets-ben két változattal (Any Appearance + Dark Appearance), és az UIKit maga választja ki a megfelelőt. A dinamikus rendszerszínek (UIColor.systemBackground, .label, .secondaryLabel) már támogatják a Dark Mode-ot és automatikusan változnak.

SwiftUI és Dark Mode

SwiftUI a Dark Mode-ot dobozból készen támogatja. Az összes szabványos szín és módosító (Color.primary, .background, Color(UIColor.systemBackground)) automatikusan alkalmazkodik. Egyéni színekhez használja a Color(uiColor:)-t dinamikus UIColor-val vagy a @Environment(\.colorScheme) környezeti változót a téma explicit ellenőrzéséhez. A SwiftUI View automatikusan újrarajzolódik a téma váltásakor, anélkül hogy meg kellene hívni a traitCollectionDidChange-et.

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 Androidban: Kotlin API és AppCompat

Android Dark Mode az AppCompat könyvtáron és a Theme.AppCompat.DayNight témán keresztül valósul meg. Nappal a világos téma, éjjel a sötét téma használatos. A kényszerített bekapcsolást az AppCompatDelegate.setDefaultNightMode() állítja be: MODE_NIGHT_YES (sötét), MODE_NIGHT_NO (világos), MODE_NIGHT_FOLLOW_SYSTEM (rendszer). Az erőforrások világos (res/values/styles.xml) és sötét (res/values-night/styles.xml) részekre vannak osztva.

// A sötét téma kényszerített bekapcsolása
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Beállítás a super.onCreate előtt
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Aktuális téma meghatározása
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Éjszakai mód regisztrálása az AndroidManifest.xml-ben
// android:configChanges="uiMode"

Force Dark Mode — az Android 10+ rendszerfunkciója, amely automatikusan invertálja a sötét témát nem támogató alkalmazások színeit. A Fejlesztői beállításokon keresztül vagy a téma android:forceDarkAllowed="true" attribútumával aktiválható. Ez egy ideiglenes megoldás: éles környezethez saját sötét palettát kell megvalósítani a values-night segítségével, különben a vizuális minőség alacsony lesz (invertált ikonok, rosszul olvasható színek).

Material You Dynamic Themes

Material You (Android 12+) automatikusan 5 kulcsszínt generál a készülék háttérképéből: primary, secondary, tertiary, neutral, neutralVariant. Minden színhez világos és sötét paletták készülnek. A fejlesztő a következő attribútumokat használja: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. A rendszer maga választja ki a változatot az aktuális témához. A Dynamic Color Android 12+-on támogatott a Material Design 3-mal (com.google.android.material:material komponens).

// values/themes.xml — világos téma
<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 — sötét téma
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Sötét téma tervezése: kontraszt- és színszabályok

A Dark Mode tervezése — nem csupán színinverzió. A Google Material Design a sötétszürke (#121212) használatát ajánlja a tiszta fekete helyett. A tiszta fekete (#000000) túl magas kontrasztot hoz létre a fehér szöveggel, halo hatást (fényudvar a betűk körül) okozva. Az elemek elevaációs szintjét a szín határozza meg: minél magasabb az elem, annál világosabb a háttér. Kártya a háttéren — #1E1E1E, párbeszédpanel — #2D2D2D, navigációs panel — #383838.

Színkontraszt a Dark Mode-ban alacsonyabbnak kell lennie, mint a Light Mode-ban. A Material Design a következőket ajánlja: primary szöveg — fehér (#FFFFFF) 87%-os átlátszatlansággal, secondary — 60%, disabled — 38%. Az akcentus színek kevésbé telítettek: ha a világos témában primary = #6200EE, akkor a sötétben — #BB86FC (világos, tompított lila). A WCAG 2.1 szerint az egyszerű szövegnél a minimális 4.5:1 kontrasztarányt mindkét témában be kell tartani.

Képek és ikonok külön kezelést igényelnek a sötét témában. Az átlátszósággal rendelkező ikonokat világos színűre kell festeni. A világos hátterű fényképek vakítóak lehetnek — ajánlott a fényerőt 20–30%-kal csökkenteni vagy félig átlátszó réteget hozzáadni. A logókhoz és márkaelemekhez használja a sötét háttérre készült verziót. Az iOS Asset Catalog és az Android VectorDrawable támogatja a külön erőforrásokat a világos és sötét témához.

Dark Mode és Light Mode összehasonlítása: előnyök és hátrányok

A témák közötti választás a használati körülményektől, a tartalom típusától és a felhasználói preferenciáktól függ. A Nielsen Norman Group (2020) kutatása kimutatta: normál megvilágítás mellett a Light Mode 15–20%-kal magasabb olvasási sebességet biztosít. Gyenge megvilágítás mellett azonban a Dark Mode csökkenti a szem fáradását és javítja az olvashatóságot. Nagy mennyiségű szöveggel rendelkező felületekhez (cikkek, dokumentumok) általában a Light Mode az előnyösebb.

Energiafogyasztás — a Dark Mode kulcsérve az OLED kijelzőkön. A Google (2019) szerint a YouTube sötét témában OLED képernyőn 43%-kal kevesebb energiát fogyaszt, mint világos témában. Google Maps — 32%-kal. Minél világosabb a felület és minél magasabb a képernyő fényereje, annál jelentősebb a megtakarítás. LCD képernyőkön a megtakarítás nem haladja meg az 5%-ot. Azoknak a felhasználóknak, akik sokat dolgoznak az alkalmazással a szabadban erős napsütésben, a Light Mode marad az egyetlen olvasható lehetőség.

IT Sectr ajánlások — mindkét témát megvalósítjuk váltási lehetőséggel: rendszer (follow system), sötét, világos. Az automatikus váltás nem lehet az egyetlen opció — a felhasználó kérheti a sötét témát nappal (migrén esetén) vagy a világos témát éjjel (olvasás közben). Projektjeinkben hozzáadjuk a téma kapcsolót a profilbeállításokhoz, és megjegyezzük a választást. Prémium tartalmú alkalmazásokhoz (fotó, videó) ajánlott a téma előnézetének megjelenítése az alkalmazás előtt.