Summary
monday’s dark theme was a long requested feature by people
who prefer using dark themes, but also by people with various
health conditions who can’t tolerate bright screens.
who prefer using dark themes, but also by people with various
health conditions who can’t tolerate bright screens.
My role
Lead product designer
Key responsibilities
Creating a new color system, directing and guiding designers and developers in execution
Requests piled up
Dark theme was one of the top requested features
Once upon a time, monday only had a bright, white interface. However, we soon noticed an increasing number of requests for a dark theme. Many users simply preferred working with a dark theme, while others had health issues that made white screens difficult or impossible to tolerate. To cope, these users resorted to browser extensions to invert colors, which often resulted in a poor looking UI.
Once upon a time, monday only had a bright, white interface. However, we soon noticed an increasing number of requests for a dark theme. Many users simply preferred working with a dark theme, while others had health issues that made white screens difficult or impossible to tolerate. To cope, these users resorted to browser extensions to invert colors, which often resulted in a poor looking UI.
House in order 💂🏻♀️Color mapping Up to this point, monday’s designers used a color library in Figma where colors had random names rather than names tied to specific UI elements. For instance, we had to remember that the “Gray wolf” color was used for dropdown borders. This led to inconsistent color usage across the platform.
My first step in creating a new theme was to map all the colors used in the platform and label them according to their associated UI elements. During this process, I discovered many duplicates, such as five nearly identical blues used for primary buttons. This presented a valuable opportunity for color alignment and cleanup.
After mapping the colors for monday’s light theme, I moved on to the exciting part: converting them into dark colors.
My first step in creating a new theme was to map all the colors used in the platform and label them according to their associated UI elements. During this process, I discovered many duplicates, such as five nearly identical blues used for primary buttons. This presented a valuable opportunity for color alignment and cleanup.
After mapping the colors for monday’s light theme, I moved on to the exciting part: converting them into dark colors.
ImplementationDarkathon time!
The mapping part was over, and it was time to start working. I organized a dark theme hackathon, a.k.a ״Darkathon״, with design and developer representatives from each of monday’s domains. Together, we began converting the colors of the different parts of the platform into the new color variables. It was an exciting and intensive day, during which we identified and resolved many issues on the go.
The mapping part was over, and it was time to start working. I organized a dark theme hackathon, a.k.a ״Darkathon״, with design and developer representatives from each of monday’s domains. Together, we began converting the colors of the different parts of the platform into the new color variables. It was an exciting and intensive day, during which we identified and resolved many issues on the go.
For some extra fun, I created this Zoom background for us to use during the Darkathon (we had a thing for llamas):
OutcomeThe dark theme is still live and kicking 💪🏻
After releasing the dark theme to users, we gathered feedback and continued fixing small bugs found in hidden areas of the platform. Ultimately, the dark theme was a great success and became a cornerstone for a better-defined color system, enabling consistent designs and paving the way for additional color themes to be added to monday later on.
After releasing the dark theme to users, we gathered feedback and continued fixing small bugs found in hidden areas of the platform. Ultimately, the dark theme was a great success and became a cornerstone for a better-defined color system, enabling consistent designs and paving the way for additional color themes to be added to monday later on.