Contents

ShapeStyle

A color or pattern to use when rendering a shape.

Declaration

protocol ShapeStyle : Sendable

Overview

You create custom shape styles by declaring a type that conforms to the ShapeStyle protocol and implementing the required resolve function to return a shape style that represents the desired appearance based on the current environment.

For example this shape style reads the current color scheme from the environment to choose the blend mode its color will be composited with:

struct MyShapeStyle: ShapeStyle {
    func resolve(in environment: EnvironmentValues) -> some ShapeStyle {
        if environment.colorScheme == .light {
            return Color.red.blendMode(.lighten)
        } else {
            return Color.red.blendMode(.darken)
        }
    }
}

In addition to creating a custom shape style, you can also use one of the concrete styles that SwiftUI defines. To indicate a specific color or pattern, you can use Color or the style returned by image(_:sourceRect:scale:), or one of the gradient types, like the one returned by radialGradient(_:center:startRadius:endRadius:). To set a color that’s appropriate for a given context on a given platform, use one of the semantic styles, like background or primary.

You can use a shape style by:

  • Filling a shape with a style with the fill(_:style:) modifier:

    Path { path in
    path.move(to: .zero)
    path.addLine(to: CGPoint(x: 50, y: 0))
    path.addArc(
        center: .zero,
        radius: 50,
        startAngle: .zero,
        endAngle: .degrees(90),
        clockwise: false)
}
.fill(.radialGradient(
    Gradient(colors: [.yellow, .red]),
    center: .topLeading,
    startRadius: 15,
    endRadius: 80))

    [Image]

  • Tracing the outline of a shape with a style with either the stroke(_:lineWidth:) or the stroke(_:style:) modifier:

    RoundedRectangle(cornerRadius: 10)
    .stroke(.mint, lineWidth: 10)
    .frame(width: 200, height: 50)

    [Image]

  • Styling the foreground elements in a view with the foregroundStyle(_:) modifier:

    VStack(alignment: .leading) {
    Text("Primary")
        .font(.title)
    Text("Secondary")
        .font(.caption)
        .foregroundStyle(.secondary)
}

    [Image]

Topics

System colors

Angular gradients

Conic gradients

Elliptical gradients

Linear gradients

Radial gradients

Materials

Image paint styles

Hierarchical styles

Semantic styles

Modifying a shape style

Configuring the default shape style

Mapping to absolute coordinates

Resolving a shape style in an environment

Using a shape style as a view

Supporting types

Instance Methods

See Also

Styling content