Aspects to take into account when designing for dark mode
Usually, as a designer working for a bigger company, you don’t get to be at the decision making of every single design aspect. Some things just arrive at your desk and you’re supposed to use them as-is. And that is fine.
Nevertheless, I try to always test everything that I have to work with. Mainly because we are all humans; we all do mistakes, and… there are usually always things we overlook.
I have made tons of mistakes over the years as a designer, so I learned to force myself to check things thousands of times; including my own work, which is the most difficult part and where most of the errors happen as we are saturated with looking at it.
I try to think of everything as a work in progress. Nothing is ever perfect. This approach helps me focus on the detail and to make sure I double-check everything, even those things that get to my desk designed by a hell of a lot better designer than me; but also to do further iterations in the future and not settling for what I might already have.
When I was told that dark mode was going to be an automatic conversion of our light mode color palette I decided to put it to test. The first thing I did was talking to people from the developing team, to understand how dark-mode worked and how this conversion was going to be implemented; as well as to get some insights from their side as experts on the topic. I sat down with both light and dark palettes and did tryouts on some screens I was working on. Here I want to share two important issues I stumbled upon while working with dark mode.
COLOR: contrast / intensity
Generating contrast against white is challenging, and against darker colors even more. The main problem I encounter when applying our dark mode was that the colors chosen to work against dark backgrounds were too strident.
When we mistake contrast with intensity it happens that we generate the opposite effect we firstly intended — which is to make a clear and legible dark mode — ending up with a palette that difficults the reading and causes eye fatigue. A good solution to avoid this, contrary to what a lot of people would assume, is using tamed color schemes when applying them to dark mode.
In this regard, Windows did a great job of designing its dark mode. The change from light to dark mode seems natural and it’s not distracting.
ELEMENT IDs: white on white
Another obstacle we were facing is color IDs and definition. It is crucial to have a proper color definition and naming so that the conversion to dark-mode flows seamlessly.
With designs in which there are white elements against white background this is not to be overlooked. The way we used to separate white elements on a white background was using shadows, but in dark-mode, we lose those shadows. So, it is important that we do a good translation not only of colors but of elements.
Not doing so, will end up with a design in which we lose elements like white cards against the white background; the same as with all other white elements you might use in your design.
When working with design systems there are added topics to bear in mind when working with color. In those cases, we need color to work as a whole within a set of well-defined elements. If you are interested in the topic and want to dig deeper, Marcin Treder has meticulously described the process of applying a color palette to a design system; the problems that arise and how they tackled them. Søren Clausen also wrote a detailed article talking about how to use color based on the right definition of the elements used in the UI.
Material design has an entire study on how they manage color and elements when applied to dark mode.
I am very insisted when it comes to color because I find it to be one of the main pillars in design. Color expresses and helps understand a design.
And, regarding naming and choosing the right IDs; as everything we do alongside developing team, it needs to be coherent so that it makes work easier for both design and development; and to avoid having unpleasant last-minute surprises.
As always thank you for reading and I hope it was somehow useful :)
