Change color of Back button in navigation bar

Question

I am trying to change the color of the Settings button to white, but can't get it to change.

I've tried both of these:

navigationItem.leftBarButtonItem?.tintColor = UIColor.whiteColor()
navigationItem.backBarButtonItem?.tintColor = UIColor.whiteColor()

but no change, it still looks like this:

enter image description here

How do I make that button white?

It's already here, you can check the below link: https://stackoverflow.com/a/64445477/14437411 — Menaim, Oct 20 '20 at 13:16

score 330 · Answer 1 · edited Jan 22 '19 at 00:02

330

You can change the global tint color in your storyboard by clicking on an empty space on the board and select in the right toolbar "Show the file inspector", and you will see in the bottom of the toolbar the "Global Tint" option.

edited Jan 22 '19 at 00:02

pkamb

33,281
23
160
191

answered May 02 '15 at 10:43

Etgar

5,774
2
16
30

9

woah.. Nice find!. do you know how to do this programmatically? – Paul Lehn Dec 16 '15 at 14:00
14

Great find, but changing global tint to white (per the original question) will also change things like table view detail disclosure indicators to white, which would make them invisible in the table in question. – Mike Fischer May 13 '16 at 20:35
1

Adding on to Mike's issues: this control also makes all your text buttons this color and so you'll either have to set them to a color by hand (ie no default colors obviously) or just use a different method. – Allison Jul 03 '16 at 00:35
4

While this is a quick and easy fix, it leads to other problems if the color is white/matches the background. If you have text fields, it makes the cursor unnoticeable, which makes it look to the user as if they are not able to write on a text field because the cursor isn't visible. – Hedylove Feb 04 '17 at 05:58
1

This actually fixed an issue I was having with my Back Button not showing up when performing segue's within Navigation Controllers - it was because my global tint was transparent! Thanks for this, it helped identify the issue :) – J.C Mar 22 '17 at 13:14
6

@PaulLehn To do this programmatically, in `AppDelegate.swift > application(application:didFinishLaunchingWithOptions:)` you can write: `self.window!.tintColor = .yourColor` – emmics Jan 03 '19 at 13:19
Be aware though that this is impossible to do if your view controller is only a XIB and not part of a Storyboard. In that case, you'll have @deepak's answer and set it programmatically. – kakubei Apr 29 '20 at 13:31
Correct answer is actually down a few: https://stackoverflow.com/a/37959331/15026634 – Eric33187 Apr 12 '21 at 18:25
This worked, as soon as I removed the overridden code segment `self.navigationBarView.tintColor = UIColor(ciColor: Constant.DefaultThemeColor)` that has been implemented in main navigation controller – Rakshitha Muranga Rodrigo Jul 12 '22 at 21:11

score 247 · Answer 2 · edited Dec 23 '16 at 19:02

247

This code changes the arrow color

self.navigationController.navigationBar.tintColor = UIColor.whiteColor();

If this does not work, use the code below:

self.navigationBar.barStyle = UIBarStyle.Black
self.navigationBar.tintColor = UIColor.whiteColor()

Swift 3 Notes

UIColor.whiteColor() and similar have been simplified to UIColor.white

Also, many previously implicit optionals have been changed to explicit, so you might need:

self.navigationController?.navigationBar =

edited Dec 23 '16 at 19:02

David Berry

40,941
12
84
95

answered Feb 26 '15 at 04:06

Chamath Jeevan

5,072
1
24
27

8

`self.navigationController?.navigationBar.tintColor = UIColor.whiteColor()` worked for me (Swift 2.2) – Mike Fischer May 13 '16 at 20:39
self.navigationBar.barStyle = UIBarStyle.Black self.navigationBar.tintColor = UIColor.whiteColor() worked for me (Swift 3) – Ajay.km Nov 23 '16 at 11:33
1

Can you explain why to use UIBarStyle.Black? – emmics Mar 19 '17 at 15:23
Please update: self.navigationController?.navigationBar.tintColor = – mohonish Jun 02 '17 at 12:05
2

it only changes the arrow, back text still remains the same in Xcode 11 – jeff ayan Jul 24 '19 at 14:59

score 106 · Answer 3 · answered Jun 22 '16 at 05:33

106

Very easy to set up in the storyboard:

answered Jun 22 '16 at 05:33

AlessandroDP

1,477
1
10
19

Tiep Vu Van · Answer 4 · 2016-11-17T02:30:47.157

68

You should use this:

navigationController?.navigationBar.barTintColor = .purple
navigationController?.navigationBar.tintColor = .white

edited Nov 17 '16 at 02:30

answered Feb 26 '15 at 04:01

Tiep Vu Van

975
8
13

This made the button white, but made the background color much lighter. Do you know how to give the bar's background its full color again? – Brandon Evans Feb 26 '15 at 04:41
This is the correct answer. It will make the bar purple, by setting the barTintColor and the title / bar buttons white. – zirinisp Jul 05 '17 at 07:46

Deepak Tagadiya · Answer 5 · 2019-04-11T14:24:26.397

49

Swift

 override func viewDidLoad() {
     super.viewDidLoad()

 self.navigationController?.navigationBar.tintColor = UIColor.white
 }

edited Apr 11 '19 at 14:24

answered Jun 23 '17 at 11:10

Deepak Tagadiya

2,187
15
28

1

Use in swift 3. – Deepak Tagadiya Jul 19 '17 at 09:08
also tell me which swift version you can use? – Deepak Tagadiya Dec 14 '17 at 09:56
And which class/file/vc in write this code in project? – Deepak Tagadiya Dec 14 '17 at 10:01
At the beginning of function setCloseButton() which is called on viewWillAppear. – Jayprakash Dubey Dec 14 '17 at 10:03
write in NextViewController.swift file, also write in viewDidLoad(). – Deepak Tagadiya Dec 14 '17 at 10:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161185/discussion-between-deepak-tagadiya-and-jayprakash-dubey). – Deepak Tagadiya Dec 14 '17 at 10:10
You can change this color via the xCode interface or how do you call it.. So select your navigation controller and at your right select the Attribute selector (4th option) then go to the 3th section where it says Large Title Text Attribute and change the color over there, this did it for me. – Lemon Apr 12 '19 at 09:30

AiOsN · Answer 6 · 2022-01-31T13:45:25.933

31

Swift 5.5

Change complete app theme

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
     // Set for app
     UINavigationBar.appearance().tintColor = .white
     return true
}

Change specific controller

let navController = UINavigationController.init(rootViewController: yourViewController) 
navController.navigationBar.tintColor = .red

present(navController, animated: true, completion: nil)

edited Jan 31 '22 at 13:45

answered Sep 12 '18 at 08:04

AiOsN

2,305
2
23
29

it changes the color for all the application. What if I need to change it for particular screen/particular `UINavigationController`? – Vyachaslav Gerchicov Nov 23 '18 at 08:57
@VyachaslavGerchicov above answer is for complete app theme, if you want to change specific controller. Do something like this: let navController = UINavigationController.init(rootViewController: yourViewController) navController.navigationBar.tintColor = .red – AiOsN Nov 23 '18 at 10:01
If you are on iOS 13 you don't use didFinishLaunchingWithOptions anymore, it was moved to SceneDelegate. – JBarros35 Dec 10 '19 at 14:15

score 21 · Answer 7 · answered May 03 '15 at 19:04

You can use like this one. Place it inside AppDelegate.swift.

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // Override point for customization after application launch.

        UINavigationBar.appearance().translucent = false
        UINavigationBar.appearance().barTintColor = UIColor(rgba: "#2c8eb5")
        UINavigationBar.appearance().tintColor = UIColor.whiteColor()
        UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName:UIColor.whiteColor()]

        return true
    }

score 15 · Answer 8 · edited Apr 25 '17 at 09:29

15

In Swift3, To set the Back button to red.

self.navigationController?.navigationBar.tintColor = UIColor.red

edited Apr 25 '17 at 09:29

Joe

8,868
8
37
59

answered Jan 26 '17 at 14:56

Vincent

4,342
1
38
37

this will set the navigation bar, not the bar button item – ace_ventura Feb 28 '18 at 00:17
1

Yep, that was the question. – Vincent Feb 28 '18 at 06:32
"Change color of Back **button** in navigation bar" – ace_ventura Feb 28 '18 at 22:35
This was the only method that worked for me. Something seems broken with Apple's implementation right now... – Dave Y Apr 18 '20 at 21:11

score 14 · Answer 9 · answered Dec 27 '17 at 18:23

In Swift 4, you can take care of this issue using:

let navStyles = UINavigationBar.appearance()
// This will set the color of the text for the back buttons.
navStyles.tintColor = .white
// This will set the background color for navBar
navStyles.barTintColor = .black

score 14 · Answer 10 · answered Apr 08 '20 at 14:57

14

    self.navigationController?.navigationBar.tintColor = UIColor.black // to change the all text color in navigation bar or navigation 
    self.navigationController?.navigationBar.barTintColor = UIColor.white // change the navigation background color
    self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName:UIColor.black] // To change only navigation bar title text color

answered Apr 08 '20 at 14:57

Vaibhav Gaikwad

396
5
13

Works with Swift 5 – Ben May 04 '21 at 02:13

score 9 · Answer 11 · answered Feb 17 '17 at 22:00

9

Swift 3

The most upvoted answer is not correct for Swift 3.

The correct code to change color is:

self.navigationController?.navigationBar.tintColor = UIColor.white

If you want to change color, change UIColor.white above to the desired color

answered Feb 17 '17 at 22:00

Elon R.

131
1
4

This was the only method that worked for me. Something seems broken with Apple's implementation right now... – Dave Y Apr 18 '20 at 21:11

Jamie McDaniel · Answer 12 · 2018-03-23T18:19:39.753

All the answers setting UINavigationBar.appearance().tintColor conflict with Apple's documentation in UIAppearance.h.

Note for iOS7: On iOS7 the tintColor property has moved to UIView, and now has special inherited behavior described in UIView.h. This inherited behavior can conflict with the appearance proxy, and therefore tintColor is now disallowed with the appearance proxy.

In Xcode, you need to command-click on each property you want to use with appearance proxy to inspect the header file and make sure the property is annotated with UI_APPEARANCE_SELECTOR.

So the correct way to color the navigation bar purple and the title and buttons white throughout the app via the appearance proxy is:

UINavigationBar.appearance().isTranslucent = false
UINavigationBar.appearance().barTintColor = .purple
UINavigationBar.appearance().titleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.white]
UIBarButtonItem.appearance().tintColor = .white

Note that UIBarButtonItem is not a subclass of UIView but rather NSObject. So its tintColor property is not the inherited tintColor from UIView.

Unfortunately, UIBarButtonItem.tintColor is not annotated with UI_APPEARANCE_SELECTOR – but that seems to me a documentation bug. The response from Apple Engineering in this radar states it is supported.

UINavigationBar.appearance().largeTitleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white] //also — Guilherme, May 25 '20 at 15:27

score 7 · Answer 13 · edited Apr 20 '17 at 10:04

7

Use this code in AppDelegate class, inside of didFinishLaunchingWithOptions.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

UINavigationBar.appearance().tintColor = .white

}

edited Apr 20 '17 at 10:04

BartoszKP

34,786
15
102
130

answered Apr 20 '17 at 09:31

M.Nadeeshan

251
4
8

score 6 · Answer 14 · answered Feb 26 '15 at 05:55

6

self.navigationController?.navigationBar.tintColor = UIColor.redColor()

This snippet does the magic. Instead of the redColor, change it to as your wish.

answered Feb 26 '15 at 05:55

Suresh Kumar Durairaj

2,104
16
24

score 6 · Answer 15 · edited Jul 30 '21 at 15:23

6

If you tried many times but could not work, you may try :

UIBarButtonItem.appearance(whenContainedInInstancesOf: [UINavigationBar.self]).tintColor = .red

Actually, I tried many times, only found this way will work.

edited Jul 30 '21 at 15:23

dbc

104,963
20
228
340

answered Dec 13 '20 at 13:09

knight2016

539
6
12

1

You are a life savor, no other solution worked for me, thanks mate – Moeez Akram Dec 19 '21 at 11:01
Important to note that this code goes in the VC that is PREVIOUS to the one you are trying to change, not in the one you're trying to change. – NhlanhlaNkosi May 25 '23 at 22:20

Mudith Chathuranga Silva · Answer 16 · 2022-03-11T14:59:35.667

Swift 5 Updated

If you need to set Back button color globally, you could simply use:

UIBarButtonItem.appearance().tintColor = Asset.pureWhite.color

Then you do not need to set back button background color on each view controller. If you use this one you COULD NOT SET BACK BUTTON COLOR ON ANOTHER VIEW CONTROLLER

BUT

If you need to set Back button color on view controller or change on another view controller do not use above method. You could use:

let appearance = UINavigationBarAppearance()
appearance.titleTextAttributes = [.font:FontFamily.BatonTurbo.medium.font(size: 20),
                                  .foregroundColor: Asset.pureWhite.color] // Naviagtion Title attributes
appearance.backgroundColor = .red // Navigation bar background color

self.navigationItem.standardAppearance = appearance
self.navigationItem.scrollEdgeAppearance = appearance
self.navigationItem.compactAppearance = appearance

navigationController?.navigationBar.tintColor = .green // Back button color

score 4 · Answer 17 · answered Apr 08 '16 at 05:38

Lets try this code:

 func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.

    let navigationBarAppearace = UINavigationBar.appearance()
    navigationBarAppearace.tintColor = UIColor.whiteColor()  // Back buttons and such
    navigationBarAppearace.barTintColor = UIColor.purpleColor()  // Bar's background color
    navigationBarAppearace.titleTextAttributes = [NSForegroundColorAttributeName:UIColor.whiteColor()]  // Title's text color

    self.window?.backgroundColor = UIColor.whiteColor()
    return true
}

Thank you very much, sir – Arpit B Parekh Mar 20 '18 at 12:57 — Arpit B Parekh, Mar 20 '18 at 12:57

score 4 · Answer 18 · answered May 07 '16 at 19:58

4

in swift 2.0 use

self.navigationController!.navigationBar.tintColor = UIColor.whiteColor();

answered May 07 '16 at 19:58

Riccardo Caroli

341
1
3
12

score 4 · Answer 19 · answered Jul 07 '17 at 09:41

If you already have the back button in your "Settings" view controller and you want to change the back button color on the "Payment Information" view controller to something else, you can do it inside "Settings" view controller's prepare for segue like this:

override func prepare(for segue: UIStoryboardSegue, sender: Any?) { 
    if segue.identifier == "YourPaymentInformationSegue"
    {
        //Make the back button for "Payment Information" gray:
        self.navigationItem.backBarButtonItem?.tintColor = UIColor.gray               
    }
}

score 3 · Answer 20 · edited May 23 '17 at 12:26

Not sure why nobody has mentioned this...but I was doing exactly what you were doing in my viewDidLoad...and it wasn't working. Then I placed my code into viewWillAppear and it all worked.

The above solution is to change a single barbuttonItem. If you want to change the color for every navigationBar in your code then follow this answer.

Basically changing onto the class itself using appearance() is like making a global change on all instances of that view in your app. For more see here

score 2 · Answer 21 · answered Feb 26 '15 at 05:53

2

Add following code to didFinishLaunchingWithOptions function in AppDelegate.swift

var navigationBarAppearace = UINavigationBar.appearance()

navigationBarAppearace.tintColor = uicolorFromHex(0xffffff) // White color
navigationBarAppearace.barTintColor = uicolorFromHex(0x034517) // Green shade

// change navigation item title color
navigationBarAppearace.titleTextAttributes =[NSForegroundColorAttributeName:UIColor.whiteColor()]

answered Feb 26 '15 at 05:53

Jayprakash Dubey

35,723
18
170
177

1

This code gives me the following error: "Use of unresolved identifier 'uicolorFromHex'" Can anyone help me solve that? – jonathan3087 Jun 20 '17 at 04:44
probably an extension for UIColor. You can search stackoverflow how to create an extension. – KvdLingen Jul 10 '17 at 14:41

score 2 · Answer 22 · answered Feb 24 '16 at 05:50

For Swift 2.0, To change the Navigation-bar tint color, title text and back button tint color changed by using the following in AppDelegate.swift

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

  // Override point for customization after application launch.


    //Navigation bar tint color change

    UINavigationBar.appearance().barTintColor = UIColor(red: 42/255.0, green: 140/255.0, blue: 166/255.0, alpha: 0.5)

    //Back button tint color change

    UINavigationBar.appearance().barStyle = UIBarStyle.Default
    UINavigationBar.appearance().tintColor =  UIColor(red: 204/255.0, green: 255/255.0, blue: 204/255.0, alpha: 1)

    //Navigation Menu font tint color change

    UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor(red: 204/255.0, green: 255/255.0, blue: 204/255.0, alpha: 1), NSFontAttributeName: UIFont(name: "OpenSans-Bold", size: 25)!]//UIColor(red: 42/255.0, green: 140/255.0, blue: 166/255.0, alpha: 1.0)

    UIApplication.sharedApplication().statusBarStyle = UIStatusBarStyle.LightContent


    return true
}

Muhammad Ahmed Baig · Answer 23 · 2016-06-03T12:14:23.360

2

You have one choice hide your back button and make it with your self. Then set its color.

I did that:

self.navigationItem.setHidesBackButton(true, animated: true)
let backbtn = UIBarButtonItem(title: "Back", style:UIBarButtonItemStyle.Plain, target: self, action: "backTapped:")
self.navigationItem.leftBarButtonItem = backbtn
self.navigationItem.leftBarButtonItem?.tintColor = UIColor.grayColor()

edited Jun 03 '16 at 12:14

answered Apr 13 '16 at 07:03

Muhammad Ahmed Baig

726
14
23

2

The question was specifically around styling the left navigation item and this is the closest to answering the question directly. – craft Jan 28 '20 at 13:48

score 2 · Answer 24 · answered May 31 '16 at 03:10

2

self.navigationController.navigationBar.tintColor = [UIColor whiteColor];

This works for me, iOS 9.0+

answered May 31 '16 at 03:10

yuchen

408
3
9

score 1 · Answer 25 · answered Jun 05 '19 at 13:00

I prefer custom NavigationController rather than setting global ui, or put in ViewController.

Here is my solution


class AppNavigationController : UINavigationController {

  override func viewDidLoad() {
    super.viewDidLoad()
    self.delegate = self
  }

  override func viewWillAppear(_ animated: Bool) {

  }

}
extension AppNavigationController : UINavigationControllerDelegate {

  func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {
    let backButtonItem = UIBarButtonItem(
      title: "   ",
      style: UIBarButtonItem.Style.plain,
      target: nil,
      action: nil)
    backButtonItem.tintColor = UIColor.gray
    viewController.navigationItem.backBarButtonItem = backButtonItem
  }

  func navigationController(_ navigationController: UINavigationController, didShow viewController: UIViewController, animated: Bool) {

  }

}

Also you don't need to mess with Apple Api like EKEventEditViewController,PickerViewController and so on if you use global settings ui like UIBarButtonItem.appearance().tintColor = .white

score 1 · Answer 26 · answered Feb 17 '21 at 08:06

1

I'm using this in swift 5 and worked for me

navigationItem.backBarButtonItem?.tintColor = UIColor(named: "uberRed")

answered Feb 17 '21 at 08:06

Chathuranga

316
4
12

score 1 · Answer 27 · answered May 04 '22 at 04:55

1

For some reason it isn't working for me programmatically. However setting it in the storyboard works every time.

answered May 04 '22 at 04:55

ScottyBlades

12,189
5
77
85

score 1 · Answer 28 · answered May 14 '23 at 03:51

In SwiftUI, do the following:

Define a BackButton struct:

struct BackButton: View {
    @Environment(\.presentationMode) var presentationMode
    var body: some View {
        Button(action: {
            presentationMode.wrappedValue.dismiss()
        }) {
            HStack {
                Image(systemName: "chevron.left")
                    .foregroundColor(.white)
                Text("Back")
                    .foregroundColor(.white)
            }
        }
    }
}

In the second view, use it as follows:

struct SecondView: View {
    var body: some View {
        VStack {
            Text("Second View")
        }
        .navigationBarTitle("Second View", displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                BackButton()
            }
        }
    }
}

This solution does work, but it's worth noting that using `navigationBarBackButtonHidden(true)` also disables the functionality of swiping to go back to the previous view. — shauneba, Jun 30 '23 at 09:34

score 0 · Answer 29 · answered Apr 23 '18 at 05:36

0

It will be solved with this line in -(void)viewDidLoad:

self.navigationItem.backBarButtonItem.tintColor = UIColor.whiteColor;

answered Apr 23 '18 at 05:36

Ertaky

11
1

`(lldb) p self.navigationItem.backBarButtonItem (UIBarButtonItem *) $9 = nil (lldb) ` – dengApro Nov 02 '18 at 09:22

score 0 · Answer 30 · answered Mar 27 '19 at 07:47

0

You should add this line

 self.navigationController?.navigationBar.topItem?.backBarButtonItem?.tintColor = .black

answered Mar 27 '19 at 07:47

Monir Khlaf

567
7
5

score 0 · Answer 31 · answered Sep 24 '20 at 18:16

0

Swift 5.3:

UINavigationBar.appearance().backIndicatorImage = UIImage(named: "custom-back-image")
UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(named: "custom-back-image")

answered Sep 24 '20 at 18:16

Makwan Barzan

353
1
6
12

Change color of Back button in navigation bar

31 Answers31

Swift 5.5

Linked