How to change NavigationStack background Color in SwiftUI

DevTechie Inc
Dec 7, 2022

NavigationStack provides easiest way to add Navbar in SwiftUI apps.

In this article, we will look at changing background color for NavigationStack in SwiftUI.

Let’s get started by creating a simple view. We will set navigationTitle and navigationBarTitleDisplayMode for the view as well.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("Build Photo Gallery in SwiftUI Course at DevTechie.com")
                    .font(.largeTitle)
                    .foregroundColor(.orange)
            }
            .navigationTitle("DevTechie.com")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}
Our view looks like this in light and dark mode:

Customizing NavigationStack is easy, since NavigationStack is backed by UINavigationBar, setting its appearanceproperty will give us ability to change various appearance values including backgroundColor.

Let’s create object for UINavigationBarAppearance and set opaque background with configureWithOpaqueBackgroundand backgroundColor to orange color.

We will set all this with View initialization as shown below:

struct ContentView: View {
    
    init() {
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.configureWithOpaqueBackground()
        navBarAppearance.backgroundColor = UIColor.orange
        UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
    }
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("Build Photo Gallery in SwiftUI Course at DevTechie.com")
                    .font(.largeTitle)
                    .foregroundColor(.orange)
            }
            .navigationTitle("DevTechie.com")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}
This will give us following:

With that we have reached the end of this article. Thank you once again for reading. Don’t forget to follow 😍. Also subscribe our newsletter at https://www.devtechie.com
Like