How to change a List’s background color in SwiftUI

In my journey in learning SwiftUI I’m encountering small issues like not knowing how to change the background color of a List.

After some research I can now fully customise my Lists.

Changing the background color of a List:

There are several approaches you can go for:

1. Initialise the TableView color. you can either do this in the struct you placed the list in or in the App file. The latter approach will set the color for all of the Lists in you app

init(){
UITableView.appearance().backgroundColor = UIColor.purple
}

2. The above property can also be set like this:

List{}
.onAppear{ 
UITableView.appearance().backgroundColor = .purple 
}

3. My favorite one, set the List’s style to .plain and change the background color

List{}
.listStyle(.plain)
.background(Color.white.opacity(0.3))

Slayed

Changing the cells’ background color:

Let’s assume you create your own custom cells for your list. You might say “Yeah let’s set the background color to green”, nice one, anyway, after doing so, you’ll notice that the actual cell’s background will be white and it will contain a green rectangle, just like this:

Don’t worry I’m here to rescue you, just do the following:

List{
ForEach{...}
}.listRowBackground(Color.yellow)

Changing the separator color:

If you feel the urge to change the separators’ style or color you can simply use the following properties:

List{}
.listRowSeparator(.visible) //rows modifiers
.listRowBackground(Color.orange)
.listSectionSeparator(.visible) //sections modifiers
.listSectionSeparatorTint(.pink)

Sike, you can only use them in iOS 15. If you have a vintage soul like me and you wanna support older iOS versions you have to go back to the dear ol’ .onAppear{} method:

List{}
.onAppear{ 
UITableView.appearance().separatorStyle = .singleLine;
UITableView.appearance().separatorColor = .orange;
//Of course if you want to do it this way and you also want to set the List's background color here you can, just put in this line of code as well
UITableView.appearance().backgroundColor = .green;
}

That’s all, if you have any further questions on this topic don’t hesitate to ask.

You know you loved my story so you might as well just follow me since you’re here, xoxo.