Dark Mode in your iOS app. Engineering for erudition.
With the arrival of an iOS 13, Apple delivered long-awaited — Dark Mode. They did a marvelous job, to make it extremely easy to implement, so that’s why, a few days before official release of Synonims — we decided to add it to our app too. This is how we did it.
From iOS 13, Apple provides a new way to define colors in our apps.
The UIColor class has now a new dynamic initializer, that dynamically creates color depending on selected user interface style:
The dynamicProvider is the piece of data, that can tell us a bit more about the interface environment of our app. In Synonims app, we use it to actively react to user interface style changes and choose proper colors for dark and light modes:
We defined our system(light:dark) helper method, that depending on interface style returns one of the passed as arguments colors.
The default theme for our app is the light one — it’s used, when the user interface style can’t be specified or the iOS version is below 13.
Such approach makes it really easy to use by developers:
A really good habit while working closely is with designers is to create common language. In Synonims — we implemented it by the creation of design system library. Both designers and developers use now the same vocabulary when discussing ideas, features, components or colors.
In the library, we followed Apples naming convention for dynamic colors and used system prefix for our component-related dynamically changing colors:
By doing so, it made it even easier to accommodate app for Dark Mode:
We’ve made a really hard decision about implementing Dark Mode just a few days before official release day. Was it a good choice?
In retrospect, we say - YES. Having a well-defined design system library, superb Apple’s implementation of Dark Mode and centralized colors library made it possible to successfully finish Dark Mode for Synonims.
