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")
}
}
}
Pingback: SwiftUI: How To Change NavigationView.toolbar Background Color - Programming Questions And Solutions Blog