SwiftUI - Set statusbar background color to align with navigation bar

Question

I am trying to set the background color of the status bar to align it with the navigation bar color. In UIKit I would place a view underneath it. In SwiftUI I tried to use a ZStack but then the large title would not work anymore.

So this is my current working status without a green status bar:

 var body: some View {
        NavigationView {
            
            ScrollView {
                Text("Lol 123 Lol")
                    .foregroundColor(Color.secondary)
                    .padding([.top, .bottom], 16)
                    .padding([.leading,.trailing], 16)
                TwoTextFieldsView(isSecondSecure: true,
                                  firstTextFieldText: username,
                                  secondTextFieldText: password,
                                  firstTextFieldPlaceholder: "Username",
                                  secondTextFieldPlaceholder: "Password")
                    .padding([.leading,.trailing, .bottom], 16)
                
                
                
            }
            .navigationBarTitle("Connect to Lol")
            .onTapGesture {
                self.hideKeyboard()
            }
            
        }
        
    }

And it looks like:

Answer 1

You have to add

.edgesIgnoringSafeArea(.all)

modifier under your background color.

struct ContentView: View {
    @State private var password = ""
    
    var body: some View {
        NavigationView {
            ZStack {
                
                Color.green
                    .edgesIgnoringSafeArea(.all) //<-- Add this modifier to the background Color
                
                VStack {
                    ScrollView {
                        Text("Lol 123 Lol")
                            .foregroundColor(Color.secondary)
                            .padding([.top, .bottom], 16)
                            .padding([.leading,.trailing], 16)
                        TextField("Test", text: $password)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                            .padding([.leading,.trailing, .bottom], 16)
                    }
                    .navigationBarTitle("Connect to Lol")
                }
            }
        }
    }
}

Hope it helps.

Answer 2

This code works with the modifier .navigationBarTitle("Connect to Lol", displayMode: .inline):

struct ContentView1: View {
    @State private var password = ""
    
    init() {
        UINavigationBar.appearance().barTintColor = .brown
    }
    
    
    var body: some View {
            NavigationView {
                
                ScrollView {
                    Text("Lol 123 Lol")
                        .foregroundColor(Color.secondary)
                                            .padding([.top, .bottom], 16)
                                            .padding([.leading,.trailing], 16)
                        TextField("Test", text: $password)
                                                .textFieldStyle(RoundedBorderTextFieldStyle())
                                                .padding([.leading,.trailing, .bottom], 16)
                    
                    
                    
                }
                .navigationBarTitle("Connect to Lol", displayMode: .inline)
                }
            // do not forget to add this
            .navigationViewStyle(StackNavigationViewStyle())
            }
}

But with default mode .navigationBarTitle("Connect to Lol", displayMode: .automatic) or .navigationBarTitle("Connect to Lol", displayMode: .large)- this method does not work for some reason and does not fill in the status bar. If someone can explain why, I would be grateful.

Deleting status bar (.statusBar (hidden: true)) also did not bring results.

I was looking for this problem and found a great article about it. And i modified your code by this article and came to success.

    struct ContentView1: View {
        @State private var password = ""
        
        init() {
            let coloredAppearance = UINavigationBarAppearance()
            coloredAppearance.backgroundColor = .green
            coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.black]
                   
            UINavigationBar.appearance().standardAppearance = coloredAppearance
            UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
        }
        
        
        var body: some View {
                NavigationView {
                    
                    ScrollView {
                        Text("Lol 123 Lol")
                            .foregroundColor(Color.secondary)
                                                .padding([.top, .bottom], 16)
                                                .padding([.leading,.trailing], 16)
                            TextField("Test", text: $password)
                                                    .textFieldStyle(RoundedBorderTextFieldStyle())
                                                    .padding([.leading,.trailing, .bottom], 16)
                        
                        
                        
                    }
                    .navigationBarTitle("Connect to Lol")
                    }
                // do not forget to add this
                .navigationViewStyle(StackNavigationViewStyle())
                }
    }

Code execution result: