Tresorit joins the Dark Side
Dark mode was a buzzword of 2019. It is not just a “nice-to-have” feature, but it is pretty much expected from all noteworthy applications. So here’s how we delivered Tresorit’s dark mode on iOS.
Dark mode has its benefits: it makes the screen easier to read in low-lit conditions, makes content even more prominent on the GUI, and it improves battery life. But — as it’s widely stressed — dark mode is not just inverting your color palette. Forget switching #FFFFFF to #000000 in the code. To achieve a well-functioning and visually compelling dark mode, you’d need to follow some rules of thumb. Apart from this, we listed some tricks that helped us in the design process.
1. Start with a UI audit
Define the scope of a small UI audit, but do this wisely. You might come across many minor or even larger facelift opportunities, but don’t get lost in these. Focus purely on colors. Check your code, list all color codes and their usage, compare with your designs, and don’t feel bad in case you’ve found some unsanctioned hex codes. Let’s be honest, even a well-maintained design system cannot fully guarantee that your latest release will not contain an unintended shade of grey. Your team may have intentionally deviated from your palette to experiment with a new look and feel. Be aware of these discrepancies and correct your default light mode if you feel you have to. Going dark will eventually get more simple after a brief “tidy-up”.
2. Work closely with developers
Right from the start we closely worked together with our developers. This active collaboration matches our company ethos, making life so much easier. Developers lend a helping hand in finding edge cases, error scenarios, or even a hidden part of the app where an illustration still has to be updated to work with dark mode. The earlier you uncover these tasks, the more efficient you can get with the delivery.
3. Select a key screen to experiment with
This is straightforward, right? Now continue with some key operational components. In case of Tresorit we added some link badges, status indicators, success and error messages to our key screen to cover all main color instances we had to change for dark mode. It was much easier to iterate the design and color sets using a single screen.
4. Maintain appropriate color contrast
There are some standards (WCAG 2.0) to follow with regards to color contrast. Apple’s Human Interface Guidelines advises a contrast ratio of 7:1. Even though we focused our efforts first on our iOS app, we spent some time playing around in Google’s theme editor to generate some palettes. In addition, there are countless online contrast ratio calculators to rely on. And please… always remember to turn down screen brightness to the lowest on your devices while testing your design.
5. Go beyond color swatches
Guidelines and official UI kits are the foundation of your designs, even if you have a dozen custom colors in your branded app. iOS13 system colors provide a solid base, however each and every custom choice needs a check on the actual interface. Don’t get lazy by just expanding the color swatches in the library. Always apply the colors on your mockup screens. Smaller UI elements (a badge, for instance) have different optical effects than larger color stains on the same screen. What seems to work in a neat row of swatches might not give the expected visual feel in the live app.
6. Think about how UI elements are layered
I have always liked how Google’s Material Design explains the structure of layers and the concept of elevation. For your dark mode, you’d need to create depth and emphasize the distance of components. Avoid pitch black and use a range of greys for layers. You may label the respective colors as primary, secondary, tertiary, etc or background and foreground schemes. Think about how the respective content (labels, separators, placeholders) is presented on each layer and how you choose shading. You may need to define color sets for each content layer.
7. Update source files
So you got your final designs implemented? Well done, but don’t rest yet! You still have to update your design system, save assets, and define rules for applying dark mode. Documentation is sometimes an arduous and meticulous task, but remember, you’ve already done a short audit for colors, reviewed your basic components, so this final update shouldn’t break your back.
Shout-out to my colleagues in Dev Team: thanks Benedek Kozma and Norbert Miko for the collab!
