Replicating SwiftUI styles for custom components

The techniques in this article is verified to work for iOS 13 and above

Many default components in SwiftUI come with a styling option in form of a modifier. In this article we will explore how we can replicate this for our own components. If you are wondering what view styles are, or which default components support them, I highly recommend reading Apples documentation on the matter.

The benefit of using styles becomes evident when we want to conditionally change the appearance of our components.

Without style modifier

@State var shouldShowProminentButtons = false

VStack {
    if shouldShowProminentButtons {
        ProminentButton("Prominent button") {}
        ProminentButton("Prominent button") {}
    } else {
        Button("Plain button") {}
        Button("Plain button") {}
    }
}

We have to duplicate our code to switch style

With style modifier

@State var shouldShowProminentButtons = false

VStack {
    Button("Plain or prominent button") {}
    Button("Plain or prominent button") {}
}
.buttonStyle(shouldShowProminentButtons ? .borderedProminent : .plain)

Cleaner code, and we don’t have to duplicate our code for each style supported

The comparison above uses internal components, with our own implementation we want to extend our options by having our styles switchable, and have our context exposed to other components.

How styles work

Styles are defined as modifiers on View, and not the component itself. This is because it actually does not alter the component directly, but rather changes the environment value for the associated style, and this is where context comes into play. Environment values are cascading, and therefor not changed until explicitly defined on a child node.

VStack {
    Button("Plain button") {} // Plain is default style
    
    Button("Prominent button") {}
        .buttonStyle(.borderedProminent) // Overrides style
    
    VStack {
        Button("Plain Button") {} // Not overriden
        
        VStack {
            // Parent VStack overrides environment in this context
            Button("Prominent Button") {}
        }
        .buttonStyle(.borderedProminent)
    }
}

Replicating style modifiers

Let’s tackle this by creating a Card component that acts as a wrapper for any content. The component itself won’t have any modifications to it, but that’s not the point. The point is to have a uniform way of creating different kinds of cards.

struct Card<Content: View>: View {
    var content: () -> Content
    
    init(content: @escaping () -> Content) {
        self.content = content
    }
    
    var body: some View {
        content()
    }
}

Next we need a configuration that helps us define the requirements and possibilities for alteration a style can apply to the basic card style. Note that nothing in the configuration is necessarily required, but omitting the use of the content parameter for instance would make the style useless as it doesn’t implement a key feature.

We also need a protocol for how a custom style should return the new view, and expose the configuration.

struct CardStyleConfiguration {
    struct Content: View {
        init<Content: View>(content: Content) {
            body = AnyView(content)
        }

        var body: AnyView
    }

    let content: CardStyleConfiguration.Content
}

protocol CardStyle {
    associatedtype Body : View
    typealias Configuration = CardStyleConfiguration
    
    func makeBody(configuration: Self.Configuration) -> Self.Body
}

Now we can create some styles:

struct BasicCardStyle: CardStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.content
            .padding()
            .background(RoundedRectangle(cornerRadius: 8.0).fill(.white))
            .background(RoundedRectangle(cornerRadius: 8.0).stroke(.black))
    }
}

struct ElevatedCardStyle: CardStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.content
            .padding()
            .background(
                RoundedRectangle(cornerRadius: 8.0).fill(.white)
                    .shadow(radius: 5, x: 3, y: 3)
            )
    }
}

Now we could actually use these styles, but our Card component could only use one of them, as they are not interchangeable. For this we need a stateful parameter that holds what kind of style we want to use. Obviously this could be done with a @Binding, but then we would have no context. Now we should set up the environment, so that we can set a context.

To simplify access to our styles we first create an enum defining each style.

enum CardStyles {
    case basic, elevated
    
    func get() -> any CardStyle {
        switch self {
        case .basic: return BasicCardStyle()
        case .elevated: return ElevatedCardStyle()
        }
    }
}

/// Defines the KeyPath \.cardStyle on environment
extension EnvironmentValues {
    var cardStyle: CardStyles {
        get { self[CardStyleKey.self] }
        set { self[CardStyleKey.self] = newValue }
    }
}

/// Sets the default value for cardStyle in the environment
struct CardStyleKey: EnvironmentKey {
    static var defaultValue = CardStyles.basic
}

Now let’s revisit our Card component so that it actually uses the style defined by the environment, and let us also create a modifier that allows us to change the environment value. Note that we return an AnyView, this is because each style does not hold the same view, but can hold any view.

struct Card<Content: View>: View {
    @Environment(\.cardStyle) var style
    var content: () -> Content
    
    init(content: @escaping () -> Content) {
        self.content = content
    }
    
    var body: some View {
        AnyView (
            style.get().makeBody(
                configuration: CardStyleConfiguration(
                    content: CardStyleConfiguration.Content(content: content())
                )
            )
        )
    }
}

extension View {
    func cardStyle(_ style: CardStyles) -> some View {
        environment(\.cardStyle, style)
    }
}

Now we can use it like this:

Card {
    // Content here
}
.cardStyle(.basic)

To further utilize the context we now have enforced, we can create another component that changes its appearance based on the card style.

Do note that native styles are internal and therefore not exposed to the environment, so this can only be done with custom styles.

struct CardTitle: View {
    @Environment(\.cardStyle) private var cardStyle
    
    let title: String
    
    init(_ title: String) {
        self.title = title
    }
    
    var body: some View {
        switch cardStyle {
        case .basic:
            Text(title)
                .font(.title)
                .bold()
        case .elevated:
            Text(title)
                .font(.title2)
                .fontWeight(.heavy)
                .foregroundStyle(.cyan)
        }
    }
}

And the result when CardTitle is used inside our Card with different styles:

VStack(spacing: 30) {
    Card {
        VStack(alignment: .leading) {
            CardTitle("Basic card")
            Text("Lorem...")
        }
    }
    
    Card {
        VStack(alignment: .leading) {
            CardTitle("Elevated card")
            Text("Lorem...")
        }
    }
    .cardStyle(.elevated)
}

Conclusion

With this technique we have a uniform way of altering our content with a single modifier that can be explicitly set for one component, or at a higher level. This replicates a pattern that is already well established within SwiftUI and therefore makes it easy for other maintainers of our code to use.

Styles can be conditionally set, not only for theming purposes, but can also be used to set specific styles based on user preferences in the operating system, such as accessibility settings.