Step by Step: Customize your colors in SwifUI

#beginners #swift #ios #tutorial

Hola Mundo!

It's me, baby swifter again 🍼👶🏻. As I keep learning about Swift there are some things that I think "I must write about it" and when I think that is because I really think it could help my fellow -or soon to be - Swifters.

Btw, does Swifter exist? Well for me is "person that code in Swift"

Now let's eat the cake. When it comes to do a customized color 🎨 scheme I found so many different ways that it was a little bit confusing. So I want to share my favourite way to do so in two versions: the simplified and the "I wanna look pro 🎩 even if I'm a junior 🍼" version.

Let's get to it! 🚀

Add a new Assets file ➕

Get into your project and add a new Assets file. To do so you can click on the + at the bottom left corner of XCode or use the shortcut ⌘n and search for "Asset"; it will show a resource called "Asset Catalog" and that's exactly what we are looking for🔎.

Remember to create your file with a logic name it can be something like "Colors", "ColorScheme" whatever you feel it fits but make it logic, remember we don't write code for us but for others too.

Add a Color Set 🎨

Right now your file is a white canvas, so let's add our color scheme 🖼️. You can add all the colors you want and name them as you prefer.

I would like you to have two things in consideration specially about naming 🧐. If you have a brand manual my recommendation is to stick to the name that the designer has chosen for each color, because that's how they are going to call them always so it will be easier to find them.

If you don't have a brand manual you can choose the name you want🤷‍♀️. One way is to call them by the actual color, like "LightGray", "Burgundy" or so. Another way is to call them by use like "Alert", "PrimaryTypo", "SecondaryTypo", "LabelColor".

Take into consideration that if you are working in a team project the best way is to reach to an agreement with them first 🤝. If it's a personal project, use your favourite.

Now, let's add our palette. To do so you have to be in the file you created and click right on your mouse and choose "New Color Set". You can also do so using the + in the bottom of the window.

Add the color 🖍️

Right now you have 🔲two white squares🔲 one for "Any appearance" and one for "Dark. At the right you will also find some settings that might be useful.

First you have the name, so go on and write it down. Next you have "Devices" by default the "Universal" is selected, however you can change it if you need to set a specific scheme for a specific device. Finally we have "Appearances" with 3 options, "None", "Any, Dark" and "Any, Dark, Light", if you change this you will be able to add three different hues to each color you create.

After you set this up, click on the white square and, on the right a new setting will appear "Color", there you can select the color you are actually creating. As a tip, if you click on "Show Color Panel" you can find different ways to choose your color.

You must repeat this step until your whole palette is created 🎨

Use it! -the simplified version-🖌️

The simple way to use your new color palette is by calling each color name: Color("YourColorName").

For example, imagine you have a text and you want to set the foregroundColor attribute, you could do so like this

Text("Color scheme")
     .font(.title)
     .foregroundColor(currentMode == .dark ? Color("Yellow") : Color("Wine"))

We are basically saying if my user has darkMode in the phone, use the color I called "Yellow", else use my color "Wine" and it looks like this:

This is it!

Use it! -the fancy version-🎩

The fancy version is pretty simple too, but it requires an extra step. You have to create a new file into your project. This file will be a public extension of Color.

Inside you will assign each color of your palette a constant name that you will later use in your views. The good thing about using this approach is that you can assign to different constants the same color to use it as the context needs to.

public extension Color {

    // By colours
    static let wine = Color("Wine")
    static let brightRed = Color("BrightRed")
    static let red = Color("Red")
    static let orange = Color("Orange")
    static let yellow = Color("Yellow")

    // By Use
    static let button = Color("Wine")
    static let buttonLabel = Color("Yellow")
    static let primaryTitle = Color("Wine")
    static let primaryText = Color("BrightRed")

    // By Use DarkMode
    static let primaryTitleDM = Color("Yellow")
}

In the example you can see we are using the Yellow both for buttonLabel and for dark mode primaryTitle. One of the pros of this is that if you ever change your brand colors it will be really simple to make changes into your app because your color management is centralized.

To use it you just have to set the color using the constant name Color.yourColorName

Text("Beware")
    .font(.title)
    .foregroundColor(currentMode == .dark ? Color.primaryTitleDM : Color.primaryTitle)

Button(action: {
    showAlert = true
}){
    Text("Don't click here")
        .foregroundColor(Color.buttonLabel)
}
.padding()
.background(
    RoundedRectangle(cornerRadius: 25)
        .fill(Color.button)
        .shadow(color: .brightRed, radius: 2, x: 0, y: 2)
)
.buttonStyle(PlainButtonStyle())
)