How can I prevent that all subviews are colored blue when embedding into a NavigationLink?

Question

I have a rather complex view which I want to embed into a NavigationLink but if I do this all text colors turn blue. If the view would just be an image I would use the modifier renderingMode(.original). But my view consists of multiple stacks, images, icons and texts. Is there some why to prevent the coloring without applying the modifier foregroundColor with the correct color to each view individually?

That's the view

And that's the code:

NavigationLink(destination: BlogView(of: blog)) {
    VStack(spacing: 0) {
        
        HStack {
        URLImage(URL(string: blog.avatarURL)!, content: {
            $0.image
                .resizable()
                .aspectRatio(contentMode: .fill)
                .clipShape(Circle())
        })
            .frame(width: 35, height: 35)
        
        Text(blog.username)
            .font(.custom(R.font.quicksandRegular, size: 16))
        
        Spacer()
        
        Image(systemName: "ellipsis")
            .imageScale(.small)
            .foregroundColor(.darkGray)
        }
        .padding(.vertical, 10)
        .padding(.trailing, 5)
        
        HStack(alignment: .top) {
            VStack(alignment: .leading, spacing: 5) {
                Text(blog.title)
                    .font(.custom(R.font.quicksandRegular, size: 17))
                    .fontWeight(.medium)
                    .foregroundColor(.lightGreen)
            
                Text(blog.text)
                    .font(.custom(R.font.quicksandRegular, size: 14))
                    .lineLimit(3)
            }
        
            Spacer()
        
            URLImage(URL(string: blog.mediaURL)!, content: {
                $0.image
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .clipShape(RoundedRectangle(cornerRadius: 5))
            })
                .frame(width: 120)
                .clipped()
        }
        
        HStack(spacing: 10) {
            Image(systemName: "flame")
                .foregroundColor(.gray)
            Text("\(blog.likeCount)")
        
            Spacer()
        
            Image(systemName: "text.bubble")
                .foregroundColor(.gray)
            Text("\(blog.commentCount)")
        
            Spacer()
        
            Image(systemName: "arrowshape.turn.up.right")
                .foregroundColor(.gray)
            Text("Share")
        }
        .font(.custom(R.font.quicksandRegular, size: 13))
    }
    .padding(.horizontal, 10)
    .background(Color.white)
    .cornerRadius(10)
}

Sure, but would you add your code? – Asperi Jul 02 '20 at 15:10 — Asperi, Jul 02 '20 at 15:10
@Asperi yep, I updated my question – the.blaggy Jul 02 '20 at 15:45 — the.blaggy, Jul 02 '20 at 15:45

score 2 · Accepted Answer · answered Jul 02 '20 at 15:33

2

Either use .foregroundColor(.primary) on your Text or check the NavigationLink documentation:

A button that triggers a navigation presentation when pressed.

Which leads us to:

NavigationLink(destination: Text("Destination")) {
    CardView()
}
.buttonStyle(PlainButtonStyle())

answered Jul 02 '20 at 15:33

zrzka

20,249
5
47
73

I already thought about the `.foregroundColor(.primary)` but then I would have to use it every time and I looked for something more general. The `.buttonStyle(PlainButtonStyle())` modifier is the perfect solution I think. Next time I will check the documentation first. Thank you! – the.blaggy Jul 02 '20 at 15:48
What do you mean with _every time_? On every `Text`? If yes, no need to do this, you can set `.foregroundColor(.primary)` on your top level `VStack`. Same way as you set the `.backgroundColor(.white)`. – zrzka Jul 02 '20 at 16:00
Styling documentation says: _Indicate how to style the text, controls, and other content contained in a view._ The crucial part here is _contained in a view_. In other words, applied to all subviews. – zrzka Jul 02 '20 at 16:03

How can I prevent that all subviews are colored blue when embedding into a NavigationLink?

1 Answers1