Implementing Dark Mode in iOS App & Adding support for older iOS Versions.
Recently Apple announced then dark mode support in iOS Devices with iOS Version 13.0 above, as we being an iOS developer have an urge to provide support for dark mode in our existing applications.
So after surfing to web with different approaches to implement dark mode, I will be following up with some of them to tackle your existing codebase.
Approach — 1 (Quick Fix / Easy):
Disable dark mode, easy but no support for dark mode. To achieve this simply add a key description in info.plist file.
UIUserInterfaceStyle = light
So when you build your code base with Xcode 11 & on switching to dark/light mode UI will not create any issue, it will act as like it was before. App opting out from dark mode.
Approach — 2 :
Defines color codes in Assets via adding a new color asset and define color according to the theme More details can be found at :
Approach — 3 (Implemented) :
Applying colors dynamically to the views, label, button accordingly to the active mode style for User apple device.
This approach will help you achieve a case wherein the future you want your app to support multiple themes, just like Instagram Threads application did.
What I named this approach is THEME BASED APPROACH.
To follow up with this approach create a Color constant file as Color constants in your Xcode project.
Step -1 Create a protocol — containing all the themes you want to add in your app.
Step -2 Create UIColor Extension as
Step -3 Initiate an enum inside Color Extension & make sure enum confirms to the AppThemeProtocol.
This enum will contain all the colors you will be needing in your application such as background color for view controllers, button colors, etc, depending upon your app use-case.
For demonstrating purpose let’s add a case for app background color case appBackground. So the code looks like Extension UIColor.
Now let’s override the protocols variables inside enum as:
As you can observe in light case we have added lightGray and in dark theme, it goes with systembackground color.
Now its time to do some magic and switch colors dynamically.
Create a static function called dynamic color which takes AppColor enum as param and returns a UIColor.
Now lets demonstrate in view controller viewDidLoad() method add code as
Build and run the application View Background will change if you switch device dark/light mode. Same way you can add n number for enum cases depending upon your app use case.
So Now how to deal with old iOS Versions above code will show up compile issues if you build with old version of Xcode to fix this add this available (iOS 13, *)
The statement in color constant file and code will compile successfully.
Some Pro’s & Con’s for the approach.
Cons: If you don’t have any pre-existing color constant file you need to start it from scratch. It might take time to test the complete application with both modes.
Pros: Adding support to dark mode to your app Dark mode proportionally tends to battery saving.
In future if you want to add more themes to an app you just simply play with a single file — Adding a new variable in protocol — Add respective color overrides in enum — Add business logic in Dynamic color methods Boom you add a new theme to your app.
Note : You might be thinking of importing color codes from static files but you might end up having run time failures, Better to avoid.
