How to create and use a Color Set in XCode

Oscar de la Hera Gomez
Two flowers that represent SwiftUI and XCode side by side. Beneath them sits the text "Color Set."

In the Assets, right click and select "New Color Set." Then define your light and dark mode colors using the inspector on the right hand side.

The example can be found on the main branch of our SwiftUI Open Source Starter Project linked below.

Step One: Create

A screenshot of XCode showing how if you right click in the assets of XCode, you can create a new color set using the menu that pops up.

Select the Assets folder in your project and under the definitions, right click and select New Color Set from the menu that pops up.

Step Two: Name

A screenshot of XCode showing that after you select a create a New Color Set, XCode automatically lets you name the new color set. We have named it "Sample."

Name the Color Set. Press the Enter key when done.

Please note that you must NOT name color sets "Red", "Green", "Primary" or "Background" as these conflict with the Apple System definitions. Apple has yet to provide a means for developers to alter the standard color scheme.

Step Three: Define

A screenshot of XCode highlighting how you can set the color set, color variables.

Select the relevant color (i.e. Any Appearance for Light mode or Dark for Dark Mode) and using the inspector on the right hand side, set the relevant color.

Step Four: Declare and use.

A screenshot of XCode showing how we have declared the color within a Colors struct within our app.

To use a Color Set, use the following syntax - where "COLOR_NAME" is the name that you set in step two:

Color("COLOR_NAME")

We recommend declaring the colors in a color struct and offering them as part of a styleguide.

Follow the tutorial below to learn more.

Looking to learn more about SwiftUI, Swift, Design and Technology?

Search our blog to learn more about Swift, SwiftUI, design and technology.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details