SwiftUI update navigation bar title color SwiftUI update navigation bar title color ios ios

SwiftUI update navigation bar title color


It is not necessary to use .appearance() to do this globally.

Although SwiftUI does not expose navigation styling directly, you can work around that by using UIViewControllerRepresentable. Since SwiftUI is using a regular UINavigationController behind the scenes, the view controller will still have a valid .navigationController property.

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)        }    }}

And to use it

struct ContentView: View {    var body: some View {        NavigationView {            ScrollView {                Text("Don't use .appearance()!")            }            .navigationBarTitle("Try it!", displayMode: .inline)            .background(NavigationConfigurator { nc in                nc.navigationBar.barTintColor = .blue                nc.navigationBar.titleTextAttributes = [.foregroundColor : UIColor.white]            })        }    .navigationViewStyle(StackNavigationViewStyle())    }}

Modified navigation bar


In SwiftUI, you can not change the navigationTitleColor directly. You have to change UINavigation's appearance in init() like this,

struct YourView: View {    init() {        //Use this if NavigationBarTitle is with Large Font        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.red]        //Use this if NavigationBarTitle is with displayMode = .inline        UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.red]    }    var body: some View {        NavigationView {            List{                ForEach(0..<15) { item in                    HStack {                        Text("Apple")                            .font(.headline)                            .fontWeight(.medium)                            .color(.orange)                            .lineLimit(1)                            .multilineTextAlignment(.center)                            .padding(.leading)                            .frame(width: 125, height: nil)                        Text("Apple Infinite Loop. Address: One Infinite Loop Cupertino, CA 95014 (408) 606-5775 ")                            .font(.subheadline)                            .fontWeight(.regular)                            .multilineTextAlignment(.leading)                            .lineLimit(nil)                    }                }            }            .navigationBarTitle(Text("TEST")).navigationBarHidden(false)            //.navigationBarTitle (Text("TEST"), displayMode: .inline)        }    }}

I hope it will work. Thanks!!


In iOS 14, SwiftUI has a way to customize a navigation bar with the new toolbar modifier.

We need to set ToolbarItem of placement type .principal to a new toolbar modifier. You can even set an image and much more.

NavigationView {    Text("My View!")        .navigationBarTitleDisplayMode(.inline)        .toolbar {            ToolbarItem(placement: .principal) {                HStack {                    Image(systemName: "sun.min.fill")                    Text("Title")                        .font(.headline)                        .foregroundColor(.orange)                }            }        }}