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

Question

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

Ehrenburg

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. :)

Cumulative

Sorry, maybe I wasn't clear enough. The question is how to do it with the new SwiftUI API's directly. Thanks for the comment – Ehrenburg

So this doesn't seem to work as listed for current version of SwiftUI What does work: navigationBarAppearance.backgroundColor = ... also: navigationBarAppearance.tintColor = ... changes the color of the icons, not barTintColor. – Cordy

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!!

Etymology

Note that you are changing the appearance of the UINavigationBar globally and not only for this view. All new NavigationViews will have these colors as well. – Minim

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)
        }
    }
}

Mansfield

use below line it will works 1) .navigationBarTitle(Text("Title")) 2) .navigationBarTitle(Text("Title"), displayMode: .large) – Scirrhous

I am not sure how does it change the background color of a navigation bar? Can you provide a code snippet that works. – Mansfield

Answer 4

Put a Rectangle behind your NavigationView inside a ZStack:

ZStack {
    Rectangle().foregroundColor(.red)
    NavigationView {
        ...
    }
}

Prittleprattle

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...
}

Catarrhine

Answer 6

With Introspect you could do it this way:

NavigationView {
    Text("Item 2")
    .introspectNavigationController { navigationController in
        navigationController.navigationBar.backgroundColor = .red
    }
}

Jorrie

I was looking for this answer , if you use UINavigationBar.appearance() on init() or on onAppear() it will effect the whole app not only you current view, but you solution effect the view itself only, Thank you – Vanzant

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.

Disperse

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)

Pampa

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 these two simple native modifiers (both needed):

Xcode 14

.toolbarBackground(.visible, for: .navigationBar)
.toolbarBackground(.yellow, for: .navigationBar)

Notes:

1. The color will be set on the entire bar (up to the top edge of the screen).

2. toolbarBackground MUST be visible to see the color

3. both modifiers should be applied on the content, NOT the NavigationStack (or NavigationView) itself!

Coniah