CODEWITHSUNDEEP
xcodecolorsnavigationswiftui
Mehdi
Mehdi

Reputation: 1352

How to turn off NavigationLink overlay color in SwiftUI?

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

Upvotes: 48

Views: 26856

Answers (6)

Arnaud
Arnaud

Reputation: 17737

Use .tint(.primary)on the label

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

The other solutions have drawbacks:

.foregroundColor(.black) // requires you to handle `colorScheme`
.buttonStyle(PlainButtonStyle()) // disables feedback on visionOS
.accentColor(Color.black) // needs to be applied on NavigationLink & impacts the destination

Upvotes: 0

FBC
FBC

Reputation: 1132

It worked for me to set the foregroundColor:

.foregroundColor(.black)

Upvotes: 0

Andreas Stokidis
Andreas Stokidis

Reputation: 402

You change colour with accentColor modifier

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

Upvotes: 2

FRIDDAY
FRIDDAY

Reputation: 4159

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

Upvotes: 98

Imran Sefat
Imran Sefat

Reputation: 773

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

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

Upvotes: 24

kontiki
kontiki

Reputation: 40499

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.

Upvotes: 12

Related Questions