How to Change NavigationView Colour in SwiftUI

iOS 16

From iOS 16 we can use .toolbarBackground for the NavigationBar / NavigationView Color. Don’t forget to add .toolbarBackground(.visible, for: .navigationBar). You can also set title color of Navigation Item by using ToolbarItem

struct ContentView : View {
    var body: some View {
        NavigationStack {
            Text("Dashboard")
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        Text("Cool Title")
                            .foregroundColor(.black)
                    }
                }
                .navigationBarTitleDisplayMode(.inline)
                .toolbarBackground(.red, for: .navigationBar)
                .toolbarBackground(.visible, for: .navigationBar)
        }
    }
}

iOS 13 Solution

By setting up the UINavigationBarAppearance we can change the Navigation bar Color. But remember it will affect globally.

struct ContentView: View {    
    init() {
        let navAppearance = UINavigationBarAppearance()
        navAppearance.backgroundColor = .red
        navAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        navAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        UINavigationBar.appearance().standardAppearance = navAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
    }
    
    var body: some View {
        NavigationView {
            List {
                ForEach((1...50), id: \.self) {
                    Text("Nav Example-- \($0)")
                }
            }
            .navigationBarTitle("NavBar Title")
        }
    }
}

1 thought on “How to Change NavigationView Colour in SwiftUI”

  1. Pingback: SwiftUI: How To Change NavigationView.toolbar Background Color - Programming Questions And Solutions Blog

Leave a Comment

Your email address will not be published. Required fields are marked *