How to turn off NavigationLink overlay color in SwiftUI?

Question

I've designed a "CardView" using ZStack in which the background layer is a gradient and the foreground layer is a PNG(or PDF) image(the image is a yellow path(like a circle) drawn in Adobe Illustrator).

When I put the ZStack inside a NavigationLink the gradient remains unchanged and fine, but the image get a bluish overlay color (like default color of a button) therefore there is no more yellow path(the path is bluish).

How can get the original color of foreground PNG(or PDF) image?

import SwiftUI

struct MyCardView : View {
    let cRadius : CGFloat = 35
    let cHeight : CGFloat = 220
    var body: some View {
        NavigationView {
            NavigationLink(destination: Text("Hello")) {
                ZStack {
                    RoundedRectangle(cornerRadius: cRadius)
                        .foregroundColor(.white)
                        .opacity(0)
                        .background(LinearGradient(gradient: Gradient(colors: [Color(red: 109/255, green: 58/255, blue: 242/255),Color(red: 57/255, green: 23/255, blue: 189/255)]), startPoint: .leading, endPoint: .trailing), cornerRadius: 0)
                        .cornerRadius(cRadius)
                        .frame(height: cHeight)
                        .padding()
                    Image("someColoredPathPNGimage")
                }
            }
        }
    }
}

Hopkins

Answer 1

The navigationLink acts like Button and it gets the default button style with blue color.

Using .renderingMode(.original) only works on Image views. What if you decide to load your image using some libs or pods?!

It is better to change the default button style to plain using the modifier below:

NavigationLink(destination: Text("Hello")) {
    ZStack {
        RoundedRectangle(cornerRadius: cRadius)
            .foregroundColor(.white)
            .opacity(0)
            .background(LinearGradient(gradient: Gradient(colors: [Color(red: 109/255, green: 58/255, blue: 242/255),Color(red: 57/255, green: 23/255, blue: 189/255)]), startPoint: .leading, endPoint: .trailing), cornerRadius: 0)
            .cornerRadius(cRadius)
            .frame(height: cHeight)
            .padding()
        Image("someColoredPathPNGimage")
    }
}
.buttonStyle(PlainButtonStyle())  // Here is what you need

Concur

Thank you for this tip ! I did not know how to build a custom navigation button (using text and image). You made my day. – Ushijima

Thank you very much! This made my day also!!! – Tomaso

Answer 2

Add .buttonStyle(PlainButtonStyle()) to the NavigationLink(....)

NavigationLink(
   destination: Text("Destination"),
   label: {
       Text("Click Here!")
   }
)
.buttonStyle(PlainButtonStyle())

Rote

Working fine on iOS 15+ also – Wicket

did not work for me on iOS 15+ :( – Hymettus

Answer 3

Try:

Image("someColoredPathPNGimage").renderingMode(.original)

If your problems continue, consider uploading a screenshot so we get an idea of what you mean. If you can include the image you are using, even better, so we can replicate.

Pemphigus

Answer 4

You change colour with accentColor modifier

 NavigationLink(
   destination: Text("Destination"),
   label: {
       Text("Click Here!")
   }
)
.accentColor(Color.black)

Clericals

This is the right answer iOS 15.6+ – Janus

Answer 5

It worked for me to set the foregroundColor:

.foregroundColor(.black)

Vassar