Change the background color of a list in SwiftUI

In this tutorial, we will see how to change the background color of a list in SwiftUI.

We can change the background color of a list by hiding the default background using the scrollContentBackground() modifier. We can simply hide the background by passing .hidden as an argument within this modifier. (This modifier only works in iOS 16 and above versions).

Then we can set a new background color using the .background() modifier and specify the color within this modifier to change the background color.

Create a simple list

First of all, I will create a simple list to see the default background that we have to remove to change the background color.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Section {
                Text("Option 1")
                Text("Option 2")
            }
            Section {
                Text("Item 1")
                Text("Item 2")
                Text("Item 3")
            }
        }
    }
}

Output:

As you can see in the above screenshot the list appears with a default background. We have to hide that background to achieve our task.

Hide the default list background

We can simply hide the default list background that we see in the above output by using the scrollContentBackground() modifier.

Syntex

.scrollContentBackground(.hidden)

We have to simply apply the above modifier to the list, it will hide the default background.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Section {
                Text("Option 1")
                Text("Option 2")
            }
            Section {
                Text("Item 1")
                Text("Item 2")
                Text("Item 3")
            }
        }
        .scrollContentBackground(.hidden)
    }
}

Output:

Change the background color of the list

Now, We can simply change the background color of the list by applying the background() modifier to the List and passing our preferred color as an argument within this modifier.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Section {
                Text("Option 1")
                Text("Option 2")
            }
            Section {
                Text("Item 1")
                Text("Item 2")
                Text("Item 3")
            }
        }
        .scrollContentBackground(.hidden) // To hide the default background
        .background(.mint) //To change the background color
    }
}

Output:

Gradient background

Now, to create a gradient background for a list, we can use the .background() modifier with a LinearGradient within this modifier as its argument.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Section {
                Text("Option 1")
                Text("Option 2")
            }
            Section {
                Text("Item 1")
                Text("Item 2")
                Text("Item 3")
            }
        }
        .scrollContentBackground(.hidden) // To hide the default background
        // To create a gradient background
        .background(
            LinearGradient(gradient: Gradient(colors: [.brown, .gray]), startPoint: .topLeading, endPoint: .bottomTrailing)
            )
    }
}

Output:

Using an image as the background

We can use an Image view within the background() modifier to add an image as the background of the List.  We have to simply specify the name of the image inside the Image() initializer that we have added to our assets folder.

We need to make sure that the image is added to our assets folder.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Section {
                Text("Option 1")
                Text("Option 2")
            }
            Section {
                Text("Item 1")
                Text("Item 2")
                Text("Item 3")
            }
        }
        .scrollContentBackground(.hidden) // To hide the default background
        // Using the image as the background
        .background(
            Image("image") 
        )
    }
}

Output: