WWDC24 SALE: Save 50% on all my Swift books and bundles! >>

SOLVED: Day 42: Dark background not applying for custom ListLayout

Forums > 100 Days of SwiftUI

Hello,

I'm on Day 42 of the course and I am not able to apply the custom .darkBackground modifier to my custom ListLayout. It just shows the default dark mode background.

Here is my ContentView:

struct ContentView: View {
    let astronauts: [String: Astronaut] = Bundle.main.decode("astronauts.json")
    let missions: [Mission] = Bundle.main.decode("missions.json")

    @State private var showingGrid = true

    var body: some View {
        NavigationStack {
            Group {
                if showingGrid {
                    GridLayout(astronauts: astronauts, missions: missions)
                } else {
                    ListLayout(astronauts: astronauts, missions: missions)
                }
            }
            .navigationTitle("Moonshot")
            .background(.darkBackground)
            .preferredColorScheme(.dark)
            .toolbar {
                Button("Switch Layout") {
                    showingGrid.toggle()
                }
            }
        }
    }
}

Here is my ListLayout:

struct ListLayout: View {
    let astronauts: [String: Astronaut]
    let missions: [Mission]

    var body: some View {
        List {
            ForEach(missions) { mission in
                NavigationLink {
                    MissionView(mission: mission, astronauts: astronauts)
                } label: {
                    HStack {
                        VStack(alignment: .leading) {
                            Text(mission.displayName)
                                .font(.headline)
                                .foregroundStyle(.white)

                            Text(mission.formattedLaunchDate)
                                .font(.caption)
                                .foregroundStyle(.gray)
                        }

                        Spacer()

                        Image(mission.image)
                            .resizable()
                            .scaledToFit()
                            .frame(width: 50, height: 50)
                    }
                }
            }
        }
    }
}

   

Normally, you can’t see backgrounds on lists because it is covered up by the system background. In order you can see your applied background you will need to apply following modifier to your List view.

.scrollContentBackground(.hidden)

or another way it to use the below modifier for the entire List and remove .background() modifier

.listRowBackground(Color.darkBackground)

   

What some people may get confused about is that you have to apply the .listRowBackground(_ View:) to the ForEach. Hope that helps! Some example code:

List {
  ForEach(0..<5) {
     Text("Dynamic Row \($0)")
  }
  .listRowBackground(Color.red)
}
.scrollContentBackground(.hidden)
.background(.red)

   

Save 50% in my WWDC sale.

SAVE 50% To celebrate WWDC24, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.