What's new in SwiftUI Colors and SF Symbols? ft. WWDC'22

SwiftUI was launched in 2019 and since then Apple has been constantly adding features and updates to make it production ready. Following that, there were drastic amount of updates made in SwiftUI 4. So, without further ado, let's dive into new updates on colors, styles and SF symbol implementation.​

Before diving into gradient colors, let's get some context on foreground and background styles. So, foreground style (.foregroundStyle()) and background style (.backgroundStyle()) helps you add images, colors and gradients as the background for a particular view.

Previously, for making background and foreground styles of monochromatic gradient, you could have to generate gradient views and use that as background. Now with SwiftUI 4, you could simply add .gradient to the color.

Let's consider a shape and add a gradient color as foreground style.

RoundedRectangle(cornerRadius: 24)
            .foregroundStyle(Color.red.gradient)
            .padding()
            

Result:

Let's give another example. We will take some text in a vertical stack and add a gradient background.

 GroupBox {
            VStack(spacing: 8) {
                Text("Hello, World!") ]
                    .bold()
                    .font(.system(.body, design: .rounded)) // 1 
                Text("Welcome to Swift Anytime")  
            }
        }
        .padding() // 2 
        .backgroundStyle(Color.orange.gradient) // 3

Result:

Code Explanation:

​1. For stylizing purposes, this special font has been added.

2. Added adding for spacing purposes

3. Here is when the magic happens. The background style is being set to an orange gradient.​

Wanna add a cool shadow to the gradient? Just add `.shadow()` to the gradient and pick a type of gradient. In the following example, inner shadow is picked with certain radius.

  .backgroundStyle(
        Color.orange.gradient
            .shadow(.inner(radius: 8))
    )
    

Result:

Apple has expanded the library of the SF Symbols to 700+ symbols. Along with that, new customization and configuration regarding rendering mode and variable colors have been there.

Source: Apple

5 new categories have been added to SF Symbols:

1. Camera & Photos

2. Accessibility

3. Privacy & Security

4. Home

5. Fitness

Another innovative thing they added to SF Symbols is variable color. Meaning you can supply a Double value (usually 0-1) and it changes the state of the symbol based on the variable value. Keep in mind only certain SF Symbols are available for variable color. You can find it in "Variable Color" section on SF Symbol left pane. Also for being on the safe side, the lower bound of the variable color is considered for the decimals.

Image(systemName: "rays", variableValue: variable) // 1
            .font(.largeTitle)
            .onTapGesture {
                variable += 0.2 // 2
            }
            

Result:

Code Explanation:

​1. Here, the image is being initialized with SF symbols with a pre-defined variable value.

2. For convenience in understanding, a tap gesture example has been used. On the tap gesture, the variable value is increased by 0.2 for sake of simplicity.

As you can see, on tap gesture, it shows different range of that particular SF symbols.

Rendering Mode

With SwiftUI 4, Apple has introduced 4 rendering modes for SF Symbols:

- Monochrome

- Hierarchial

- Palette

- Multicolor

The rendering mode can be using .symbolRenderingMode(...) style modifier.

Monochrome Mode

Monochrome SF symbols, as the name explains, are meant to have a single color.

Image(systemName: "beats.headphones")
            .symbolRenderingMode(.monochrome)
            .font(.system(size: 200))
            

Result:

Hierarchical Mode

Hierarchical mode has multiple layers which are rendered with different opacities for the given foreground style. You can also add a particular color to it.

Image(systemName: "calendar.badge.plus")
    .symbolRenderingMode(.hierarchical)
    .font(.system(size: 200))
    .foregroundStyle(.blue)
    

Result:

Multicolor Mode

Multicolor mode has multiple layers where different colors can be embedded in the iconography by default.

Image(systemName: "calendar.badge.plus")
    .symbolRenderingMode(.multicolor)
    .font(.largeTitle)

Result:

Palette Mode

Palette mode is just like a more customizable version of the multi-colored mode. It allows you to pick the foreground colors/style. Cool twist, you can apply the same gradients you learnt in earlier sections.

Image(systemName: "iphone")
    .symbolRenderingMode(.palette)
    .font(.system(size: 200))
    .foregroundStyle(Color.teal.gradient, Color.blue.gradient) 
    

Result:

Wrapping up the article, you learned about the new SF Symbols updates - rendering modes, variable color and new category edition - color gradients, foreground/background style and more.