How to change color of back button on NavigationView

Question

When you click on the button it takes you to a new view and puts a back button in the top left. I can't figure out what property controls the color of the back button. I tried adding an accentColor and foregroundColor but they only edit the items inside the view.

var body: some View {
    NavigationView {
        NavigationLink(destination: ResetPasswordView()) {
            Text("Reset Password")
            .foregroundColor(Color(red: 0, green: 116 / 255, blue: 217 / 255))
            .padding()
        }
    }
}

Answer 1

You can use the accentColor property on the NavigationView to set the back button color, like in this example:

var body: some View {
    NavigationView {
        List(1..<13) { item in
            NavigationLink(destination: Text("\(item) x 8 = \(item*8)")) {
                Text(String(item))
            }
        }.navigationBarTitle("Table of 8")
    }.accentColor(.black) // <- note that it's added here and not on the List like navigationBarTitle()
}

Answer 2

I was trying to do the same for a while, and do not think there is SwiftUI solution yet. One of things that will get work done though (if it works for your use case) is UIKit's appearance:

UINavigationBar.appearance().tintColor = .black

Answer 3

I doubt this is the right way to do it, but I got it to work by modifying the SceneDelegate.swift to set the window tint color.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

    // Use a UIHostingController as window root view controller
    let window = UIWindow(frame: UIScreen.main.bounds)
    window.rootViewController = UIHostingController(rootView: ContentView())
    window.tintColor = .green // set the colour of the back navigation text
    self.window = window
    window.makeKeyAndVisible()
}

Answer 4

Add .accentColor modifier to NavigationView like shown below

NavigationView {
    Text("Hello World")
      .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button("Close") { }
                    }
            }
 }
 .accentColor(.themeColor)

Answer 5

If you are using XCode 12, consider setting AccentColor in Assets.xcassets. XCode will use this color for all navigation back buttons in the app.

Note that this will also affect other UI elements. One of them is button. You can always overide this using accentColor modifier:

Button("Button With Different Accent Color") { 
   // do something useful
}
.accentColor(.red)

Answer 6

Asset Catalog Solution

Add AccentColor set in the Asset Catalog (Assets.xcassets). Xcode applies the color you specify in this color set as your app’s accent color.

Short Solution

After adding the Accent Color to your Asset Catalog, your Navigation Bar back buttons will turn to that color. That's all you need it.

More Details

If your app doesn’t have an AccentColor color set, create a color set manually via the steps listed below:

1. In the Project navigator, select an asset catalog.
2. Click the Add button (+) at the bottom of the outline view.
3. In the pop-up menu, choose Color Set. A new color set appears in the outline view and opens in the detail area.
4. Double-click the color set name in the outline view to rename the color set with a descriptive name, and press the Return key.
5. In Build Settings, find the build setting for “Global Accent Color Name”. Double-click the build setting, type in the name of your accent color set, and press Return.

Access the accent color from your code

By default, your accent color applies to all views and controls in your app that use a tint color, unless you override the color for a specific subset of the view hierarchy. However, you might want to incorporate the accent color into other parts of your user interface that don’t rely on a tint color, like static text elements. To use the accent color value from an asset catalog in code, load the color like this:

SwiftUI

Text("Accent Color")
    .foregroundStyle(Color.accentColor)

UIKit

label.textColor = UIColor.tintColor

What is Accent Color?

An accent color, or tint color, is a broad theme color that applies to views and controls in your app. Use an accent color to quickly create a unifying color scheme for your app. You can set an accent for your app by specifying an accent color in your asset catalog.

for more information regarding the topic check the documentation.

Answer 7

Hello maybe it's to late, but based on previous answers I made view modifier which allows you to change color or add text. This approach will avoid you to write boilerplate code everywhere you need back button.

import Foundation
import SwiftUI

struct NavigationBackButton: ViewModifier {

    @Environment(\.presentationMode) var presentationMode
    var color: UIColor
    var text: String?

    func body(content: Content) -> some View {
        return content
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(
                leading: Button(action: {  presentationMode.wrappedValue.dismiss() }, label: {
                    HStack(spacing: 2) {
                        Image(systemName: "chevron.backward")
                            .foregroundColor(Color(color))

                        if let text = text {
                            Text(text)
                                .foregroundColor(Color(color))
                        }
                    }
                })
            )
    }
}

extension View {
    func navigationBackButton(color: UIColor, text: String? = nil) -> some View {
        modifier(NavigationBackButton(color: color, text: text))
    }
}

And usage is pretty straightforward just use this modifier on your destination view of navigation link.

Back Button with text:

.navigationBackButton(color: .white, text: "Back")

Back Button without text:

.navigationBackButton(color: .white)

Answer 8

This worked for me:

let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.backButtonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.white]

Answer 9

In iOS 16 Apple added a new workaround, go to Assets.xcassets add new color set name "AccentColor" if not exist. And set it's values. iOS wil pick color for background button from here Sample Picture.

Answer 10

In iOS 16, .accentColor is marked as deprecated. Use .tint instead.

NavigationStack {
        List {
              NavigationLink("Action_1") {
                  Action_1_View()
              }
              NavigationLink("Action_2") {
                  Action_2_View()
              }
        }
  }
  .tint(.gray)

Answer 11

.navigationBarBackButtonHidden(true)
        .navigationBarItems(leading:
                Button(action: {presentation.wrappedValue.dismiss()}, label: {
                    HStack {
                    Image(systemName: "chevron.backward")
                        .foregroundColor(Color(UIColor.darkGray))
                    Text(username)
                        .foregroundColor(Color(UIColor.darkGray))
                        .font(UIHelper.largeSize())
                    }
                })

Answer 12

You could try setting the foregroundColor or the accentColor to the NavigationView (after your second to last closing bracket)