How to change the navigation bar title font color in SwiftUI

The current version of SwiftUI doesn’t yet natively support all types of customization. For example, to change the font color of the navigation bar title, we must use UIKit.

Let’s see how we can implement this customization. In this example, we’ll open our MyNewApp.swift file in Xcode.

and we are going to insert the following method:

init() {
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.systemRed, .font: UIFont(name: "ArialRoundedMTBold", size: 35)!]
        navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.systemRed, .font: UIFont(name: "ArialRoundedMTBold", size: 20)!]
        navBarAppearance.backgroundColor = .clear
        navBarAppearance.backgroundEffect = .none
        navBarAppearance.shadowColor = .clear
        
        UINavigationBar.appearance().standardAppearance = navBarAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
        UINavigationBar.appearance().compactAppearance = navBarAppearance
    }

With this init() method, the app will run the customization code upon startup. To customize the navigation bar font and color, we create a UINavigationBarAppearance instance and set the font and background color of our choice. Once the appearance object is configured, we assign it to the standardAppearance, compactAppearance, and scrollEdgeAppearance properties of UINavigation. This is how you can customize a navigation bar in your SwiftUI projects.

The result in Xcode with the navigation bar font color changed would be as follows:

If you have any questions about this article, please contact me and I’ll be happy to help 🙂 You can contact me on my X profile or on my Instagram profile.