SwiftUI Navigation Bar Colour

Question

I am trying to build a master/detail type sample application and I'm struggling to get the NavigationBar UI to work correctly in my detail view. The code for the view I am working on is as follows:

struct JobDetailView : View {

    var jobDetails: JobDetails

    var body: some View {

            Form {

                Section(header: Text("General")) {
                    HStack {
                        Text("Job Name")
                        Spacer()
                        Text(jobDetails.jobName)
                            .multilineTextAlignment(.trailing)
                    }

                    HStack {
                        Text("Hourly Rate")
                        Spacer()
                        Text(TextFormatters().currencyString(amount: jobDetails.hourlyRateBasic!))
                            .multilineTextAlignment(.trailing)
                    }
                }

            }   .padding(.top)
                .navigationBarTitle(Text(jobDetails.jobName))
    }
}

The reason for the .padding(.top) is to stop the Form overlapping the navigation bar when scrolling upwards.

The white background on the navigation bar portion my issue (first image), I should expect it to be in keeping with the overall style of the UI, what I expect to happen is shown in the second image.

I have tried to add foreground/background colours and Views to change this colour, but to no avail. I'm also reticent of forcing a colour for the NagivationBar, as this will require further configuration for use with dark mode.

Current view when running application.

Expected view.

Check out this solution: https://stackoverflow.com/a/56581462/10200990 — sfung3, Aug 05 '19 at 21:00

backslash-f · Accepted Answer · 2019-08-06T07:04:12.057

There's no available (SwiftUI) API for doing that (yet) (beta 5).

But we could use UINavigationBar.appearance(), as in:

UINavigationBar.appearance().backgroundColor = .clear

Full Code

import SwiftUI

struct JobDetailView: View {

    init() {
        UINavigationBar.appearance().backgroundColor = .clear
    }

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("General")) {
                    HStack {
                        Text("Job Name")
                        Spacer()
                        Text("Scientist")
                            .multilineTextAlignment(.trailing)
                    }
                    HStack {
                        Text("Hourly Rate")
                        Spacer()
                        Text("$ 1.00")
                            .multilineTextAlignment(.trailing)
                    }
                }

            }
            .navigationBarTitle("Scientist")
            .navigationBarHidden(false)
        }
    }
}

#if DEBUG
struct JobDetailView_Previews: PreviewProvider {
    static var previews: some View {
        JobDetailView()
    }
}
#endif

Result

Dark Mode Result

Did not work for me when I added a background to the View inside NavigationView. — iSpain17, Jan 16 '20 at 20:11
This works but it changes it for the entire app. @iSpain17 make sure you put it in the first view that loads. — FontFamily, Nov 19 '20 at 17:26
Is there any way to change the background in other part of swiftUi view instead of init() — MrinmoyMk, Jul 27 '21 at 22:30

score 2 · Answer 2 · answered Jun 16 '22 at 13:05

2

_{You don't need to change anything for your issue now (since it is the default behavior of SwiftUI). But about the title of your question:}

From 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:

.toolbarBackground(.yellow, in: .navigationBar)

Demo

answered Jun 16 '22 at 13:05

Mojtaba Hosseini

95,414
31
268
278

Would you be willing to add a code sample on how to use this? – meaning-matters Nov 17 '22 at 17:33

SwiftUI Navigation Bar Colour

2 Answers2

From iOS 16