Change the navigation bar color

Question

I am learning swiftui and i write very simple list like this.

NavigationView {

    List {
        Toggle(isOn: $isFemale) {
            Text("Voice: \(self.isFemale == true ? "Female":"Male")").font(.system(size: 17)).bold()
            }.padding(4)

        NavigationButton(destination: LanguagePage()) {
            VStack(alignment: .leading) {
                Text("Change Language").font(.system(size: 17)).bold().padding(4)
                Text("English - English").font(.system(size: 17)).font(.system(.body)).padding(4)
            }
        }


        .navigationBarTitle(Text("Settings"), displayMode: .large)}

How can I change navigation bar colour? Currently, it is translucent. How can I change to opaque?

Someone has already asked this question. https://stackoverflow.com/questions/56505528/swiftui-update-navigation-bar-title-color Till this moment there is no way to update navigationBar Title Color in SwiftUI. — Md Shafiul Islam, Jun 27 '19 at 05:13
oh i am asking about bar color. it can be done by either color or custom view if necessary. just that i don't know how to do in swiftui haha — Khant Thu Linn, Jun 27 '19 at 05:16

score 2 · Answer 1 · answered Jul 31 '19 at 17:52

Using XCode 11.0 beta 5 (11M382q), I got it working with following:

struct TableWithNavTitle: View {

    var body: some View {
        // For navigation bar background color
        UINavigationBar.appearance().backgroundColor = .red

        return NavigationView {
            List(0..<5) { item in
                NavigationLink("\(item)", destination: Text("\(item)"))
            }.navigationBarTitle("Title")
        }
    }
}

score 1 · Accepted Answer · edited Oct 11 '19 at 10:32

You can use the Appearance APIs to change to navigation bar title and background colors


init() { // for navigation bar title color
        UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.red]
// For navigation bar background color 
UINavigationBar.appearance().backgroundColor = .green
   }     
NavigationView {

    List {
        Toggle(isOn: $isFemale) {
            Text("Voice: \(self.isFemale == true ? "Female":"Male")").font(.system(size: 17)).bold()
            }.padding(4)

        NavigationLink(destination: LanguagePage()) {
            VStack(alignment: .leading) {
                Text("Change Language").font(.system(size: 17)).bold().padding(4)
                Text("English - English").font(.system(size: 17)).font(.system(.body)).padding(4)
            }
        }
        .navigationBarTitle(Text("Settings"), displayMode: .large)}

Change the navigation bar color

2 Answers2