0

Can't change navigation bar background color. I've tried setting colors to navigationController?.navigationBar.backgroundColor and navigationController?.navigationBar.barTintColor, such as UIColor.red in the following example, but a white UIImage appears above the navigation bar color in the view hierarchy, as shown in this image: https://imguh.com/image/CBXaj

Also tried making navigation bar translucent and opaque, to no effect. I can change the button colors and customize other elements, but not change the background color of the bar. Appreciate any help.

georgebp
  • 193
  • 3
  • 17
  • You need property `backgroundColor` of `UINavigationBarAppearance` – Cy-4AH Jan 24 '22 at 13:20
  • tried setting that too, like this UINavigationBar.appearance().backgroundColor = .green. it has no effect, the green doesn't appear in the view hierarchy – georgebp Jan 24 '22 at 13:50
  • No it's not `UINavigationBarApperance`, you need set it in `UINavigationBar.standardAppearance` and `UINavigationBar.scrollEdgeAppearance` – Cy-4AH Jan 24 '22 at 13:52
  • tried setting UINavigationBar.appearance().standardAppearance.backgroundColor = UIColor.brown and UINavigationBar.appearance().scrollEdgeAppearance?.backgroundColor = UIColor.brown but had no effect – georgebp Jan 24 '22 at 14:07
  • Or that: https://stackoverflow.com/a/69135729/1934750? – Cy-4AH Jan 24 '22 at 15:01
  • you should not use image links as they can break with time – raquelhortab Jan 31 '23 at 10:08

1 Answers1

12

The following code should do the trick for you:

Background Colour

// This will change the navigation bar background color
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = UIColor.green // your colour here

navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance

Place this inside the viewDidLoad() function within your ViewController

Title Colour

If you want to also change the navigation bar title appearance, then apply the following code before you set the standardAppearance and scrollEdgeAppearance:

// This will alter the navigation bar title appearance
let titleAttribute = [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 25, weight: .bold), NSAttributedString.Key.foregroundColor: UIColor.purple] //alter to fit your needs
appearance.titleTextAttributes = titleAttribute

Entire code:

// This will change the navigation bar background color
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = UIColor.green
        
// This will alter the navigation bar title appearance
let titleAttribute = [NSAttributedString.Key.font:  UIFont.systemFont(ofSize: 25, weight: .bold), NSAttributedString.Key.foregroundColor: UIColor.purple] //alter to fit your needs
appearance.titleTextAttributes = titleAttribute

navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance

Image Example

Euan Traynor
  • 420
  • 2
  • 11