How to setup background color of container?

Question

I am begginer in coding in Swift, actually started this week. Please, I am looking for help about changing color of the container from gray to black. I cant anyhow figure out how to change it to any color. Probably missing some simple knowledge.

My code:

private var alertsView: some View {
        NavigationView {
            Form {
                HStack(spacing: 20) {
                    Button(action: {
                        showingAlertSetup = true
                    }) {
                        HStack {
                            Image(systemName: "plus")
                            Text("Add New Alert")
                        }
                        .padding()
                        .foregroundColor(.blue)
                    }
                    Spacer()
                    Button(action: {
                        // Action for adding a recurring alert
                    }) {
                        HStack {
                            Image(systemName: "plus")
                            Text("Add Recurring Alert")
                        }
                        .padding()
                        .foregroundColor(.blue)
                    }
                }
                .padding(.vertical, 8)

                Section(header: Text("Active Alerts")) {
                    ForEach(alertSettings) { alert in
                        alertRow(for: alert)
                    }
                    .onDelete(perform: deleteAlert)
                    .listRowSeparator(.hidden)
                }
            }
            .listStyle(PlainListStyle())
            .navigationTitle("Alerts")
        }
    }

CHECK OUT MY CANVAS

Thanks for any help

I tried using Cursor, but failed.

Answer 1

Assuming you have set the Appearance to Dark, try this approach using .listRowBackground(Color.clear) as shown in the example code:

struct ContentView: View {
    @State private var showingAlertSetup = false
    
    var body : some View {
        alertsView
    }
    
    @ViewBuilder  // <--- here
    private var alertsView: some View {
        
        NavigationStack {  // <--- here
            Form {
                HStack(spacing: 20) {
                    Button(action: {
                        showingAlertSetup = true
                    }) {
                        HStack {
                            Image(systemName: "plus")
                            Text("Add New Alert")
                        }
                        .padding()
                        .foregroundColor(.blue)
                    }
                    Spacer()
                    Button(action: {
                        // Action for adding a recurring alert
                    }) {
                        HStack {
                            Image(systemName: "plus")
                            Text("Add Recurring Alert")
                        }
                        .padding()
                        .foregroundColor(.blue)
                    }
                }
                .padding(.vertical, 8)
                .listRowBackground(Color.clear)  // <--- here
                
                Section(header: Text("Active Alerts")) {
                    Text("alertSettings") // <--- for my testing
                    //                    ForEach(alertSettings) { alert in
                    //                        alertRow(for: alert)
                    //                    }
                    //                    .onDelete(perform: deleteAlert)
                    //                    .listRowSeparator(.hidden)
                }
                .listRowBackground(Color.clear)  // <--- here
            }
            .listStyle(PlainListStyle())
            .navigationTitle("Alerts")
        }

    }
    
    func deleteAlert(at offsets: IndexSet) {
        //  offsets.forEach { alertSettings.remove(at: $0) }
    }
}

Note, NavigationView is deprecated use NavigationStack instead.