Apply the styling

The Text view allows us to display strings in SwiftUI.

SwiftUI provides many modifiers to style it according to what we need and today we will focus on one style that can be applied.

The hierarchical style.

This property can be applied using the .foregroundStyle(_) modifier.

It has 5 levels: .primary, .secondary, .tertiary, .quaternary and .quinary.

VStack(alignment: .center) {


	Text("Primary")


		.foregroundStyle(.primary)


	Text("Secondary")


		.foregroundStyle(.secondary)


	Text("Tertiary")


		.foregroundStyle(.tertiary)


	Text("Quaternary")


		.foregroundStyle(.quaternary)


	Text("Quinary")


		.foregroundStyle(.quinary)


}


.foregroundStyle(.purple)

Here the .secondary style dims the foregroundColor applied to the VStack.

Compatibility

The hierarchical styles can dim every custom color, not only SwiftUI default ones.

And it works not only with Text but also with Shape, Button, Stacks, Image and Label.

If you have any question about this article, feel free to email me or tweet me @franceleonidev and share your opinion.

Thank you for reading and see you in the next article!

Source link