Dark Mode — was ist das, dunkles Oberflächendesign in mobilen Apps

Was ist Dark Mode und wofür wird er benötigt?

Dark Mode ist ein Farbschema, bei dem der Bildschirmhintergrund dunkel (normalerweise #121212 in Android, #1C1C1E in iOS) ist, während Text und Oberflächenelemente hell sind. Im Gegensatz zur einfachen Farbumkehrung verwendet ein qualitativ hochwertiger Dark Mode eine sorgfältig ausgewählte Palette: dunkelgrauer Hintergrund statt reinem Schwarz (reduziert den Halo-Effekt), reduzierte Sättigung der Akzentfarben und weiche Schatten. Die systemweite Dark Mode-Unterstützung erschien in iOS 13 (September 2019) und Android 10 (September 2019).

Der Hauptgrund für die Einführung ist der Benutzerkomfort. Bei schwachem Licht (abends, im Dunkeln) verursacht ein heller weißer Bildschirm Augenbelastung und kann Kopfschmerzen auslösen. Der Dark Mode reduziert die Bildschirmhelligkeit, ohne die Lesbarkeit zu beeinträchtigen. Für Benutzer mit Photophobie oder Lichtempfindlichkeit ist ein dunkles Design keine Option, sondern die einzige Möglichkeit, eine Anwendung bequem zu nutzen. Laut Android Developers aktivieren über 30% der Android-Nutzer das dunkle Design dauerhaft.

Der Dark Mode spart Akku auf OLED-Bildschirmen. Im Gegensatz zu LCD, bei dem die Hintergrundbeleuchtung immer eingeschaltet ist, leuchten OLED-Pixel selbst. Eine dunkle Farbe bedeutet, dass der Pixel ausgeschaltet ist — der Stromverbrauch sinkt. Laut Google (Android Developers Blog, 2019) reduziert der Dark Mode auf einem Pixel mit OLED-Display bei 100% Helligkeit den Stromverbrauch um 60% im Vergleich zum hellen Design. Auf LCD-Bildschirmen ist die Ersparnis minimal (etwa 3–5%), da die Matrix-Hintergrundbeleuchtung unabhängig von der Pixelfarbe arbeitet.

Geschichte des Dark Mode in mobilen Betriebssystemen

Die Systemunterstützung für den Dark Mode durchlief mehrere Phasen. iOS 13 (2019) führte ein globales dunkles Design über UIUserInterfaceStyle ein. Android 10 (2019) fügte Force Dark Mode für Anwendungen ohne eigenes dunkles Design hinzu. Android 12 (2021) begann mit Material You, automatisch eine dunkle Palette aus Hintergrundbildern zu generieren. iOS 15 (2021) erweiterte die API für Safari und Webinhalte. Laut StatCounter (2026) unterstützen 82% der Top-100-Anwendungen im App Store und Google Play den Dark Mode.

Dark Mode in iOS: Swift API und UIKit-Unterstützung

Die iOS Dark Mode API basiert auf dem UITraitEnvironment-Protokoll. Jeder UIViewController und UIView besitzt die Eigenschaft traitCollection.userInterfaceStyle, die .unspecified, .light oder .dark sein kann. Wenn sich das Systemdesign ändert, ruft iOS die Methode traitCollectionDidChange(_:) auf. Der Entwickler muss die Farben in dieser Methode aktualisieren oder dynamische Farben (UIColor(dynamicProvider:)) verwenden, die automatisch zwischen heller und dunkler Palette wechseln.

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 erzwingen
window.overrideUserInterfaceStyle = .dark

Dynamische Farben sind der beste Weg, den Dark Mode in iOS zu implementieren. UIColor(named:) lädt automatisch unterschiedliche Werte aus dem Asset Catalog für die Darstellungen .light und .dark. Definieren Sie einfach eine Farbe in Assets.xcassets mit zwei Varianten (Any Appearance + Dark Appearance), und UIKit wählt automatisch die richtige aus. Dynamische Systemfarben (UIColor.systemBackground, .label, .secondaryLabel) unterstützen bereits den Dark Mode und ändern sich automatisch.

SwiftUI und Dark Mode

SwiftUI unterstützt den Dark Mode von Haus aus. Alle Standardfarben und Modifikatoren (Color.primary, .background, Color(UIColor.systemBackground)) passen sich automatisch an. Für benutzerdefinierte Farben verwenden Sie Color(uiColor:) mit einem dynamischen UIColor oder die Umgebungsvariable @Environment(\.colorScheme) zur expliziten Überprüfung des Designs. Die SwiftUI View wird bei Designwechsel automatisch neu gezeichnet, ohne dass traitCollectionDidChange aufgerufen werden muss.

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 in Android: Kotlin API und AppCompat

Der Android Dark Mode wird über die AppCompat-Bibliothek und das Theme.AppCompat.DayNight-Design implementiert. Tagsüber wird das helle Design verwendet, nachts das dunkle. Die erzwungene Aktivierung erfolgt über AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (dunkel), MODE_NIGHT_NO (hell), MODE_NIGHT_FOLLOW_SYSTEM (System). Die Ressourcen werden in helle (res/values/styles.xml) und dunkle (res/values-night/styles.xml) aufgeteilt.

// Dunkles Design erzwingen
class MainActivity : AppCompatActivity() {

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

    // Aktuelles Design ermitteln
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Nachtmodus in AndroidManifest.xml registrieren
// android:configChanges="uiMode"

Force Dark Mode ist eine Systemfunktion in Android 10+, die die Farben von Anwendungen ohne Dunkeldesign-Unterstützung automatisch invertiert. Sie wird über die Entwickleroptionen oder über das Attribut android:forceDarkAllowed="true" im Design aktiviert. Dies ist eine temporäre Lösung: Für die Produktion müssen Sie Ihre eigene dunkle Palette über values-night implementieren, da sonst die visuelle Qualität schlecht ist (invertierte Symbole, schwer lesbare Farben).

Material You Dynamic Themes

Material You (Android 12+) generiert automatisch 5 Schlüsselfarben aus dem Geräte-Hintergrundbild: primary, secondary, tertiary, neutral, neutralVariant. Für jede Farbe werden helle und dunkle Paletten erstellt. Der Entwickler verwendet Attribute: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Das System selbst wählt die Variante für das aktuelle Design aus. Dynamic Color wird auf Android 12+ mit Material Design 3 (Komponente com.google.android.material:material) unterstützt.

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

Design des dunklen Designs: Kontrast- und Farbregeln

Das Dark Mode-Design ist nicht einfach eine Farbumkehrung. Google Material Design empfiehlt die Verwendung von Dunkelgrau (#121212) anstelle von reinem Schwarz. Reines Schwarz (#000000) erzeugt einen zu hohen Kontrast zu weißem Text und verursacht einen Halo-Effekt (Lichthof um Buchstaben). Die Höhe der Elemente wird durch die Farbe ausgedrückt: Je höher das Element, desto heller sein Hintergrund. Eine Karte über dem Hintergrund — #1E1E1E, Dialog — #2D2D2D, Navigationsleiste — #383838.

Der Farbkontrast sollte im Dark Mode niedriger sein als im Light Mode. Material Design empfiehlt: Primärtext — Weiß (#FFFFFF) mit 87% Deckkraft, sekundär — 60%, deaktiviert — 38%. Akzentfarben sollten weniger gesättigt sein: Wenn im hellen Design primary = #6200EE ist, dann im dunklen — #BB86FC (helles, gedämpftes Lila). Nach WCAG 2.1 muss ein Mindestkontrast von 4.5:1 für normalen Text in beiden Designs eingehalten werden.

Bilder und Symbole erfordern eine separate Behandlung im dunklen Design. Symbole mit Transparenz sollten in hellen Farben neu eingefärbt werden. Fotos mit hellem Hintergrund können blenden — es wird empfohlen, die Helligkeit um 20–30% zu reduzieren oder eine halbtransparente Überlagerung hinzuzufügen. Für Logos und Markenelemente verwenden Sie die Version für dunklen Hintergrund. Der iOS Asset Catalog und Android VectorDrawable unterstützen separate Ressourcen für helle und dunkle Designs.

Dark Mode vs. Light Mode: Vor- und Nachteile

Die Wahl zwischen den Designs hängt von den Nutzungsbedingungen, der Art des Inhalts und den Benutzerpräferenzen ab. Eine Studie der Nielsen Norman Group (2020) zeigte: Bei normaler Beleuchtung bietet der Light Mode eine 15–20% höhere Lesegeschwindigkeit. Bei schwachem Licht reduziert der Dark Mode jedoch die Augenermüdung und verbessert die Lesbarkeit. Für Oberflächen mit großen Textmengen (Artikel, Dokumente) ist der Light Mode in der Regel vorzuziehen.

Der Stromverbrauch ist ein Hauptargument für den Dark Mode auf OLED. Laut Google (2019) verbraucht YouTube im dunklen Design auf einem OLED-Bildschirm 43% weniger Energie als im hellen Design. Google Maps — 32%. Je heller die Oberfläche und je höher die Bildschirmhelligkeit, desto größer die Ersparnis. Auf LCD-Bildschirmen übersteigt die Ersparnis 5% nicht. Für Benutzer, die viel im Freien bei starker Sonneneinstrahlung mit der App arbeiten, bleibt der Light Mode die einzig lesbare Option.

IT Sectr Empfehlungen — wir implementieren beide Designs mit Umschaltmöglichkeiten: System (System folgen), dunkel, hell. Die automatische Umschaltung sollte nicht die einzige Option sein — ein Benutzer möchte möglicherweise tagsüber das dunkle Design (bei Migräne) oder nachts das helle Design (zum Lesen). In unseren Projekten fügen wir einen Design-Umschalter in den Profileinstellungen hinzu und merken uns die Auswahl. Für Anwendungen mit Premium-Inhalten (Fotos, Videos) wird eine Vorschau des Designs vor der Anwendung empfohlen.