Lights off! How to design for dark mode? 🌗 | Grab a Coffee ☕️ #19

#19・
37

issues

Subscribe to our newsletter

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy and understand that Grab a Coffee ☕️ will receive your email address.

Grab a Coffee ☕️
During my stay in Lofoten Islands in Norway I was able to experience the midnight sun. This means that it is daylight around the clock. When the weather was good, I often stood on a peak at midnight and watched the passing sun on the horizon of the North Atlantic.
If I got home sometime in the early morning hours, I wasn’t tired (even without coffee ☕️😄). My body didn’t understand that it was in the middle of the night because it was as bright as day outside.
Light has an enormous impact on our perception. But not only natural light and colors, but also that of our screens and the programs that flicker across them every day.
You can already see where this is going today — it’s all about light, or just dark mode. 🌓

🌑 What is dark mode?
Dark mode is when the background and most elements of an app or website are dark and the font is in a very light shade.
Dark mode has become more and more popular during the last years and many apps and websites offer users the possibility to switch between dark and light mode.
🌃 Why to use dark mode?
Of course, dark mode is not just a fashion statement, and there are good reasons for it. Designing a digital product in dark mode requires a lot of effort. So what is the reason for making this investment in order to design a product in dark mode?
  • When combined with the right colors, dark mode can look very modern and/or luxurious.
  • For OLED displays, dark mode requires less energy and thus significantly extends the battery life
  • Dark mode is a relief for the eyes in low ambient light conditions
  • It increases accessibility for light sensitive users
  • With a light-dark toggle you give your users the freedom to decide for themselves
🌜What are the challenges of dark mode?
If you want to design an additional dark mode for your app or website, you should consider the following challenges:
Checking for contrast — Make sure that the contrast between dark background and light text is high enough so that the text is easy to read and icons stand out well. 
The color contrast is given as a ratio and the best way to measure this ratio is to use the Figma plugin Contrast
How dark is dark — Pure white (#FFFFFF) on pure black (#000000) is not very user-friendly, because the contrast is too hard and this can lead to problems in visual perception. 
Switch to a dark gray (e.g. #242424) for the background and a very light gray (e.g. #F7F7F7) for the font color. This will reduce the contrast and simplify the perception.
Difference between hard and soft contrast using different colors instead of pure black and white.
Difference between hard and soft contrast using different colors instead of pure black and white.
Elevation through contrast — In dark mode, you can’t use shadows to make elements stand out from each other. But there is another way to bring hierarchy into your design. That’s because in dark mode designs, you work with brightness. So an element that overlays another would have a lighter background than the one below it.
Fitting colors — The same colors often look different on light and dark backgrounds. Therefore, when you design a dark mode, you should not only change the layout, but also check the effect of the colors used and possibly create your own color palette for the dark mode design. 
🌚 Dark mode best practices
Spotify is definitely a great source for design discussions and for dark mode. They explained quite well why they changed their green color for the play button and all the thoughts behind this decision.
ClickUp offers its users the dark mode in addition to the light mode. In addition, users can also change the primary action color and thus customize quite a lot in the design to their own needs and preferences. 
Dark mode and color theme choice for ClickUp users.
Dark mode and color theme choice for ClickUp users.
Need more inspiration? Then do a search on Dribbble for dark mode and click through the results. 
While I’m not a fan of Dribbble as a source for the best user experience, when it comes to UI element design, there’s definitely a lot to discover here. And many of the dark mode designs are definitely worth a look. 
🌒 Switching off the lights
Thank you so much for reading so far and I hope you learned something new. Because that’s the goal I want to achieve: sharing with others to grow together 🚀 (and drinking good coffee).
If you would like to support my work and with that help other people to find their way into UX/UI industry, you can support my mission by buying me a coffee here. ☕️
Need more insights? Follow me on Twitter or Instagram and please share the Grab a Coffee ☕️ newsletter with your friends, colleagues and all other people who could be interested.
See you next week with new topics and an amazingly good cup of coffee. ☕️
Marina 👋
*****
Need a mentor? Reach out! 🚀
Did you enjoy this issue? Yes No
Marina
Marina @marina_kdot

Grab a coffee and read weekly news on UX and UI Design, breaking into tech and remote work.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Ch. de la Plâtrière 3 | 1981 Vex |Switzerland 🇨🇭