The future is dark.
Things to keep in mind when designing a dark mode for your app or websites
2018 already made it pretty clear: dark modes were coming. Now that we’re already halfway 2019, we can safely say: they’re here and they’re everywhere.
Let’s start with saying that dark mode isn’t a completely new concept. It has been around for quite some time already actually. In the really old days, dark mode was all there was: monitors were green-on-black, but only because the phosphor coating on the inside emitted the greenish glow when hit with radiation.
But even after the introduction of color monitors, dark mode lived on. So why is that exactly?
Scrolling all day, err’day
There are two main motives explaining why everyone rushes to add a dark theme to their app nowadays. First of all: computers are everywhere. Everywhere we look, there’s some sort of screen. We use our mobile devices throughout the entire day and night. Having a dark mode makes it easier on the eyes to scroll through your feed one last time in bed before going to sleep. (If you’re like me, that “one last time” might mean a 3-hour long scroll through r/EngineeringPorn. Dark mode? Yes please! 🌚)
Another reason is the constantly innovating technology behind screens. Flagship models of the bigger companies -Apple, Google, Samsung, Huawei- all have OLED screens, which -unlike LCD displays- don’t require backlight. This is really good news for your battery life. Imagine you’re viewing an image of a black square on your phone; with an LCD display, the backlight would light the entire screen, even though most of it is black. But when viewing the same black square image on an OLED display, the pixels that make up the black square would simply be turned off. Consuming zero energy.
These types of displays make dark modes a bazillion times more interesting. By providing a dark interface, you’re able to extend the battery life of your device enormously. Check out some facts & figures from last November’s Android Dev Summit to see for yourself. Dark modes do come with some UI adjustments, obviously, so let’s get you up to date!
Dark modes 101
First of all: “dark” is not equal to “black”. Don’t just change your white background with a black one, since this will make it impossible to use shadows on objects. This will make your design look super flat (not the good kind of flat though)
It is important to keep some basic lighting-shading principles in mind. Objects that are more elevated, should be lighter in shade, mimicking real-life lighting and shading. This way, it’s easier to distinguish different components and their hierarchy.
In your dark theme, it’s still possible to work with your usual primary color, as long as the contrast is okay. Let’s explain with an example.
In this interface, your primary action is a big blue button in your bottom bar. There’s no real issue in terms of contrast when switching between light or dark mode, the button still draws all the attention, the icon is clear, all is well.
When that same color is used differently, in text, for example, problems will arise. Consider using a (way) less saturated shade of your primary color, or look for other ways to incorporate your brand colors into your interface.
Same goes for all other saturated colors you might use, such as warning or error colors. Google uses an extra 40% white layer on top of its default error state color in their Material Guidelines to use as a new color when switching to dark mode. This is a pretty good point to start from, as this will improve contrast levels in order to pass AA-level standards. You can of course always tweak these colors to your choosing, but make sure to check your contrast levels. A useful tool for this is the Stark plugin for Sketch by the way, which tells you exactly how much contrast there is between 2 layers.
What about text?
The rules are simple here: nothing should ever be 100% black on 100% white and vice versa. White reflects all wavelengths of light, black absorbs it. If you put 100% white text on a 100% black background, the letters reflect light, scatter and become harder to distinguish from each other, affecting readability.
Same goes for a 100% white background, which reflects too much light to fully focus on the words. Try softening the whites a bit, use light grays for backgrounds and for texts on black backgrounds. This will be easier on the eyes, preventing eye strain
Dark mode is here and it’s here to stay
Our daily screen time is going up every day, and every day, new screens are added to our daily routines, from the moment we wake up till we got back to sleep at night. This is rather new, our eyes are not used to so much screentime so late in the evening. This is where dark mode comes in. With the introduction of this feature in both macOS and Material Design (and most likely iOS) we believe it will become a default feature in all apps, both mobile and desktop. Better get prepared!
The only reason not to implement a dark mode is when you’re absolutely 100% certain your app is exclusively being used during bright daylight, but this is rather exceptional.
There are some things that need extra attention when implementing dark mode, apart from the basic principles we summed up earlier.
In terms of accessibility, dark mode isn’t the most user-friendly, since contrast is overall lower, which doesn’t really improve readability.
But, imagine you’re ready for bed, very sleepy, but just before you fall asleep, you remembered to send someone a super important text that couldn’t wait another night. You take your phone, light it up and AHHHHH… The light background of your iMessage keeps you awake for another 3 hours. While light text on a dark background isn’t considered to be maximumly accessible, having a dark mode right that second would have improved usability by a million. It all depends on the situation your user is in at that moment.
This is why we think automatic dark mode is such a nice feature. It turns on in the evening and off again in the morning. Your user doesn’t even have to think about it, which is truly great usability. Twitter does a wonderful job with their dark mode settings. On top of that, they have a dark mode AND an even darker mode, for those OLED screens, saving battery and all. Important to add: Give your user the choice to switch back manually whenever he pleases though, nothing more frustrating than an automatic change of the entire interface that can’t be overruled.
Another thing to keep in mind when designing the feature for your app is that some things just can’t be made dark.
Take a text editor like Pages for example. You can make the interface dark, but your sheet will always be white, resembling a real-life sheet of paper.
Same goes for all kinds of content creators, like Sketch or Illustrator. While the environment you’re working in might be switched to dark, the artboard you’re working on will always be white by default.
So no matter the app, we believe dark modes will become native to the operating system you’re using, so best get ready for the future, it’ll be dark. 🌚
If you want to read more about designing dark interfaces, make sure to check out the Material Design guidelines, this was our main source of information for this article.