SwiftUI Dark Mode implementieren – Der komplette Guide

Warum Dark Mode in jeder App Standard sein sollte

Der Dark Mode ist kein Trend mehr – er ist eine Erwartung. Seit iOS 13 können Nutzer systemweit zwischen Light und Dark Mode wechseln. 82 % der Smartphone-Nutzer verwenden den Dark Mode zumindest zeitweise (Android Authority, 2023). Apps die ihn nicht unterstützen, fallen sofort negativ auf.

Die Vorteile im Überblick:

• Weniger Augenbelastung bei schlechten Lichtverhältnissen
• Bis zu 30 % weniger Akkuverbrauch auf OLED-Displays (Google, 2018)
• Bessere Lesbarkeit für Nutzer mit Lichtempfindlichkeit
• Modernes Erscheinungsbild – wirkt professioneller

Wie SwiftUI den Dark Mode handhabt

SwiftUI unterstützt den Dark Mode von Haus aus – wenn du die richtigen Farben verwendest. Das System erkennt automatisch ob Light oder Dark Mode aktiv ist und passt Farben entsprechend an.

Farbtyp	Light Mode	Dark Mode	Automatisch?
<code>Color.primary</code>	Schwarz	Weiß	Ja
<code>Color.secondary</code>	Grau	Hellgrau	Ja
<code>Color(.systemBackground)</code>	Weiß	Schwarz	Ja
Hardcoded <code>Color.white</code>	Weiß	Weiß	Nein
Asset-Katalog Farben	Frei wählbar	Frei wählbar	Ja

Kernregel: Verwende niemals hardcoded Farben wie Color.white oder Color.black für Hintergründe und Text. Nutze stattdessen semantische Farben.

Schritt 1: Systemfarben verwenden

Die einfachste Methode – SwiftUI passt alles automatisch an:

VStack {
    Text("Überschrift")
        .foregroundStyle(.primary)

    Text("Beschreibung")
        .foregroundStyle(.secondary)
}
.background(Color(.systemBackground))

.primary, .secondary und die UIColor-Systemfarben wechseln automatisch zwischen Light und Dark Mode.

Schritt 2: Eigene Farben im Asset-Katalog

Für Markenfarben die in beiden Modi funktionieren sollen:

1. Öffne Assets.xcassets in Xcode
2. Klicke + → Color Set
3. Im Attribut-Inspektor: Appearances → Any, Dark
4. Setze für jeden Modus die passende Farbe

In SwiftUI dann:

Text("Markenfarbe")
    .foregroundStyle(Color("brandPrimary"))

Tipp: Erstelle ein Farb-Set für jede semantische Rolle, nicht für jede Farbe:

Color Set Name	Verwendung
<code>brandPrimary</code>	Hauptfarbe (Buttons, Links)
<code>brandBackground</code>	Seitenhintergrund
<code>cardBackground</code>	Karten, Panels
<code>textPrimary</code>	Haupttext
<code>textSecondary</code>	Nebentext, Hints
<code>divider</code>	Trennlinien

Schritt 3: Preview in beiden Modi

Seit Xcode 15 ist die einfachste Methode:

#Preview {
    ContentView()
        .preferredColorScheme(.dark)
}

Für beide Modi gleichzeitig:

#Preview("Light") {
    ContentView()
        .preferredColorScheme(.light)
}

#Preview("Dark") {
    ContentView()
        .preferredColorScheme(.dark)
}

Im Simulator: Einstellungen → Entwickler → Dunkle Darstellung umschalten. Oder schneller: Xcode → Debug → Simulate Appearance → Dark.

Schritt 4: Manueller Dark Mode Toggle in der App

Manche Apps bieten einen eigenen Dark/Light/System-Schalter. So implementierst du das:

enum AppTheme: String, CaseIterable {
    case system, light, dark

    var colorScheme: ColorScheme? {
        switch self {
        case .system: return nil
        case .light: return .light
        case .dark: return .dark
        }
    }
}

@main
struct MyApp: App {
    @AppStorage("appTheme") private var appTheme: AppTheme = .system

    var body: some Scene {
        WindowGroup {
            ContentView()
                .preferredColorScheme(appTheme.colorScheme)
        }
    }
}

Der Toggle in den Einstellungen:

struct SettingsView: View {
    @AppStorage("appTheme") private var appTheme: AppTheme = .system

    var body: some View {
        Picker("Erscheinungsbild", selection: $appTheme) {
            Text("System").tag(AppTheme.system)
            Text("Hell").tag(AppTheme.light)
            Text("Dunkel").tag(AppTheme.dark)
        }
        .pickerStyle(.segmented)
    }
}

@AppStorage speichert die Auswahl automatisch in UserDefaults — sie bleibt auch nach einem App-Neustart erhalten.

Schritt 5: Aktuellen Modus abfragen

Mit @Environment kannst du in jeder View den aktiven Modus abfragen:

struct AdaptiveView: View {
    @Environment(\.colorScheme) private var colorScheme

    var body: some View {
        Image(colorScheme == .dark ? "logo-light" : "logo-dark")
    }
}

Nützlich für Bilder oder Grafiken die nicht über Asset-Kataloge adaptiert werden können.

Häufige Fehler

Fehler	Problem	Lösung
<code>Color.white</code> als Hintergrund	Bleibt weiß im Dark Mode — blendet	<code>Color(.systemBackground)</code> verwenden
<code>Color.black</code> für Text	Unsichtbar im Dark Mode	<code>.foregroundStyle(.primary)</code> verwenden
Schatten mit fester Farbe	Sieht im Dark Mode falsch aus	<code>shadow(color: .primary.opacity(0.1))</code>
Bilder ohne Dark-Variante	Logo auf dunklem Hintergrund unsichtbar	Asset-Katalog mit Any/Dark Variante
<code>#ffffff</code> in HTML-WebViews	WebView ignoriert Dark Mode	CSS <code>prefers-color-scheme</code> Media Query

Fazit

SwiftUI macht Dark Mode Support einfach — vorausgesetzt du verwendest semantische Farben statt hardcoded Werte. Die drei wichtigsten Regeln:

1. Systemfarben nutzen (.primary, .secondary, Color(.systemBackground))
2. Eigene Farben über Asset-Kataloge mit Light/Dark Varianten definieren
3. Nie <code>Color.white</code> oder <code>Color.black</code> für Hintergründe oder Text verwenden

Damit sieht deine App in beiden Modi professionell aus — und deine Nutzer können frei wählen. Mehr über unsere App-Entwicklung →

---

Dieser Artikel wurde zuletzt am 30. März 2026 aktualisiert. Getestet mit Xcode 16 / iOS 18 / Swift 5.9+.