SwifUI - Custom color looks "plain" on device and simulator (not works on Preview)

Question

UPDATE: Just to clarify I have set the same color for dark and light mode.

---

I made a simple CustomColorPicker with the following code:

struct CustomColorPicker: View {
@Binding var selectedColor: Color
let colors: [Color] = [Color("my_blue"),
                       Color("my_blue_light"),
                       Color("my_yellow"),
                       Color("my_red"),
                       Color("my_green"),
                       Color("my_pink"),
                       Color("my_orange"),
                       Color("my_purple")]
var body: some View {
    ScrollView(.horizontal, showsIndicators: false) {
        HStack(spacing: 18) {
            ForEach(colors, id: \.self) { color in
                Button(action: {
                    self.selectedColor = color
                }) {
                    Image(systemName: self.selectedColor == color ? "checkmark.circle.fill" : "circle.fill")
                        .resizable()
                        .frame(width: 25, height: 25)
                }.accentColor(color)
            }
        }
     }
   }
}

Then, proceeded to create a super simple view like this:

struct CreateEmojiColor: View {

@State private var selectedColor = Color("my_blue")

var body: some View {
    CustomColorPicker(selectedColor: $selectedColor)
        .padding(.vertical)
 }
}

and everything works fine. This is the result:

I then embedded the "CreateEmojiColor" view inside a List like this:

NavigationStack {
        VStack{
            List{
                Section{
                    otherView()
                    CreateEmojiColor()
                    otherView2()
                    otherView3()
                }
            }
        }
 }

The problem is that when I run the code on the simulator or the device, this is the result:

Can't figure out why. Am I doing something wrong? Thanks guys.

Answer 1

For those who may happen to have the same problem, Asad reply did the trick for me.

The ".accentColor" modifier was overwriting the colors. Using ".foregroundStyle(color)" instead solved the problem. Thanks Asad.