How to change SwiftUI List section separator color

Some SwiftUI List styles got a section separator, e.g., .plain, .grouped.

In iOS 15, SwiftUI got a new modifier, listSectionSeparatorTint(_:edges:), to change the color for this section separator.

You can easily support sarunw.com by checking out this sponsor.

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

How to change the SwiftUI List Section separator color

To change a list section separator color, we apply listSectionSeparatorTint(_:edges:) to a Section, passing the separator color as an argument.

NavigationView {
    List {
        Section("Section Header") {
            ForEach(0..<6) { i in
                Text("Row \(i.description)")
            }
        }
        .listSectionSeparatorTint(.pink)
    }
    .listStyle(.plain)
    .navigationTitle("List")
}

Make sure you apply listSectionSeparatorTint(_:edges:) to a Section.

The listSectionSeparatorTint(_:edges:) has an optional second argument that you can specify which edges the color applies. By default, it's applied to all edges.

But from my test on Xcode 14, this edges parameter doesn't work as expected. The .top edge is not working at all. As you can see from the previous example, the top separator is still gray even though we allied the color to all edges.