How can I change the background color of the navigation bar in SwiftUI?

Question

I would like to change the background color of the navigation bar. But what am I doing wrong that the colors look so different?

My code:

UINavigationBar.appearance().backgroundColor = .red

return VStack(spacing: 0) {
    Text("Test")
        .padding(.top, 9.5)
        .padding(.bottom, 8)
        .frame(minWidth: 0, maxWidth: .infinity)
        .background(Color.red)
        .font(.footnote)
    NavigationView {
        Text("Hello")
        .navigationBarTitle(Text("Hi"), displayMode: .inline)
    }
}

EDIT: With this solution, it gets better but there is still a difference in color.

My code now:

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            Text("Test")
                .padding(.top, 9.5)
                .padding(.bottom, 8)
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color("red")) // Now I use a color set
                .font(.footnote)
            NavigationView {
                Text("Hello")
                .navigationBarTitle(Text("Hi"), displayMode: .inline)
                .background(NavigationConfigurator { nc in
                    nc.navigationBar.barTintColor = UIColor(named: "red") // Now I use a color set
                })
            }
        }
    }
}

struct NavigationConfigurator: UIViewControllerRepresentable {
    var configure: (UINavigationController) -> Void = { _ in }

    func makeUIViewController(context: UIViewControllerRepresentableContext<NavigationConfigurator>) -> UIViewController {
        UIViewController()
    }
    func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationConfigurator>) {
        if let nc = uiViewController.navigationController {
            self.configure(nc)
        }
    }
}

Maybe this is helpful: https://www.morningswiftui.com/blog/customizing-navigation-bar-ios13 — koen, Nov 12 '19 at 16:32
Also, you are using both `background(Color("red"))` and `UIColor(named: "red")`. — koen, Nov 12 '19 at 20:06
I think that makes no difference because I use the same [color set](https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface/) — Mattis Schulte, Nov 12 '19 at 20:13

Mojtaba Hosseini · Accepted Answer · 2022-06-16T08:27:15.100

iOS 16

You can set any color directly on toolbar items like the navigation bar with the following modifier:

.toolbarBackground(.red, in: .navigationBar)

Demo

iOS 15 and below

The issue is with the UINavigationBar's backgroundImage. You should set it to an empty UIImage like:

struct ContentView: View {
    
    init() { 
        UINavigationBar.appearance().backgroundColor = .red // Or any other color
        UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    }
    
    var body: some View {
        ,,,
    }
}

score 1 · Answer 2 · answered Nov 12 '19 at 17:40

1

When you specify the displayMode: .inline parameter, the color underneath the navigation bar (in this case, white) gets blended into the nav bar's color, leaving you with this pinkish color. You will get full red if its a large title style.

This answer is a better way of setting the navigation bar color, and will work even with the .inline style.

Finally, note that Color.red is actually the same as UIColor.systemRed. If you use UIColor.red, you'll notice a difference in Dark Mode.

answered Nov 12 '19 at 17:40

John M.

8,892
4
31
42

Thanks for the answer. Unfortunately, it does not really work for me, but maybe I misunderstood something. I've also added a screenshot to the question to show what has changed with this solution. – Mattis Schulte Nov 12 '19 at 20:02

How can I change the background color of the navigation bar in SwiftUI?

2 Answers2

iOS 16

iOS 15 and below

Linked