How to Change Status Bar Background Color in SwiftUI

Question

How can I change the statusbar background color to a different color. I am using a NavigationView and ZStack.

I want the white area above the green Navigationbar to be green for example. How can I change that?

What I tried

Here is my code for the NavigationBar:

init() {
        UINavigationBar.appearance().largeTitleTextAttributes = [
            .foregroundColor : UIColor(#colorLiteral(red: 0.8745098039, green: 0.3411764706, blue: 0, alpha: 1))]

    UINavigationBar.appearance().backgroundColor = UIColor(named: "backgroundColor")
    }

Here is my code for the background color of the app:

var body: some View {
        NavigationView {
            ZStack {
                Color("backgroundColor")
                .edgesIgnoringSafeArea(.all)
            }
            .navigationBarTitle(Text("Agenda"))
        }
    }
}

And last but not least my scene delegate code:

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    let newAppearance = UINavigationBarAppearance()
    newAppearance.configureWithOpaqueBackground()
    newAppearance.backgroundColor = .black
    newAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]

    UINavigationBar.appearance().standardAppearance = newAppearance

    //Other code for displaying the first screen
}

Does this answer your question? [SwiftUI Navigation Bar and Status Bar - Make them same color](https://stackoverflow.com/questions/59394117/swiftui-navigation-bar-and-status-bar-make-them-same-color) — Hrabovskyi Oleksandr, Jan 31 '20 at 13:01
Thanks for your suggestion, but I have get this error if I paste the function into the scene delegate: "Invalid redeclaration of 'scene(_:willConnectTo:options:)'" — Pieter Bikkel, Jan 31 '20 at 14:36

score 9 · Answer 1 · edited Oct 26 '20 at 06:05

Try out this line of code

import SwiftUI

struct ContentView: View {
    @State private var selection = 0
    
    var body: some View {
        ZStack(alignment: .top) {
            VStack() {
                Rectangle()
                    .foregroundColor(.orange)
                    .edgesIgnoringSafeArea(.top)
                    .frame(height: 0)
                
                
                TabView {
                    AgendaView().tabItem({
                        Image(systemName: Constants.TabBarImageName.tabBar0 )
                        Text("\(Constants.TabBarText.tabBar0)")
                    }).tag(0)
                    
                    StandView().tabItem({
                        Image(systemName: Constants.TabBarImageName.tabBar1 )
                        Text("\(Constants.TabBarText.tabBar1)")
                    }).tag(1)
                    
                    UitslagenView().tabItem({
                        Image(systemName: Constants.TabBarImageName.tabBar2 )
                        Text("\(Constants.TabBarText.tabBar2)")
                    }).tag(2)
                    
                    NieuwsView().tabItem({
                        Image(systemName: Constants.TabBarImageName.tabBar3 )
                        Text("\(Constants.TabBarText.tabBar3)")
                    }).tag(3)
                    
                    InstellingenView().tabItem({
                        Image(systemName: Constants.TabBarImageName.tabBar4 )
                        Text("\(Constants.TabBarText.tabBar4)")
                    }).tag(4)
                    
                    
                    
                }.accentColor(Color(#colorLiteral(red: 0.8745098039, green: 0.3411764706, blue: 0.06666666667, alpha: 1)))
            }
        }
    }
}

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

Here is a link to my project: https://github.com/pieterbikkel/Volleyball — Pieter Bikkel, Jan 31 '20 at 16:10
Your code almost works. I still have a little white bar between the statusbar and NavigationBar. Here is how it looks like: https://imgur.com/a/jG5iw2y — Pieter Bikkel, Feb 04 '20 at 07:35
not working anymore on 13.6. There is another Hosting Controller in front of the tab view which changes the color to white again — mcatach, Aug 10 '20 at 18:28

How to Change Status Bar Background Color in SwiftUI

1 Answers1