Skip to main content

Benutzerfreundliche Farbauswahl

Diese View ermöglicht es Nutzern, auf einfache Weise individuelle Farbschemata für die App-Oberfläche zu wählen. Während der Auswahl wird das gewählte Farbschema in einer Live-Vorschau angezeigt, sodass Nutzer sofort sehen, wie sich ihre Wahl auf das App-Design und die Lesbarkeit auswirkt.

🔍 Zweck

  • Personalisierung des App-Designs durch Nutzer
  • Barrierefreie Anpassung für bessere Sichtbarkeit und Lesbarkeit
  • Vorschau von Farbkombinationen vor dem Anwenden
  • Ermöglichen eines Dark-/Light-Modes mit benutzerdefinierten Farben
  • Visuelles Testen von UI-Kontrasten für Accessibility

📄 Codebeispiel

import SwiftUI

struct ThemeColorPickerView: View {
    @State private var primaryColor: Color = .blue
    @State private var secondaryColor: Color = .orange
    
    // Accessibility contrast check
    private func isAccessible(primary: Color, secondary: Color) -> Bool {
        // Simple luminance-based contrast check (for demo purposes)
        func luminance(_ color: UIColor) -> CGFloat {
            var r: CGFloat = 0, g: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0
            color.getRed(&r, green: &g, blue: &b, alpha: &a)
            return 0.299 * r + 0.587 * g + 0.114 * b
        }
        let primLum = luminance(UIColor(primary))
        let secLum = luminance(UIColor(secondary))
        let contrast = abs(primLum - secLum)
        return contrast > 0.4 // Threshold for reasonable contrast
    }
    
    var body: some View {
        VStack(spacing: 28) {
            Text("Theme Color Picker")
                .font(.title.bold())
            
            // Live preview area
            ZStack {
                RoundedRectangle(cornerRadius: 24)
                    .fill(primaryColor)
                    .frame(height: 180)
                    .shadow(radius: 4)
                
                VStack(spacing: 12) {
                    Text("Preview Title")
                        .foregroundStyle(secondaryColor)
                        .font(.title2.weight(.semibold))
                    
                    Text("This is how your app will look with the selected theme colors.")
                        .foregroundStyle(secondaryColor.opacity(0.9))
                        .font(.body)
                        .multilineTextAlignment(.center)
                        .padding([.leading, .trailing], 16)
                    
                    Button(action: {}) {
                        Text("Sample Button")
                            .fontWeight(.medium)
                            .padding()
                            .background(
                                RoundedRectangle(cornerRadius: 10)
                                    .fill(secondaryColor)
                            )
                            .foregroundStyle(primaryColor)
                    }
                }
                .padding()
            }
            
            // Color pickers
            VStack(spacing: 20) {
                HStack {
                    Text("Primary Color")
                    Spacer()
                    ColorPicker("", selection: $primaryColor, supportsOpacity: false)
                        .labelsHidden()
                }
                HStack {
                    Text("Accent Color")
                    Spacer()
                    ColorPicker("", selection: $secondaryColor, supportsOpacity: false)
                        .labelsHidden()
                }
            }
            .padding([.horizontal], 32)

            // Accessibility feedback
            if !isAccessible(primary: primaryColor, secondary: secondaryColor) {
                HStack(spacing: 8) {
                    Image(systemName: "exclamationmark.triangle.fill")
                        .foregroundStyle(.yellow)
                    Text("Low contrast – may be hard to read!")
                        .font(.footnote.bold())
                        .foregroundStyle(.yellow)
                }
                .padding(.top, -10)
            }

            Spacer()
        }
        .padding()
        .background(Color(uiColor: UIColor.systemBackground))
    }
}

#Preview {
    ThemeColorPickerView()
}
Back to top