How to change color of back button on NavigationView

user_1998220 0
Viewed 17633

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()
        }
    }
}
swiftui back-button
9 Answers

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()
}
user_37767820

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

user_41890370

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()
}
user_43433280

Add .accentColor modifier to NavigationView like shown below

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

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)
user_107751710

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)
user_43695330

This worked for me:

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

.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())
                    }
                })
user_112373050

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

user_7256280
Related