What's the default color for the background of a SwiftUI List?

Question

I know how to change the background color of a SwiftUI Views list, but I cannot find the default color. I've tried using the MacOS 'Digital Color Meter', but it just doesn't pick it up right.

As you can see in this image, I've tried to set the background color of a list row (using .listRowBackground to the exact same of the surrounding list based off of the values from Digital Color Meter.

Does anyone actually know what the default background color actually is?

Psychrometer

Is it possible that you got RGB values wrong? Maybe you have used an external screen with different Color Space? Please check my answer for the correct values. – Richmound

Answer 1

Short answer: it looks like it is UIColor.secondarySystemBackground

Long answer:

I have tried Digital Color Meter app the sam as you did. It shows this RGB values: 242, 242, 247.

I have created such color:

Here is my code:

import SwiftUI

extension Color {
    public static let ListBGColor = Color("ListBGColor")
}

struct ContentView: View {
    var body: some View {
        List {
                ForEach(0..<5) {_ in
                    Text("Hello, world!")
                        .padding()
                }
                .listRowBackground(Color.ListBGColor)
        }
        .listStyle(InsetGroupedListStyle())
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Result: the same color as the background (testes on Simulator and iPhone):

Richmound

Answer 2

After doing some testing, it looks like it might be UIColor.secondarySystemGroupedBackground.

Examples

Default

With UIColor.secondarySystemGroupedBackground

I'm using it to set the list row background: .listRowBackground(Color(UIColor.secondarySystemGroupedBackground))

Postrider

Answer 3

If you're talking about List{ }, it is .systemGroupedBackground. Check in dark mode: .systemSecondaryBackground does something different.

Dismal

Answer 4

2024, iOS 17:

The default list background color is simply:

.background.secondary

For example:

VStack {
   Text("Color me gray!")
}
.background(.background.secondary)

... will give the VStack the same background color as a List.

This will also work (if you need to support older iOS versions:

VStack {
       Text("Color me gray!")
    }
.background(Color(UIColor.secondarySystemGroupedBackground))

Some more insight on this can be found here.

Celiotomy

Answer 5

The default color is different for each ListStyle and platform and I don't think SwiftUI exposes these colors. You could technically Introspect the list view and get it's background color through UIKit.

Ba

Answer 6

VStack {
    Text("The background same as list, it also support dark mode")
}
.background(
    Color(.systemGroupedBackground)
)

Nationalist

Thank you for your interest in contributing to the Stack Overflow community. This question already has a number of answers—including a few that have been validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation? – Agan