Set Color of Chevron in a SwiftUI List in a NavigationView

Question

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

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")
    } )
  }
}

Jota

Answer 1

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

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 !!!
}

Heptarchy

And then, when you enter editing mode, the reinvent-the-wheel chevrons remain visible, because why think about all the edge cases that UIKit supports out-of-the-box, right? This is never a good solution. – Goldsworthy

Please do not vandalize your posts. By posting on the Stack Exchange network, you've granted a non-revocable right for SE to distribute that content (under the CC BY-SA 4.0 license). By SE policy, any vandalism will be reverted. – Letterpress

You seem to misunderstand the "serial voting reversed" indicator anyway. It means somebody previously upvoted many of your answers systematically, and when the system detected this, those votes were removed. Feel free to search Meta Stack Overflow for a fuller discussion. – Letterpress

Answer 2

I found out that if you use the second foregroundStyle in the NavigationLink it shows the proper color.

NavigationLink {
    Text("Child view")
} label: {
    Text("My option")
}
.foregroundStyle(.white, .red)

Jago

Answer 3

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

Add opacity(0), it works.

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

Inchoate

Answer 4

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)
    }
  }
}

Gorki

This doesn't seem to work on my end. Also .accentColor is deprecated: developer.apple.com/documentation/swiftui/ellipse/… – Bannasch