Implement or Disable Dark Mode on iOS(Swift)

Dark Mode was introduced in iOS 13 and announced at WWDC 2019. It provides a darker theme to iOS and allows you to do the same for your app. Most of the users like to use a dark theme and It’s a great addition to give to your users so they can experience your app in a darker design.

Further, you will get a Git repo of a simple application in which I implemented a dark mode theme in two easy ways.

Disable Dark Mode

Before implementing Dark interface style I want to briefly tell you about a few things:

1. Firstly, if you are building your app using Xcode 11 you’ll notice that the darker appearance is enabled by default.
2. If you don’t want to use Dark interface style or you have an existing app and you don’t have much time to implement dark mode changes, in that case, you can simply disable it by adding the UIUserInterfaceStyle to your Info.plist and set it to Light.
3. or add following code in didFinishLaunchingWithOptions override function of Appdelegate.

Disabling Dark interface style in Appdelegate

Adopting Dark mode

Opt Out Only as Needed

You can opt dark mode as per UIViewcontroller or UIView by setting overrideUserInterfaceStyle property to dark otherwise in Xcode 11 the by default it is dark.

Adopt a specific interface style for your views, view controllers, or app when it is inappropriate to support both light and dark variants

setting up overrideUserInterfaceStyle property to dark

UI Element Colors

UIKit provides standard color objects for the foreground and background colors of your app’s UI elements. The names of these color objects reflect their intended use, rather than specific color values.

The standard color objects you can use for labels, text, backgrounds, links, and more.

The SemanticUI app by Aaron Brethorst helps exploring Semantic and adaptable colors

You can use these adaptable colors which will automatically handle your application theme for you. For example:

setting up adaptive colour programmatically

setting up adaptive colour through storyboard

Custom Colors

In case users want to use different color pattern in their application. They can create custom color in assets as we have options to add a new image set, new color set and so on.

Different options in Assets.xcassets

Just create a new color set and in Attributes inspector we have appearances attribute with different properties and choose one as per requirement.

Attributes inspector

As I chose a property(Any, Dark) we got two appearance color boxes, one is for universal mode and other is for dark mode. In which you can set whatever color you want as per your wish. Make sure color-set name should be clear as per the component where you are going to use it.

Use of Custom Color-Sets

Color-sets are an amazing feature, very simple to make moreover very easy to use that too according to one’s design. One can make numerous sets as per their requirement. There are two ways to use color-sets:

• via Storyboard
• Programmatically

After saving, you will get it in color options with color names(given as per components where we can use it) so you can directly use it via storyboard further in your application.

Color-set options

You can do same programmatically and it is as simple as storyboard is.

if your deployment target fallback on earlier versions than iOS 13 and you are using system adaptive colors then you have to maintain it by availability check as you can see it in example.

Availability check and setting up color-set to a UIView

Furthermore, you have to use name of color-set in named parameter of UIColor. Most importantly, make sure you are writing correct name else you will get crash for the same.

Conclusion

One can search about same from number of sources. But I would like to specify that when I tried to learn and implement dark theme feature, I faced many problems even though there were number of examples but the information was complex. Hence I tried to make it as simple and informative it could be. Hope you all will be able to understand and make your application blend into the theme of the user’s device effortlessly.

“While we teach, we learn,” said the Roman philosopher Seneca

You can get the source code on Github here. In the next article, we’ll be playing with functionalities of the application using this feature.