DEV Community

Cover image for [SwiftUI] How to change Navigation Bar background color with custom font?
Steven J. Selcuk
Steven J. Selcuk

Posted on

[SwiftUI] How to change Navigation Bar background color with custom font?

Prologue

Hi there,
I have been planning to write here regularly for a long time (since 2018) 😄 I'm a lazy ass but it's time to do something different outside my comfort zone. Maybe starting with easy stuff would help me gain this habit. Crossed fingers and here we go.

Example Navigation Bar

Q: How to change Navigation Bar background color with custom font?

A: In your SwiftUI view's initializer, add these lines

// Create a UINavigationBarAppearance object
     let appearance = UINavigationBarAppearance()
// Clear default background color
     appearance.shadowColor = .clear
// Change with your awesome color
     appearance.backgroundColor = UIColor(named: "TheColor")

// Add your font 
appearance.largeTitleTextAttributes = [
            .font: UIFont(name: "TheFont", size: 32)!,
        ]
        appearance.titleTextAttributes = [
            .font: UIFont(name: "TheFont", size: 20)!,
        ]

// And use your config object
UINavigationBar.appearance().scrollEdgeAppearance = appearance
        UINavigationBar.appearance().standardAppearance = appearance

Enter fullscreen mode Exit fullscreen mode

Discussion (0)