Dark Mode — co to jest, ciemny motyw interfejsu w aplikacjach mobilnych

Czym jest Dark Mode i dlaczego jest potrzebny?

Dark Mode — to schemat kolorystyczny interfejsu, w którym tło ekranu jest ciemne (zwykle #121212 w Android, #1C1C1E w iOS), a tekst i elementy interfejsu są jasne. W przeciwieństwie do prostej inwersji kolorów, wysokiej jakości Dark Mode wykorzystuje specjalnie dobraną paletę: ciemnoszare tło zamiast czystej czerni (zmniejsza efekt halo), obniżone nasycenie kolorów akcentujących i miękkie cienie. Systemowe wsparcie Dark Mode pojawiło się w iOS 13 (wrzesień 2019) i Android 10 (wrzesień 2019).

Główny powód wdrożenia — komfort użytkownika. Przy słabym oświetleniu (wieczorem, w ciemności) jasny biały ekran powoduje napięcie oczu i może wywoływać ból głowy. Dark Mode zmniejsza jasność ekranu bez utraty czytelności. Dla użytkowników z fotofobią lub nadwrażliwością na światło ciemny motyw to nie opcja, a jedyna możliwość komfortowego korzystania z aplikacji. Według Android Developers ponad 30% użytkowników Androida stale włącza ciemny motyw.

Dark Mode oszczędza baterię na ekranach OLED. W przeciwieństwie do LCD, gdzie podświetlenie świeci zawsze, piksele OLED świecą samodzielnie. Ciemny kolor oznacza, że piksel jest wyłączony — zużycie energii spada. Według Google (Android Developers Blog, 2019), na Pixel z ekranem OLED Dark Mode przy 100% jasności zmniejsza zużycie energii o 60% w porównaniu z jasnym motywem. Na ekranach LCD oszczędność jest minimalna (około 3–5%), ponieważ podświetlenie matrycy działa niezależnie od koloru pikseli.

Historia Dark Mode w mobilnych systemach operacyjnych

Systemowe wsparcie Dark Mode przeszło kilka etapów. iOS 13 (2019) wprowadził globalny ciemny motyw przez UIUserInterfaceStyle. Android 10 (2019) dodał Force Dark Mode dla aplikacji bez własnego ciemnego motywu. Android 12 (2021) z Material You zaczął automatycznie generować ciemną paletę z tapety. iOS 15 (2021) rozszerzył API dla Safari i treści internetowych. Według StatCounter (2026), 82% top-100 aplikacji w App Store i Google Play obsługuje Dark Mode.

Dark Mode w iOS: Swift API i obsługa UIKit

iOS Dark Mode API opiera się na protokole UITraitEnvironment. Każdy UIViewController i UIView ma właściwość traitCollection.userInterfaceStyle, która może być .unspecified, .light lub .dark. Przy zmianie motywu systemowego iOS wywołuje metodę traitCollectionDidChange(_:). Deweloper musi zaktualizować kolory w tej metodzie lub użyć dynamicznych kolorów (UIColor(dynamicProvider:)), które automatycznie przełączają się między jasną a ciemną paletą.

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

// Wymuszone włączenie Dark Mode
window.overrideUserInterfaceStyle = .dark

Dynamiczne kolory — najlepszy sposób implementacji Dark Mode w iOS. UIColor(named:) automatycznie ładuje różne wartości z Asset Catalog dla .light i .dark appearance. Wystarczy ustawić kolor w Assets.xcassets z dwoma wariantami (Any Appearance + Dark Appearance), a UIKit sam wybierze odpowiedni. Dynamic system colors (UIColor.systemBackground, .label, .secondaryLabel) już obsługują Dark Mode i zmieniają się automatycznie.

SwiftUI i Dark Mode

SwiftUI obsługuje Dark Mode od razu po wyjęciu z pudełka. Wszystkie standardowe kolory i modyfikatory (Color.primary, .background, Color(UIColor.systemBackground)) automatycznie się dostosowują. Dla niestandardowych kolorów użyj Color(uiColor:) z dynamicznym UIColor lub zmiennej środowiskowej @Environment(\.colorScheme) do jawnego sprawdzenia motywu. Widok SwiftUI automatycznie przerysowuje się przy zmianie motywu, bez konieczności wywoływania 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 w Android: Kotlin API i AppCompat

Android Dark Mode jest implementowany przez bibliotekę AppCompat i motyw Theme.AppCompat.DayNight. W dzień używany jest jasny motyw, w nocy — ciemny. Wymuszone włączenie ustawia się przez AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (ciemny), MODE_NIGHT_NO (jasny), MODE_NIGHT_FOLLOW_SYSTEM (systemowy). Zasoby są podzielone na jasne (res/values/styles.xml) i ciemne (res/values-night/styles.xml).

// Wymuszone włączenie ciemnego motywu
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Ustawienie przed super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Określenie bieżącego motywu
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Rejestracja trybu nocnego w AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode — funkcja systemowa Android 10+, która automatycznie odwraca kolory aplikacji nieobsługującej ciemnego motywu. Włącza się przez Ustawienia programisty lub przez atrybut android:forceDarkAllowed="true" w motywie. To rozwiązanie tymczasowe: do produkcji należy zaimplementować własną ciemną paletę przez values-night, w przeciwnym razie jakość wizualna będzie niska (odwrócone ikony, źle czytelne kolory).

Material You Dynamic Themes

Material You (Android 12+) automatycznie generuje 5 kluczowych kolorów z tapety urządzenia: primary, secondary, tertiary, neutral, neutralVariant. Dla każdego koloru tworzone są jasne i ciemne palety. Deweloper używa atrybutów: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. System sam wybiera wariant dla bieżącego motywu. Dynamic Color jest obsługiwany na Android 12+ z Material Design 3 (komponent com.google.android.material:material).

// values/themes.xml — jasny motyw
<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 — ciemny motyw
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Projektowanie ciemnego motywu: zasady kontrastu i kolorów

Projektowanie Dark Mode — to nie tylko inwersja kolorów. Google Material Design zaleca używanie ciemnoszarego (#121212) zamiast czystej czerni. Czysta czerń (#000000) tworzy zbyt wysoki kontrast z białym tekstem, powodując efekt halo (aureola wokół liter). Poziom elewacji (wzniesienia) elementów jest określany przez kolor: im wyższy element, tym jaśniejsze jego tło. Karta na tle — #1E1E1E, okno dialogowe — #2D2D2D, panel nawigacyjny — #383838.

Kontrast kolorów w Dark Mode powinien być niższy niż w Light Mode. Material Design zaleca: tekst primary — biały (#FFFFFF) z przezroczystością 87%, secondary — 60%, disabled — 38%. Kolory akcentujące powinny być mniej nasycone: jeśli w jasnym motywie primary = #6200EE, to w ciemnym — #BB86FC (jasny, stonowany fiolet). Według WCAG 2.1 minimalny kontrast 4.5:1 dla zwykłego tekstu musi być zachowany w obu motywach.

Obrazy i ikony wymagają osobnego przetworzenia w ciemnym motywie. Ikony z przezroczystością powinny być przemalowane na jasny kolor. Zdjęcia z jasnym tłem mogą wyglądać oślepiająco — zaleca się zmniejszenie jasności o 20–30% lub dodanie półprzezroczystej nakładki. Dla logo i elementów marki używaj wersji na ciemne tło. iOS Asset Catalog i Android VectorDrawable obsługują osobne zasoby dla jasnego i ciemnego motywu.

Porównanie Dark Mode i Light Mode: plusy i minusy

Wybór między motywami zależy od warunków użytkowania, rodzaju treści i preferencji użytkownika. Badanie Nielsen Norman Group (2020) wykazało: przy normalnym oświetleniu Light Mode zapewnia o 15–20% wyższą prędkość czytania. Jednak w warunkach słabego oświetlenia Dark Mode zmniejsza zmęczenie oczu i poprawia czytelność. Dla interfejsów z dużą ilością tekstu (artykuły, dokumenty) Light Mode jest zwykle preferowany.

Zużycie energii — kluczowy argument za Dark Mode na OLED. Według Google (2019), YouTube w ciemnym motywie na ekranie OLED zużywa o 43% mniej energii niż w jasnym. Google Maps — o 32%. Im jaśniejszy interfejs i im wyższy poziom jasności ekranu, tym większa oszczędność. Na ekranach LCD oszczędność nie przekracza 5%. Dla użytkowników, którzy dużo pracują z aplikacją na zewnątrz w jasnym słońcu, Light Mode pozostaje jedyną czytelną opcją.

Zalecenia IT Sectr — implementujemy oba motywy z możliwością przełączania: systemowy (follow system), ciemny, jasny. Automatyczne przełączanie nie powinno być jedyną opcją — użytkownik może chcieć ciemnego motywu w dzień (przy migrenie) lub jasnego w nocy (podczas czytania). W naszych projektach dodajemy przełącznik motywu w ustawieniach profilu i zapamiętujemy wybór. Dla aplikacji z treścią premium (zdjęcia, wideo) zaleca się podgląd motywu przed zastosowaniem.