How to change SwiftUI list background color

In iOS 16, we finally got a native way to change the background color of a list view in SwiftUI.

We can do this with the new view modifier, .scrollContentBackground.

There are two steps to change the SwiftUI list background color.

1. Hide the standard background of the List.
2. Set a new background color.

How to hide SwiftUI list background

scrollContentBackground modifier lets you specify the visibility of the background for scrollable views within a list view.

This example will hide the standard system background of the List view.

List {
    Section {
        Text("Item 1")
    }
    Section {
        Text("Item 2")
        Text("Item 3")
        Text("Item 4")
    }
    Section {
        Text("Item 5")
        Text("Item 6")
        Text("Item 7")
    }
}
.scrollContentBackground(.hidden)

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

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

How to change SwiftUI list background color

Once the default background color is gone, you can set a new one with the .background modifier.

In this example, I set the list view background color to pink.

List {
    Section {
        Text("Item 1")
    }
    Section {
        Text("Item 2")
        Text("Item 3")
        Text("Item 4")
    }
    Section {
        Text("Item 5")
        Text("Item 6")
        Text("Item 7")
    }
}
.background(.pink)
.scrollContentBackground(.hidden)

Here is another example where we use an image as a background.

List {
    Section {
        Text("Item 1")
    }
    Section {
        Text("Item 2")
        Text("Item 3")
        Text("Item 4")
    }
    Section {
        Text("Item 5")
        Text("Item 6")
        Text("Item 7")
    }
}
.background {
    Image("ventura")
}
.scrollContentBackground(.hidden)