For this case I redesigned a few screens of the Rabobank app which I translated into dark mode afterwards.
Apple announced to release iOS13 in September 2019. This upgrade will introduce dark mode, just like Mojave did for macOS. It’s to be expected that a lot of companies will want to tap in to this new possibility. This means a new challenge for all UI Designers out there.
Skills UI Design
Translating your light mode app UI into a dark mode app UI sounds easy, but there are some things you might want to keep in mind. Basically, you want to determine a dark mode color scheme: an equivalent of you light mode color scheme. To do that, you should think about: contrast, your brand colors and your functional colors.
So this isn’t as simple as “black panels with white texts”. You want to make sure your contrast is balanced. This is very important. White text on black panels is unpleasant for the human eye, go with something less contrasting. For this case I chose a few shades of grey.
Make sure your dark mode color scheme can be combined with your brand colors. Ideally you want to alter your dark color scheme until it fits with your brand colors.
Functional colors can have dark mode equivalent since they are not that remarkable for your brand. The red and green from my light mode design were contrasting too much with the dark mode color scheme, so I picked two softened equivalents and added them to my dark mode color scheme.
Last but not least: consider the impact of dark mode on your product’s interface. Up until now, dark mode interfaces have a strong association with entertainment, gaming and programming. Think about Spotify, Netflix, Playstation, Steam et cetera. Depending on your companies sector, this association can make dark mode feel a little uncomfortable. It’s to be expected that the associations with dark mode will normalise in the next years since more and more platforms are starting to support it.