Change the color of navigationTitle inside NavigationStack

Question

I would like to change the color of navigationTitle inside NavigationStack.

struct InterestView: View {
    var body: some View {
        NavigationStack {
            VStack {
                
            }
            .navigationTitle("interest".uppercased())
            .toolbar {
                ToolbarItemGroup(placement: .navigationBarTrailing) {
                    Button {
                        print("Image tapped!")
                    } label: {
                        Text("add".uppercased())
                            .foregroundColor(Color.primaryColor)
                            .font(.headline)
                    }
                }
            }
        }
    }
}

I could not find any modifier to change it.

If this is for iOS then [this question](https://stackoverflow.com/questions/56505528/swiftui-update-navigation-bar-title-color) might be of interest. — Joakim Danielson, Feb 16 '23 at 21:18

sanji_san · Answer 1 · 2023-02-17T08:18:35.027

In SwiftUI, you cannot change title color with a simple modifier. You need to change UINavigation Appearance but this will effect globally.

Alternative solution:

You are already using toolbar, so adding title to toolbar is easy as follow. I hope this solves your problem.

struct InterestView: View {
  var body: some View {
     NavigationStack {
        VStack {
            
        }
        .toolbar {
            ToolbarItemGroup(placement: .principal) {
                Text("interest".uppercased())
                    .foregroundColor(.red)
            }
            ToolbarItemGroup(placement: .navigationBarTrailing) {
                Button {
                    print("Image tapped!")
                } label: {
                    Text("add".uppercased())
                        .foregroundColor(Color.red)
                        .font(.headline)
                }
            }
        }
     }
  }
}

Change the color of navigationTitle inside NavigationStack

1 Answers1