4

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

9 Answers 9

5

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

2
  • 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 Jun 27, 2019 at 9:05
  • 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.
    – Rufflez
    Oct 28, 2019 at 17:27
3

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

1
  • 1
    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.
    – José
    Apr 1, 2022 at 6:53
2

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)
        }
    }
}
2
  • use below line it will works 1) .navigationBarTitle(Text("Title")) 2) .navigationBarTitle(Text("Title"), displayMode: .large) Jun 27, 2019 at 13:56
  • I am not sure how does it change the background color of a navigation bar? Can you provide a code snippet that works. Jun 28, 2019 at 4:43
1

Put a Rectangle behind your NavigationView inside a ZStack:

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

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

With Introspect you could do it this way:

NavigationView {
    Text("Item 2")
    .introspectNavigationController { navigationController in
        navigationController.navigationBar.backgroundColor = .red
    }
}
1
  • 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
    – Basel
    Mar 2, 2022 at 12:33
1

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.

0

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)

-1

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!

Demo

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.