Shedding Light on Fiverr’s Dark Mode Creation Process
A well-defined color system with a semantic layer allows us to easily implement new color-related features like dark mode.
Dark mode has become increasingly popular since it was first introduced back in 2019 at Google I/O and Apple WWDC conferences and is now considered to be a must-have feature by many. It improves visibility for users with low vision and those who are sensitive to bright light, reduces power usage, and helps users to focus.
Since the Fiverr app serves freelancers and businesses all over the world, our sellers and buyers are often located in distant locations and different time zones. Thus, we learned they communicate at their flexible times and locations, including after daylight and in low light environments. Due to the fact that many users are already accustomed to dark mode on numerous other platforms, we wanted to provide them with this option and possibly improve their overall working environment.
We started by mapping our current color system and the way it is applied in each of the designed components and screens in both our app and web platforms. This process revealed inconsistencies in the existing color system between the platforms, or even between iOS and Android implementations. A noticeable example of such inconsistency was seen in the button component and the different ways colors were used to demonstrate its various states in the distinct platforms. The process also exposed the weaknesses and disadvantages of the hardcoded color hex method we were using. We decided to make the most of this opportunity and create better alignment between the platforms in order to fulfill our vision for a seamless transition.
Creating new semantics
Naming colors by their role instead of conventional names
The idea is to set up a new semantic layer that will describe the role of specific colors and shades in the system. Referring to colors by their shades, tones or other specific characteristics can create discrepancies when switching to dark mode, since a specific shade can be considered “dark” in one mode and “bright” in the other.
Establishing a systematic role-based naming layer enables a more dynamic and adjustable infrastructure for future changes. This will allow easier implementation of new color-related features like dark mode, custom themes, accessibility needs, or even simplify future product rebranding. The addition of such a layer, consisting of names like “primary label color” and “secondary label color”, will better convey the colors’ function and “visual weight” in the system and will allow developers to easily assign colors and shades to UI elements.
While constructing the semantic layer we noticed that our existing web palette is complicated and loaded with too many shades that we don’t use in our app. We decided to simplify it and eliminate some of them. For example, 6 of the 12 shades in the green palette, our primary product’s color, were omitted.
At the same time, the gray palette wasn’t rich enough with shades to meet the requirements of the about-to-come dark mode. As opposed to the existing light mode, where dark gray shades are used mainly for texts, in dark mode they are used for backgrounds as well. Thus, we decided to extend the gray palette giving it more depth.
Lights and shadows
Dark mode is more than just a color inversion
Dark mode is not a simple color inversion of light mode and requires many modifications. For example, Fiverr’s mobile app’s UI relies a lot on shadows for visual separation or as an indication to clickable elements like cards. However, shadowing becomes tricky in a dark environment.
The old-fashioned depth methodology of mobile UI supplied us with an elegant solution to that challenge. Components at higher levels of elevation express depth by displaying shadows in light mode and can express the same level of elevation by using lighter surface colors in dark mode.
Designers-Developers’ communication
Improve the common language
The creation of the semantic layer took time and was a somewhat Sisyphean process, as it required changes on thousands of screens and states created during more than 8 years of coding. However, once established, we learned that using the semantic layer was in fact quite intuitive and simple.
The layer was integrated into our internal Fiverr UIkit libraries in Figma, which contain our design system components. After that, we could use the Appearance plugin to switch between light and dark modes easily, without writing a single line of code.
On the developers’ side, the work began by setting up an asset catalog with all the semantic names and then assigning UI elements with the new given names from Figma. Eventually, the new semantic layer strengthened the common language between the different departments involved in the process, making design handoffs between designers and developers much more efficient and straightforward.
Moreover, after the developers got used to the new color system, they suggested creating a higher-level layer incorporating other design elements such as text style. For example, all the main headlines in our app were displayed with a specific color label and a specific text style, “primary label color” and “Title 2”. Therefore, we created a third layer combining them, making it easier to use throughout the app. This kind of process is an example of how this project made the two departments work together and achieve a higher level of efficiency and better teamwork.
Through this project we managed to upgrade our color system and refactor thousands of screens, allowing designers and developers greater flexibility and speed. The new color system serves as a foundation for many future features and initiatives, so in fact, working on the dark mode has paved the way for a brighter future.
