CODEWITHSUNDEEP
swiftuiback-button
Michael St Clair
Michael St Clair

Reputation: 6615

How to change color of back button on NavigationView

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

Upvotes: 59

Views: 47008

Answers (12)

turingtested
turingtested

Reputation: 7154

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(.orange) // <- note that it's added here and not on the List like navigationBarTitle()
}

It works the same for NavigationStack

Upvotes: 139

AechoLiu
AechoLiu

Reputation: 18368

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)

NOTE:

That deprecated warning appears when iOS deployment target > 16 enter image description here

Upvotes: 4

Asad Mehmood
Asad Mehmood

Reputation: 359

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.

Upvotes: 1

MGY
MGY

Reputation: 8463

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.

accent color

for more information regarding the topic check the documentation.

Upvotes: 16

Vadims Krutovs
Vadims Krutovs

Reputation: 217

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)

Upvotes: 6

Ella Gogo
Ella Gogo

Reputation: 1261

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)

Upvotes: 6

Pankaj Wadhwa
Pankaj Wadhwa

Reputation: 3063

Add .accentColor modifier to NavigationView like shown below

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

Upvotes: 8

Behzad Moulodi
Behzad Moulodi

Reputation: 157


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

Upvotes: -1

Starls
Starls

Reputation: 63

This worked for me:

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

Upvotes: 5

Predrag Samardzic
Predrag Samardzic

Reputation: 3009

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

Upvotes: 12

Ty.N
Ty.N

Reputation: 83

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

Upvotes: 8

EmilioPelaez
EmilioPelaez

Reputation: 19884

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

Upvotes: -2

Related Questions