Accent Color App Setting

[jprosadoDE]

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!

[Chris_Parker]

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

[roosterboy]

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.

[jprosadoDE]

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