YouTube has dark mode so do Twitter, Facebook, Linkedin, Google, and countless other apps. But is Dark UI the right thing for your app, what are the best practices and tips when it comes to implementing dark mode?
Although the dark UI trend is becoming ever more popular in recent years, it is not new. It is a predominately dark color UI. Darker colors are used for the background and large page elements, while lighter colors are used for text and text elements.
Dark mode does not mean black mode. It is NOT a black background and white text.
Google’s Material Design dark theme recommends using dark gray (#121212) as a dark theme surface color “to express elevation and space in an environment with a wider range of depth.”
You need to steer clear of pure black as it is hard on the eyes.
Also, dark mode does not mean color inversion. This is what most of the dark mode extensions are doing - inverting the colors. Not only does it look weird, but you are also turning colors that had a psychological purpose into meaningless ones.
One recent example of a really poor dark mode execution is the dark mode introduced by LinkedIn in late 2021. This is not what dark mode is supposed to be.
Twitter was one of the first big tech companies to introduce dark mode to their platform. The design went through several changes, but what is important here is that it is very well designed.
A comparison of light and dark mode on Twitter
A serious red light that going “to the dark side” might not be a good idea is usually one of those:
Avoid saturated colors. Use low saturation or slightly muted versions of your primary colors. Desaturated colors in combination with dark (again, not black) backgrounds create a visually appealing and more importantly easy on the eyes UI.
Color saturation and primary color selection (900-50 are tonal variations). (Source: Material Design)
Avoid crammed interfaces. Illustrations, buttons, different content types, and other design elements can quickly overcrowd the screen. Stick with the minimalist approach and make sure your creation is easily scannable to improve the user experience. To put it differently - make sure there is enough “white space” (not literally white, of course) so that it doesn't feel cluttered.
Since small text on a dark background is harder to read, consider a large enough font size for good legibility
Make sure there is enough contrast between the text and the background.
Why depth in the first place? It is used to create a visual hierarchy of an interface. In light mode, illumination, shading, and shadows are mostly used to create that sense of depth. In dark mode, those tools of the craft don't apply and you need to avoid them.
One of the key instruments to create depth in dark mode is to use brighter colors closer to the user's objects.
A key thing to remember here is that you need to limit your color levels up to 4 or 5.
Elevation principles formulated by Material Design
As stunning as it might look the end result, make sure to include a toggle to allow users to switch between light and dark mode.
The decision to go for dark instead of light UI, although seems simple, can be really detrimental. Make sure you consider all the important factors and more importantly understand when dark mode can be beneficial, and when it can hurt the overall performance of the product you are designing. Don't follow the trend blindly, make sure your decision is fact-based, and not emotional.
The key thing to understand is that Dark themes are not suitable for all products. A critical element of the dark theme is its simplicity. If you are looking to present minimalist content, data visualizations, media sites, and entertainment platforms - a dark theme is the way. If you are in charge of designing complex, data-rich platforms, and pages with a lot of text - think again.