How can the background or the color in the navigation bar be changed? - navigationbar

Question

Currently I couldn't find any method to change the color/background of the navigation bar in SwiftUI. Any tips?

Answer 1

In order to change color of navigation bar for all view controllers, you have to set it in AppDelegate.swift file
Add following code to didFinishLaunchingWithOptions function in AppDelegate.swift
var navigationBarAppearace = UINavigationBar.appearance()
navigationBarAppearace.tintColor = uicolorFromHex(0xffffff)
navigationBarAppearace.barTintColor = uicolorFromHex(0x034517)
In here tintColor attribute change the background color of the navigation bar.
barTintColor attribute affect to the color of the:
back indicator image
button titles
button images
Bonus:
Change color of navigation bar title:
// change navigation item title color
navigationBarAppearace.titleTextAttributes =[NSForegroundColorAttributeName:UIColor.whiteColor()]
titleTextAttributes affect to the title text
I hope it helps. :)

Answer 2

In SwiftUI, at this point we can not change it directly, but you can change navigationBar appearance like this,
struct YourView: View {
init() {
UINavigationBar.appearance().backgroundColor = .orange
//Use this if NavigationBarTitle is with Large Font
UINavigationBar.appearance().largeTitleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
//Use this if NavigationBarTitle is with displayMode = .inline
//UINavigationBar.appearance().titleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
}
var body: some View {
NavigationView {
Text("Hello World!")
.navigationBarTitle(Text("Dashboard").font(.subheadline), displayMode: .large)
//.navigationBarTitle (Text("Dashboard"), displayMode: .inline)
}
}
}
I hope this will help you. Thanks!!

Answer 3

Till now there is no definitive API in SwiftUI for this purpose. But you can use the appearance API. Here is a sample code.
import SwiftUI
struct ContentView : View {
init() {
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.red]
UINavigationBar.appearance().backgroundColor = .green
}
var body: some View {
NavigationView {
NavigationButton(destination: SecondPage(), label: {
Text("Click")
})
.navigationBarTitle(Text("Title"), displayMode: .inline)
}
}
}

Answer 4

Put a Rectangle behind your NavigationView inside a ZStack:
ZStack {
Rectangle().foregroundColor(.red)
NavigationView {
...
}
}

Answer 5

Please see this answer for a solution that does not use .appearance().
In short use UIViewControllerRepresentable
func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationConfigurator>) {
uiViewController.navigationController?.navigationBar...
}

Answer 6

With Introspect you could do it this way:
NavigationView {
Text("Item 2")
.introspectNavigationController { navigationController in
navigationController.navigationBar.backgroundColor = .red
}
}

Answer 7

One thing to note that I didn't at first understand: SwiftUI will change the appearance of things like NavigationBar based on whether you are in night mode.
If you want to default it to a different color scheme add
.colorScheme(.dark)
If you create a color scheme using the color set system as outlined in this post: https://www.freecodecamp.org/news/how-to-build-design-system-with-swiftui/ it would apply to the main elements like navigations and tab bars, and allow you to apply different schemes for night/day mode.

Answer 8

The NavigationView is managing full screens of content. Each of those screens has its own background color. Therefore you can use the following approach to apply your Background color onto the screens:
let backgroundColor = Color(red: 0.8, green: 0.9, blue: 0.9)
extension View {
func applyBackground() -> some View {
ZStack{
backgroundColor
.edgesIgnoringSafeArea(.all)
self
}
}
}
Then you apply it to all your screens:
NavigationView {
PrimaryView()
.applyBackground()
DetailView(title: selectedString)
.applyBackground()
}
Be aware: some SwiftUI views have their own background color which is overriding yours (e.g. Form and List depending on context)

Answer 9

iOS 16
You can set any color to the background color of any toolbar background color (including the navigation bar) for the inline state with a simple native modifier:
Xcode 14 beta 5 (Not working 🤦🏻‍♂️, waiting for beta 6...)
.toolbarBackground(.yellow, for: .navigationBar)
Xcode 14 beta 1,2,3,4
.toolbarBackground(.yellow, in: .navigationBar)
Note that the color will set on the entire bar (up to the top edge of the screen).
Also, the color will be animated during the transition between Large and Inline modes of the bar.