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?

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

Answer 1

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