Swiftui List Color Background

How do I modify the background color of a List in SwiftUI?

Ok, I found the solution for coloring the list rows:

struct TestRow: View {

    var body: some View {
        Text("This is a row!")
        .listRowBackground(Color.green)
    }
}

and then in body:

List {
    TestRow()
    TestRow()
    TestRow()
}

This works as I expect, but I have yet to find out how to then remove the dividing lines between the rows...

Change background color of lists in iOS15

Change the listStyle to .plain. The default for iOS 14 is .plain, and .insetGrouped for iOS 15.

Code:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Test")

            List {
                ForEach(1 ..< 20) { i in
                    Text(String(i))
                }
            }
            .listStyle(.plain)
        }
    }
}

Result:

SwiftUI List color background

iOS 16

Since Xcode 14 beta 3, You can change the background of all lists and scrollable contents using this modifier:

.scrollContentBackground(.hidden)

You can pass in .hidden to make it transparent. So you can see the color or image underneath.

---

iOS 15 and below

All SwiftUI's Lists are backed by a UITableView (until iOS 16). so you need to change the background color of the tableView. You make it clear so other views will be visible underneath it:

struct ContentView: View {
    
    init(){
        UITableView.appearance().backgroundColor = .clear
    }
        
    var body: some View {
        Form {
            Section(header: Text("First Section")) {
                Text("First cell")
            }
            Section(header: Text("Second Section")) {
                Text("First cell")
            }
        }
        .background(Color.yellow)
    }
}

Now you can use Any background (including all Colors) you want

Note that those top and bottom white areas are the safe areas and you can use the .edgesIgnoringSafeArea() modifier to get rid of them.

Also note that List with the .listStyle(GroupedListStyle()) modifier can be replaced by a simple Form. But keep in mind that SwiftUI controls behave differently depending on their enclosing view.

Also you may want to set the UITableViewCell's background color to clear as well for plain tableviews

How can I change background color of each element in list depend of value inside each row

If you want to change individual rows, you have to place the .listRowBackground() on the actual row.

        List{
            ForEach(taskVM.sortedDays) {day in
                Section( ... ){
                    ForEach(day.dailyTasks.sorted(by: {$0.hour < $1.hour}), id: \.hour) {task in
                           
                        HStack{
                            ...
                        }
                        // Place it on the actual row that you want changed, otherwise
                        // you apply it to all rows.
                        // Also, this code assumes that task.color is of type Color
                        .listRowBackground(task.color)
                        .swipeActions {
                            ...
                        }
                    }
                    // : Foreach (Tasks)
            } // ForEach (Days)

iOS 16 SwiftUI List Background

iOS 16

Update: Xcode 14b3+

Just use new modifier:

    List {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
    .scrollContentBackground(Color.red)     // << here !!
//    .scrollContentBackground(Color.clear)     // << transparent !!
//    .scrollContentBackground(.hidden)     // << can be combined with above !!

Original

Now they use UICollectionView for backend, so an updated workaround is to change corresponding background colors:

Main part:

extension UICollectionReusableView {
    override open var backgroundColor: UIColor? {
        get { .clear }
        set { }

        // default separators use same color as background
        // so to have it same but new (say red) it can be
        // used as below, otherwise we just need custom separators
        // 
        // set { super.backgroundColor = .red }

    }
}

struct ContentView: View {
    init() {
        UICollectionView.appearance().backgroundColor = .clear
    }
//...

Test module on GitHub

Modify the background colour of a List in SwiftUI?

Removing ContentView1's init fixes the problem.

The issue is caused by your code setting selectedBackgroundView, but you don't need any of that init anyway as it still functions as you intend.

SwiftUI List Background color

iOS 16

Since Xcode 14 beta 3, You can change the background of all lists and scrollable contents using this modifier:

.scrollContentBackground(.hidden)

You can pass in .hidden to make it transparent. So you can see the color or image underneath.

---

iOS 14

In iOS 14, you may consider using LazyVStack instead of list for this:

ScrollView {
    LazyVStack {
        ForEach((1...100), id: \.self) {
            Text("Placeholder \($0)")
        }
    }
    .background(Color.yellow)
}

Keep in mind that LazyVStack is lazy and doesn't render all rows all the time. So they are very performant and suggested by Apple itself in WWDC 2020.

---

iOS 13

All SwiftUI's Lists are backed by a UITableViewin iOS. so you need to change the background color of the tableView. But since Color and UIColor values are slightly different, you can get rid of the UIColor.

struct ContentView: View {
    
    init() {
        /// These could be anywhere before the list has loaded.
        UITableView.appearance().backgroundColor = .clear // tableview background
        UITableViewCell.appearance().backgroundColor = .clear // cell background
    }

    var body: some View {
        List {
            ,,,
        }
        .background(Color.yellow)
    }
}

Now you can use Any background (including all Colors) you want

Note that those top and bottom white areas are safe are and you can use .edgesIgnoringSafeArea() modifier to get rid of them.

⚠️ Important note!

Apple is on its way to deprecate all UIKit tricks that we are using in the SwiftUI (like tweaking the UIAppearance). So you may want to consider adapting your code to the latest iOS always

How to add background Color to List in swiftUI

If you want to change the background color you would do the following in the view containing the List. Add this init block in your View. This will change everything to green.

init() {
   UITableViewCell.appearance().backgroundColor = .green
   UITableView.appearance().backgroundColor = .green
}

---

Related Topics