Skip to main content

Dynamische Farbthemen

Beschreibung

Diese View ermöglicht es Nutzer:innen, dynamisch zwischen hellen und dunklen Farbthemen zu wechseln. Alle UI-Komponenten passen sich automatisch der gewählten Farbumgebung an und sorgen so für verbesserte Zugänglichkeit und Benutzerkomfort.

🔍 Zweck

  • Verbesserung der Lesbarkeit in unterschiedlichen Lichtverhältnissen
  • Barrierefreiheit für Nutzer:innen mit Sehschwächen
  • Personalisierung der App-Oberfläche nach Nutzerpräferenz
  • Schonung des Akkus bei Geräten mit OLED-Displays
  • Anpassbare Design-Demos und Präsentationen

📄 Codebeispiel

import SwiftUI

// Enum to represent the available color themes
enum AppColorTheme: String, CaseIterable, Identifiable {
    case light = "Light"
    case dark = "Dark"
    
    var id: String { rawValue }
    
    // Returns the corresponding ColorScheme
    var colorScheme: ColorScheme {
        switch self {
        case .light:
            return .light
        case .dark:
            return .dark
        }
    }
}

// A simple view model for theme management
@Observable
class ThemeManager {
    var selectedTheme: AppColorTheme = .light
}

struct DynamicThemeView: View {
    @State private var themeManager = ThemeManager()
    
    var body: some View {
        VStack(spacing: 32) {
            Text("Dynamic Color Themes")
                .font(.largeTitle)
                .bold()
            
            Picker("Select Theme", selection: $themeManager.selectedTheme) {
                ForEach(AppColorTheme.allCases) { theme in
                    Label(theme.rawValue,
                          systemImage: theme == .light ? "sun.max.fill" : "moon.fill")
                        .tag(theme)
                }
            }
            .pickerStyle(.segmented)
            .padding()
            
            // Example content that reacts to the theme
            VStack(alignment: .leading, spacing: 16) {
                HStack {
                    Image(systemName: "person.crop.circle")
                        .foregroundStyle(.blue)
                    Text("Profil")
                }
                HStack {
                    Image(systemName: "gear")
                        .foregroundStyle(.red)
                    Text("Einstellungen")
                }
                HStack {
                    Image(systemName: "questionmark.circle")
                        .foregroundStyle(.green)
                    Text("Hilfe & Support")
                }
            }
            .padding()
            .background(
                RoundedRectangle(cornerRadius: 16)
                    .fill(.background.secondary)
                    .shadow(radius: 4)
            )
            
            Spacer()
        }
        // Animates color scheme changes for user comfort
        .animation(.easeInOut(duration: 0.2), value: themeManager.selectedTheme)
        // Applies the selected color scheme to all children views
        .preferredColorScheme(themeManager.selectedTheme.colorScheme)
        .padding()
        .background(.background)
    }
}

#Preview {
    DynamicThemeView()
}
Back to top