Dark mode on iOS preparations using asset catalog colors

Although still rumors, it’s likely that Apple is going to announce system-wide dark mode support for iOS 13. We’re not talking about the inverted colors variant of dark mode, but more about the Mojave style of a darker appearance.

What is dark mode?

Some of the bigger apps on iOS already built-in support and show us exactly what dark mode could bring once apps start to support it. It basically means an inverted colors theme of the app in which the main background colors are dark.

Dark mode vs light mode inside the Twitter iOS app

Dark mode vs light mode inside the Twitter iOS app

Preparing my app for a darker theme

It’s likely that dark mode is going to work the same as how it now works on Mac apps in Mojave. Apple wrote detailed documentation on how to support the darker appearance using AppKit. You can add support using code by switching colors based on the current true or false value for the dark mode setting, but it’s a lot easier to use an asset catalog. Looking at the Apple documentation we can see how easy this is. All images and colors inside the asset catalog have an option to adjust for a specific appearance.

Dark mode using asset catalog colors for Mac apps

Dark mode using asset catalog colors for Mac apps

How to use asset catalog colors in Xcode?

By making use of asset catalog colors in Xcode you’re likely going to have an easier job for supporting dark mode when it’s released. You’ll only have to define new colors for the new style of appearance. The same counts for images for which you should already be using asset catalogs.

Inside your asset catalog, you can create a new color set.

A new color set inside an asset catalog in Xcode

A new color set inside an asset catalog in Xcode

After giving your color a describing name like “backgroundColor” you can adjust the appearances setting and set a specific color for the darker appearance.

Supporting a darker appearance inside a color set

Supporting a darker appearance inside a color set

You can now reference this color in your code as followed:

view.backgroundColor = UIColor(named: "backgroundColor")

Although not confirmed, this will likely allow your app to switch to a darker appearance easily. You can do exactly the same for images by specifying a specific image for a certain appearance. However, you can also choose to let your images adjust using a tint color and set a different tint color for a specific appearance.

Testing your defined colors

Unfortunately, there is no way yet to switch appearances and test your color settings. However, it’s already a great first step to start using an asset catalog for your colors. I’ll make sure to update this blog post accordingly as soon as I find a way to test the colors before official support is released.

Collect by WeTransfer Collect by WeTransfer is the best way to organize your ideas. Save content from across your apps and bring it together for your friends, your team, or just for yourself.