Dark Mode — co to je, tmavý režim rozhraní v mobilních aplikacích

Co je Dark Mode a proč je potřeba?

Dark Mode — je barevné schéma rozhraní, ve kterém je pozadí obrazovky tmavé (obvykle #121212 v Android, #1C1C1E v iOS) a text a prvky rozhraní jsou světlé. Na rozdíl od jednoduché inverze barev používá kvalitní Dark Mode speciálně vybranou paletu: tmavě šedé pozadí místo čistě černé (snižuje halo efekt), sníženou sytost akcentních barev a jemné stíny. Systémová podpora Dark Mode se objevila v iOS 13 (září 2019) a Android 10 (září 2019).

Hlavní důvod zavedení — pohodlí uživatele. Při slabém osvětlení (večer, ve tmě) způsobuje jasně bílá obrazovka namáhání očí a může vyvolat bolesti hlavy. Dark Mode snižuje jas obrazovky bez ztráty čitelnosti. Pro uživatele s fotofobií nebo citlivostí na světlo není tmavý režim volbou, ale jedinou možností pohodlného používání aplikace. Podle Android Developers více než 30 % uživatelů Androidu trvale zapíná tmavý režim.

Dark Mode šetří baterii na OLED obrazovkách. Na rozdíl od LCD, kde podsvícení vždy svítí, OLED pixely svítí samostatně. Tmavá barva znamená, že je pixel vypnutý — spotřeba energie klesá. Podle Google (Android Developers Blog, 2019) na Pixel s OLED obrazovkou při 100% jasu snižuje Dark Mode spotřebu energie o 60 % ve srovnání se světlým režimem. Na LCD obrazovkách je úspora minimální (asi 3–5 %), protože podsvícení matrice funguje nezávisle na barvě pixelů.

Historie Dark Mode v mobilních operačních systémech

Systémová podpora Dark Mode prošla několika fázemi. iOS 13 (2019) zavedl globální tmavý režim prostřednictvím UIUserInterfaceStyle. Android 10 (2019) přidal Force Dark Mode pro aplikace bez vlastního tmavého režimu. Android 12 (2021) s Material You začal automaticky generovat tmavou paletu z tapety. iOS 15 (2021) rozšířil API pro Safari a webový obsah. Podle StatCounter (2026) 82 % top 100 aplikací v App Store a Google Play podporuje Dark Mode.

Dark Mode v iOS: Swift API a podpora UIKit

iOS Dark Mode API je založeno na protokolu UITraitEnvironment. Každý UIViewController a UIView má vlastnost traitCollection.userInterfaceStyle, která může být .unspecified, .light nebo .dark. Při změně systémového režimu iOS volá metodu traitCollectionDidChange(_:). Vývojář by měl aktualizovat barvy v této metodě nebo použít dynamické barvy (UIColor(dynamicProvider:)), které automaticky přepínají mezi světlou a tmavou paletou.

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

// Vynucené zapnutí Dark Mode
window.overrideUserInterfaceStyle = .dark

Dynamické barvy — nejlepší způsob implementace Dark Mode v iOS. UIColor(named:) automaticky načítá různé hodnoty z Asset Catalog pro .light a .dark vzhled. Stačí nastavit barvu v Assets.xcassets se dvěma variantami (Any Appearance + Dark Appearance) a UIKit si sám vybere tu správnou. Dynamické systémové barvy (UIColor.systemBackground, .label, .secondaryLabel) již podporují Dark Mode a mění se automaticky.

SwiftUI a Dark Mode

SwiftUI podporuje Dark Mode hned po vybalení. Všechny standardní barvy a modifikátory (Color.primary, .background, Color(UIColor.systemBackground)) se automaticky přizpůsobí. Pro vlastní barvy použijte Color(uiColor:) s dynamickým UIColor nebo proměnnou prostředí @Environment(\.colorScheme) pro explicitní kontrolu režimu. SwiftUI View se při změně režimu automaticky překreslí, bez nutnosti volat 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 v Android: Kotlin API a AppCompat

Android Dark Mode je implementován prostřednictvím knihovny AppCompat a tématu Theme.AppCompat.DayNight. Přes den se používá světlý režim, v noci tmavý. Vynucené zapnutí se nastavuje pomocí AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (tmavý), MODE_NIGHT_NO (světlý), MODE_NIGHT_FOLLOW_SYSTEM (systémový). Zdroje jsou rozděleny na světlé (res/values/styles.xml) a tmavé (res/values-night/styles.xml).

// Vynucené zapnutí tmavého režimu
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Nastavení před super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Určení aktuálního režimu
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Registrace nočního režimu v AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode — systémová funkce Android 10+, která automaticky invertuje barvy aplikací nepodporujících tmavý režim. Zapíná se přes Možnosti pro vývojáře nebo pomocí atributu android:forceDarkAllowed="true" v tématu. Toto je dočasné řešení: pro produkci je třeba implementovat vlastní tmavou paletu přes values-night, jinak bude vizuální kvalita nízká (invertované ikony, špatně čitelné barvy).

Material You Dynamic Themes

Material You (Android 12+) automaticky generuje 5 klíčových barev z tapety zařízení: primary, secondary, tertiary, neutral, neutralVariant. Pro každou barvu se vytváří světlé a tmavé palety. Vývojář používá atributy: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Systém sám vybírá variantu pro aktuální režim. Dynamic Color je podporován na Android 12+ s Material Design 3 (komponenta com.google.android.material:material).

// values/themes.xml — světlý režim
<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 — tmavý režim
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Návrh tmavého režimu: pravidla kontrastu a barev

Návrh Dark Mode — není jen inverze barev. Google Material Design doporučuje používat tmavě šedou (#121212) místo čistě černé. Čistě černá (#000000) vytváří příliš vysoký kontrast s bílým textem, což způsobuje halo efekt (světelný lem kolem písmen). Úroveň elevace prvků je určena barvou: čím vyšší prvek, tím světlejší jeho pozadí. Karta na pozadí — #1E1E1E, dialog — #2D2D2D, navigační panel — #383838.

Barevný kontrast v Dark Mode by měl být nižší než v Light Mode. Material Design doporučuje: primární text — bílá (#FFFFFF) s neprůhledností 87 %, sekundární — 60 %, disabled — 38 %. Barvy akcentů by měly být méně syté: pokud je ve světlém režimu primary = #6200EE, pak v tmavém — #BB86FC (světlá, tlumená fialová). Podle WCAG 2.1 musí být minimální kontrast 4.5:1 pro běžný text dodržen v obou režimech.

Obrázky a ikony vyžadují zvláštní zpracování v tmavém režimu. Ikony s průhledností by měly být přebarveny na světlou barvu. Fotografie se světlým pozadím mohou působit oslnivě — doporučuje se snížit jas o 20–30 % nebo přidat poloprůhlednou vrstvu. Pro loga a prvky značky použijte verzi pro tmavé pozadí. iOS Asset Catalog a Android VectorDrawable podporují samostatné zdroje pro světlý a tmavý režim.

Srovnání Dark Mode a Light Mode: výhody a nevýhody

Volba mezi režimy závisí na podmínkách použití, typu obsahu a preferencích uživatele. Výzkum Nielsen Norman Group (2020) ukázal: při normálním osvětlení poskytuje Light Mode o 15–20 % vyšší rychlost čtení. Při slabém osvětlení však Dark Mode snižuje únavu očí a zlepšuje čitelnost. Pro rozhraní s velkým objemem textu (články, dokumenty) je Light Mode obvykle preferovanější.

Spotřeba energie — klíčový argument pro Dark Mode na OLED. Podle Google (2019) spotřebovává YouTube v tmavém režimu na OLED obrazovce o 43 % méně energie než ve světlém režimu. Google Maps — o 32 %. Čím jasnější je rozhraní a čím vyšší je úroveň jasu obrazovky, tím významnější je úspora. Na LCD obrazovkách úspora nepřesahuje 5 %. Pro uživatele, kteří hodně pracují s aplikací venku na ostrém slunci, zůstává Light Mode jedinou čitelnou volbou.

Doporučení IT Sectr — implementujeme oba režimy s možností přepínání: systémový (follow system), tmavý, světlý. Automatické přepínání by nemělo být jedinou možností — uživatel může chtít tmavý režim ve dne (při migréně) nebo světlý režim v noci (při čtení). V našich projektech přidáváme přepínač režimu do nastavení profilu a pamatujeme si volbu. Pro aplikace s prémiovým obsahem (foto, video) se doporučuje náhled režimu před aplikací.