How do you use Hierarchical styles in SwiftUI?

In SwiftUI, starting with Xcode 13, you can now apply hierarchical styles to your UI.

These styles are meant to show importance to different levels of your UI by making them stand out more or by showing levels of depth.

You probably do this already in some way. You give UI views in the background less color or more transparency and UI views in the foreground have more opacity (solidity) and might use more color.

And finally, you have your accent color which stands out the most so users know that they can interact with these UI views, like buttons.

Now, you can use hierarchical styles to help you with this pattern.

There are 4 styles at this time:

1. Primary - More in the foreground
2. Secondary
3. Tertiary
4. Quaternary - More in the background

You apply these styles to views using modifiers such as:

• background
• foregroundStyle

Take a look at the image for example:

 

Note: These examples come from a book called SwiftUI Views Mastery which is a picture book reference of SwiftUI views and code that’s almost 1,000 pages.

Interested in beginning SwiftUI?

Start with the free SwiftUI Views Quick Start picture book!