The Basics of Color Assets

This post is going to explain the basics of Color Assets in iOS or macOS projects.

I made a screen recording about how to use Color Assets to use different colors for light and dark mode based on the system settings. It is below.

Before getting started, what are Color Assets? Color Assets live in the .xcassets folder and are colors that can be used in a project. You can use a color picker to assign the color and then call that color’s name in your app.

To add an asset to your project

1. Navigate to the Assets.xcassets file
2. Click the + in the bottom left
3. Choose New Color Set from the menu
4. Double click on the Color to give it a new name

To adjust the color of the asset, open the inspector on the right.

In the Inspector, you can change the name of the color set, change what devices to use it on, whether this color is different based on light/dark mode of the device, and change the colors using the sliders for Red, Green, Blue, and opacity. There’s also an option to change based on localization since different cultures have different meanings to different colors.

Once you change settings for Devices, Appearances, and Localization, you will need to click on the proper color swatch to change the color. Like in the picture below.

Any time you want to use the Color Asset in your code, you need to call it.

// in iOS:
let color = UIColor(named: "color_name_here")

// in macOS:
let color = NSColor(named: "color_name_here")

And that’s the basics of utilizing Color Assets.

---

If you enjoy my posts, streams, and apps, consider encouraging my efforts.