Set Color of Chevron in a SwiftUI List in a NavigationView

user_1165251 0
Viewed 2242

I have this list I a NavigationView.
In dark mode the Chevron (red circle) is almost invisible.

enter image description here How can I set the Color of Chevron in a List.

struct ContentView: View {
    var body: some View {
      NavigationView{
        List {
          Line(text: "Line 1")
          Line(text: "Line 2")
          Line(text: "Line 3",selected: true)
          Line(text: "Line 4")
          Line(text: "Line 5")
        }
      }
    }
}

struct Line: View {
  var text :String
  var selected = false
  @Environment(\.colorScheme) var colorScheme

  var body: some View {
    NavigationLink(destination: Text("D")) { Text(text)}
      .listRowBackground(selected ? Color.blue : Color(.systemBackground))
      .foregroundColor(selected ? Color.white : Color(.label))
    .onTapGesture(perform: {print ("tap")
    } )
  }
}
swiftui-navigationlink swiftui
3 Answers

The standard chevron is not a symbol by raster image, here it is

demo1

that is why it does not react on any color changing modifiers.

Solution, disable standard chevron and use own, custom, (behaviour of the List is the same), like below

HStack {
    Text(text)
    NavigationLink(destination: Text("D")) { EmptyView() } // disabled  !
    Image(systemName: "chevron.right")                     // << custom !!
        .foregroundColor(Color.red)                        // any color !!!
}

demo2

user_122990300

In my environment, default chevron is shown under customized chevron.

Add opacity(0), it works.

NavigationLink(destination: Text("D")) { EmptyView() }
    .opacity(0) // Add this
user_52939220

You can use the accentColor property:

struct ContentView: View {
  var body: some View {
    NavigationView{
      List {
        Line(text: "Line 1")
        Line(text: "Line 2")
        Line(text: "Line 3",selected: true)
        Line(text: "Line 4")
        Line(text: "Line 5")
      }.accentColor(.black)
    }
  }
}
user_139740860
Related