I'm trying to add colors to this NavigationStack. I want a single color for the entire background. At firt I got nothing. then I added a ZStack, even a VStack, but I get a red block between the top nav bar and the list. I know I'm overlooking something simple, but I can't quite figure it out.

There was an earlier post on the subject, but I cannot seem to apply the concepts on my view.

I appreciate your help.

var body: some View {

    NavigationStack(path: $path){
        ZStack {
            VStack {
                Color.red
                List(restaurants) {restaurant in
                    NavigationLink(value: restaurant) {
                        HStack {
                            Text(restaurant.location)
                            Text(restaurant.mainGrade)
                        }
                        .font(.system(size:18))
                        .foregroundColor(.green)
                    }
                }
                .navigationTitle("Restaurants")
                .toolbar {
                    Button("Add", systemImage: "plus") {
                        let restaurant = Restaurant(location: "New", eGrade: "A", sGrade: "A", cGrade: "A", rGrade: "A", bGrade: "A", mainGrade: "A")
                        modelContext.insert(restaurant)
                        path = [restaurant]
                    }
                    .navigationDestination(for: Restaurant.self) { restaurant in
                        EditRestaurauntView(restaurant: restaurant)
                    }
                }
            }
        }
    }

} }