How to change SwiftUI List section separator color

⋅ 1 min read ⋅ SwiftUI List iOS 15

Table of Contents

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.

Colorize section separator.
Colorize section separator.

You can easily support by checking out this sponsor.

Sponsor and reach thousands of iOS developers.

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

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

Change the list section separator to pink.
Change the list section separator to pink.

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.

Read more article about SwiftUI, List, iOS 15, or see all available topic

Enjoy the read?

If you enjoy this article, you can subscribe to the weekly newsletter.
Every Friday, you'll get a quick recap of all articles and tips posted on this site. No strings attached. Unsubscribe anytime.

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon and become my supporter. Sharing the article is also greatly appreciated.

Become a patron Buy me a coffee Tweet Share
How to remove List Section separators in SwiftUI

Some list style has section separators. Let's learn how to remove them.

How to fix preferredStatusBarStyle not getting called

Two common reasons make the preferredStatusBarStyle not getting called.

← Home