How to change the status bar background color in SwiftUI?

Question

I have a ZStack which has Color.orange set on it:

struct HomeView: View {
    init() {
        UITabBar.appearance().barTintColor = UIColor.orange
    }
    var body: some View {
        ZStack {
            Color.orange
            TabView {
                Settings()
                .tabItem {
                    Image(systemName: "gear")
                    Text("Settings")
                }
                MapKitView()
                .tabItem {
                    Image(systemName: "location.circle.fill")
                    Text("Home")
                }
                ProfileView()
                .tabItem {
                    Image(systemName: "person")
                    Text("Profile")
                }
            }
            .font(.headline)
        }
    }
}

and in this ZStack I have a TabView with child views that all have orange ZStacks. However these child views, including Settings() and MapKitView() shown below, do not have an orange status bar.

Settings()

struct Settings: View {

    var body: some View {
        ZStack {
            Color.orange
            VStack {
                NavigationView {
                       ...
                    }
            }
        }
    }
}

MapKitView()

struct MapKitView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        return mapView
    }
    func updateUIView(_ uiView: MKMapView, context: UIViewRepresentableContext<MapKitView>) {

    }
}

How can I make the status bar orange across all my views?

Does this answer your question? [SwiftUI: Status bar color](https://stackoverflow.com/questions/57063142/swiftui-status-bar-color) — pawello2222, Jun 07 '20 at 13:11
No it doesn't that just changes the text not background colour @pawello2222 — Zorgan, Jun 07 '20 at 13:25
You should use `Color.orange.edgesIgnoringSafeArea(.all)` that way it should expand to fill the area that is not coverd. — Andrew, Jun 07 '20 at 13:52

score 7 · Accepted Answer · answered Jun 07 '20 at 14:16

7

ZStack {
...
}
.edgesIgnoringSafeArea(.vertical) // or .top

answered Jun 07 '20 at 14:16

Joannes

2,190
3
15
36

score 5 · Answer 2 · answered Oct 04 '21 at 15:45

If, for example, you wanted to draw a nice blur under the status bar.

YourView()
    .overlay(alignment: .top, content: {
        Color.clear // Or any view or color
    .background(.regularMaterial) // I put clear here because I prefer to put a blur in this case. This modifier and the material it contains are optional.
    .edgesIgnoringSafeArea(.top)
    .frame(height: 0) // This will constrain the overlay to only go above the top safe area and not under.
})

How to change the status bar background color in SwiftUI?

2 Answers2