Learn Courses My Dashboard

Accent Color App Setting

Hi everyone,

I created a View in which a user will be able to hit a Button and set his preferred Color as the App Theme.
As you’ll be able to see below I started by defining an Array limiting user choice. I than created a ForEach loop which creates a Button for each color in my Array.


import SwiftUI

struct AccentColorView: View {
@Environment (.colorScheme) var colorScheme: ColorScheme

var accentColors = ["Blue", "Green", "Orange", "Pink", "Purple", "Red", "Yellow"]

var body: some View {
    NavigationView {
        Form {
            Section(header: Text("Appearance").padding(5.0)) {
                ForEach(0..<accentColors.count) { accentColor in
                    Button(action: {
                        //Set App's Accent Color
                    }, label: {
                        HStack {
                            Image(systemName: BSContent.accentColor)
                            Text(accentColors[accentColor])
                        }
                    })
                }
            }
        }
        .navigationBarTitle(Text("Accent Color"), displayMode: .inline)
        .toolbar {
            ToolbarItemGroup(placement: .navigationBarTrailing) {
                Button(action: {
                    //Close Accent Color Sheet
                }, label: {
                    Label(BTContent.close, systemImage: BSContent.close)
                })
            }
        }
    }
}

}

struct AccentColorView_Previews: PreviewProvider {
static var previews: some View {
AccentColorView()
}
}

Now as you probably already noticed, I added a systemImage before every color definition. My question is how do I make that systemImage change colors based on the color is in front of? I can do it if I create each button outside of my ForEach loop but how do I do it inside of it?

All possible help would be much appreciated.
Thanks!

Without knowing what BSContent and BTContent is it’s hard to test and provide meaningful feedback.

Don’t use an array of strings, use an array of Colors.

struct AccentColorView: View {
    let accentColors: [Color] = [.blue, .green, .pink, .purple, .red, .yellow]
    
    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Appearance").padding(5)) {
                    ForEach(accentColors, id: \.description) { color in
                        Button {
                            //set app's accent color
                        } label: {
                            HStack {
                                Image(systemName: BSContent.accentColor)
                                    .foregroundColor(color)
                                Text(String(describing: color).capitalized)
                            }
                        }
                    }
                }
            }
        }
    }
}

This uses the fact that Color conforms to CustomStringConvertible to get the color’s name by calling String(describing:) to make the Text part of your HStack. And you apply the Color itself as the foregroundColor of your image.

1 Like

@roosterboy Thank you so much for helping me out. Still learning I am new to coding. But thank you again for helping me out.