DEV Community

Cover image for What's new in SwiftUI Colors and SF Symbols? ft. WWDC'22
 Nafeez Ahmed
Nafeez Ahmed

Posted on • Originally published at swiftanytime.com

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.​

💡 You can download the new SF Symbols from here

Gradient Colors

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()
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

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
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Code Explanation:

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

  1. Added adding for spacing purposes

  2. 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))
    )
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

SF Symbols

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.

💡 New symbols include representations of home objects, fitness, health, currencies, and many more.

Source : Apple

Category Edition

5 new categories have been added to SF Symbols:

  1. Camera & Photos

  2. Accessibility

  3. Privacy & Security

  4. Home

  5. Fitness

Image description

Variable Color

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
            }
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Code Explanation:

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

  1. 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 description

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)
Enter fullscreen mode Exit fullscreen mode

Multicolor Mode

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

Result:

Image description

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) 
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

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.

We at Swift Anytime have the mission to make learn iOS development the way everyone enjoys it. You can check out our articles on SwiftUI, Swift, iOS Interview Questions and get started with your iOS journey today.​​

Eat. Sleep. Swift Anytime. Repeat.

Top comments (0)