Backward Compatible Dark Mode on iOS

Rahul Garg
Jul 22, 2020 · 4 min read

In iOS, people can now choose to adopt a dark system-wide appearance called Dark Mode. In Dark Mode, the system uses a darker color palette for all screens, views, menus, and controls, and it uses more vibrancy to make foreground content stand out against the darker backgrounds.

At WWDC 2019, Apple announced that Dark Mode would be supported on iOS 13 and later only. There are some significant changes to UIKit in order to support this — many of them are detailed in the talk Implementing Dark Mode on iOS which I’d highly recommend watching.

Now the question is how do we configure colors for light and dark mode? Well, we can use the color asset catalog for that. Colors for Dark and Light mode can be added into the catalog.

Color Asset Catalog

The color asset catalog can only add colors for Dark and Light mode. But what if we want to add more colors for multiple themes? Imagine an app that changes the appearance based on whether it’s paid paid or free app.

What’s the solution?

Also iOS 10 doesn’t support the color asset catalog. UIColor(named: “”) is supported from iOS 11 and later only. What if the app is running on iOS 10? There must be a better way to do this, right?

A better solution would be to create our own custom UIColor wrapper supporting colors for different themes. While making these wrappers, we have to make sure that the syntax remains the same as Apple API’s for UIColor (e.g. calling UIColor.black).

Let’s code

Our Theme propertyWrapper is ready. Now let’s list all the colors which will be used in the app. We will create an extension of UIColor and create color variables with the Theme attribute.

That’s it. We will set the color using the same syntax UIColor.background and the color will be changed according the theme set.

The above implementation works fine for the devices running iOS 13 and later. What about the devices running on iOS 12 and before?

What about Older versions?

The ThemeProtocol protocol has the default implementation of addThemeChangeObserver().

Now we just have to conform the ViewController to the ThemeProtocol and call addThemeChangeObserver in viewDidLoad and implement configureThemeColors, where we will configure all our UI elements color.

That’s all. Now whenever the theme is changed, we just have to fire the ThemeDidChangeNotification notification and the color of the UI elements will be changed accordingly, even for the devices running on iOS version 12 and below.

Conclusion

Hopefully this makes your app’s transition to dark mode easier!

The Startup

Get smarter at building your thing. Join The Startup’s +792K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Rahul Garg

Written by

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Rahul Garg

Written by

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store