How to Change Picker Text Color In SwiftUI

Question

ozankeklik OP

Created Oct ’23

Replies 3

Boosts 0

Views 6.3k

Participants 5

I try to change picker text color but, it does not work.

Screenshot 2023-10-20 at 16.48.38.png

As you see, "City" and "District"'s color are blue but, I'd like to make them white. I have tried below codes but, they do not work.

Do you know any methods for that ?

Picker("İl", selection: $selectedCity) {
      ForEach(turkishCities, id: \.self) { city in
         Text(city)
           .foregroundColor(.white)
      }
}

Picker("İlçe", selection: $selectedDistrict) {
    ForEach(cityDistricts[selectedCity] ?? [], id: \.self) { district in
        Text(district)
            .foregroundColor(Color.white)
    }
}
.onAppear {
UISegmentedControl.appearance().setTitleTextAttributes([.foregroundColor: UIColor.white], for: .normal)
}

Thank you in advance.

Answered by Claude31 in 769235022

Using accentColor should do it:

Picker("İl", selection: $selectedCity) {
      ForEach(turkishCities, id: \.self) { city in
         Text(city)
      }
} 
 .accentColor(.red)

A small example to show to select between User1, User2, User3:

            Picker("User", selection: $selectedUser) {
                ForEach(users, id: \.self) { user in
                    Text(user)
                        .tag(user)
                }
            }
            .accentColor(.red)

With accentColor:

without accentColor:

Picker no accent 2023-10-20 à 17.52.26.png

Note: that does not work If the picker is within a form.

Boost

Answer 1

Claude31 OP

Oct ’23

Accepted Answer

Using accentColor should do it:

Picker("İl", selection: $selectedCity) {
      ForEach(turkishCities, id: \.self) { city in
         Text(city)
      }
} 
 .accentColor(.red)

A small example to show to select between User1, User2, User3:

            Picker("User", selection: $selectedUser) {
                ForEach(users, id: \.self) { user in
                    Text(user)
                        .tag(user)
                }
            }
            .accentColor(.red)

With accentColor:

without accentColor:

Picker no accent 2023-10-20 à 17.52.26.png

Note: that does not work If the picker is within a form.

2

Answer 2

raybeyer_adbsg OP

Feb ’24

As @obaytimur proposed, tint seems the way to go. Also, in some cases accentColor doesn't seem to work. I had a quite nested view with the picker inside, and the text color wouldn't change with accentColor. tint worked. Thanks

0

Answer 3

dxzdb OP

Sep ’24

I can see that both .tint & .accentColor works for the default picker. But is there any way to change the color of a .pickerStyle(.wheel)? I've tried a lot of scenarios. It only seems to work with .automatic.

                Picker ("", selection: $countDowns) {
                    ForEach(countDowns, id: \.self) { countDown in
                        Text(" \(countDown)")

// .accentColor(.blue)

                    }
                }
                .accentColor(.blue)

// .tint(.blue) // .pickerStyle(.wheel) .font(.largeTitle) .scaleEffect(2.0)

0