Selection color of a NavigationLink in List was different in Simulator and Device (SwiftUI)

Question

I have a list with some NavigationLinks as OutlineGroup:

List {
  OutlineGroup(bundle.topics, children: \.children) { topic in
    NavigationLink(destination: DetailView(topic: topic)) {
      Label(topic.name, systemImage: topic.children != nil ? "folder" : "doc")
    }
  }
}

My problem is that the selection color was different on the iPad Air device and the iPad Air simulator. On the simulator, the background color of a selected NavigationLink was gray and the disclosure indicator is still visible.

But on the real iPad Air device, the selection color is blue – the same blue as the disclosure indicator and it wasn't visible on a selected row.

Any idea, why the color is difference? Can I manually set the selection background color?

Trelu

I noticed this difference is between iOS 15 and iOS 16. On 15 the selection color was gray while 16 is accent. There are also discrepancies in Apple's own applications. For instance, the redesigned System Settings in Ventura 13.2.1 has a accent selection color, while Finder, Photos, etc. still uses light gray. – Woven

Answer 1

Add an accentColor(_:) modifier to the list with the color you want to use.

List {
   OutlineGroup(bundle.topics, children: \.children) { topic in
      NavigationLink(destination: DetailView(topic: topic)) {
         Label(topic.name, systemImage: topic.children != nil ? "folder" : "doc")
      }
   }
}
.accentColor(.gray)

The only problem is accentColor(_:) is getting deprecated. Apple suggests to use tint(_:) but it isn't working. The other option would be to change the asset catalog’s accent color.

Binetta

compilers shows a warning that we should use: .tint(...) but it doesn't work i don't know why – Urbannai

I believe the select color may appear differently if there is a selected item in a nested List or equivalent. – Caelian

Answer 2

To properly set the row selection color while keeping the correct tint color for the controls inside the rows, you need to call accentColor twice, like so.

List {
    ForEach(items) { item in 
        ItemView(item)
    }
    .accentColor(.accentColor) // the normal tint for the row content
}
.accentColor(.purple) // the row selection background color

Communitarian

Answer 3

Try using .listRowBackground:

List {
    ForEach(items) { item in 
        ItemView(item)
           .listRowBackground(Color.clear)
    }
}

Kraigkrait