→ How to quickly start a dark theme
Now I will tell you how my team, having a weak component base, managed to get a dark theme for iOS and Android.
The task was simple: to make a dark theme for applications on both platforms.
At the same time, in “given” we had:
color library in Figma;
color library on platforms (with a bunch of heritage colors);
only the basic components in Figma and even less in the code;
icon set and illustration set.
Yes, we knew how to do it right, but we had neither the time nor the hands to do it.
Next, I will describe our path step by step.
Step 1 – Refactoring
Screenshots of app screens for both platforms (iOS, Android) were compared with layouts.
Remark: most of our applications are similar.
Step 2 – Colors
Our colors are a standard set of primary colors and their shades in the light and dark sides: background white, trigger blue, black and gray for fonts and special cases of using shades used in design.
A little about the principles: when managing the user’s attention, we first of all rely on the cognitive properties of perception. Focus is strongly influenced by pictures and contrasting elements. Therefore, we distributed colors and shades by contrast, creating color pairs, where the background is a pair of colors.
Thought to make unique colors with identical contrast for both themes. But we decided not to go too far and for the light theme we didn’t change almost anything in the colors, but for the dark theme we reversed the color depth. So we got 2 sets of dynamic (switching) colors.
We measured color contrasts using the content accessibility scale applied to the contrast. In most cases, similar results were obtained.
Step 3 – Color tokens
Previously, we named colors based on color depth. Now we have taken as a basis the contrast in light and dark themes. The colors are named the same, contain a hue prefix and a contrast number. That is, light blue on a light theme and dark blue on a dark theme both have the same b_100. The more contrast, the larger the number.
Step 4 – Drawing
Rather, not rendering, but the assignment of a dark color scheme to a light one.
Step 5 – Unique Colors
As I wrote above, we have special cases that cannot be switched within the framework of the underlying logic. That’s why we added small sets of unique colors that switch in a unique way.
We also needed a set of static (non-switching) color shades.
Step 6 – Automation
We have to check our design, and doing layouts in 2 themes for this is absolutely not our approach. We launched the Appearance plugin for Figma, set it up, and tested it.
Step 7 – Development
We upload our colors in the format the developers need and / or add them to the sandbox ourselves. We ask developers to unload the color library from the code. Refactor colors by assigning new colors to legacy colors.
We ask the developers to build on new colors and enjoy the result of switching colors. Of course, there was still a lot of work to clean up color errors. But not for long.
Outcome
With this approach, technically, we delivered a dark theme in just a couple of weeks. Yes, it took about 3 months to study different approaches, sort through the mass of design systems, repaint colors (8 times), but looking at the result, the team and I understand that everything was not in vain.
There were many subtleties along the way. If you have any questions, I will be happy to answer them in Telegram – @Kilunin.
Glad if it was helpful!
