Creating custom colors for Light & Dark Mode

Programmatically & using Storyboards in Swift 5!

3 min readJul 8, 2020

Since the release of iOS 13, Dark Mode has been a feature that a majority of users have been waiting for (Not sure why, but hey, better late than never).

As iOS Engineers, we’d definitely want our apps to have Dark Mode supported. Sure we would use .systemBackground, or other .systemColors that’s already built in. But what about if you have a custom color that is not listed in the default UIColor’s list? No worries, I’ll show you how to create custom color assets for Dark Mode via programmatically & storyboards.

Creating Color Assets in the Assets Folder

Before we jump into code and applying color assets in storyboards, let’s (obviously) create a color asset in the Assets Folder

To do that, right click anywhere in the Assets Folder and you will see an option called “New Color Set”. From there, you will see a default color made for you. Make sure you have your inspector tab open and head to “Appearances” and then click “Any, Dark”.

Click the button in Appearances section!

Let’s get a custom color for our the background of our screen. By clicking “Any Appearance”, you’ll see at the bottom right that there is a color section, click color panel and choose the custom color that you want to use for “Light Mode”.

Repeat the same steps for “Dark Appearance”. So now, it should look something like this:

These are the names of my color assets. Name it whatever you want

One more thing. Make sure that you rename the color asset that you just created. You will see why in just a moment.

Applying it to Storyboards

Sweet! Color Assets are made! Let’s use them in Storyboards now.

We go to the background tab where we can change the color of the View’s background. Now that we created those custom color assets, those colors will now be at the very top where it is under “Named Colors”. Click on the appropriate color you wish to choose and BOOM. You’re done!

Setting custom color assets Programmatically

Since we have already created those color assets, half of the work is already done. How I am going to create UIColor variables is by creating a “Constants” file and have all of my custom assets placed there. You are welcome to follow this example or do it however you please.