The Future Of Dark Mode Interfaces
We are now aware of what's happening with interfaces nowadays. Dark mode becoming more and more popular on different platforms and apps.
Live Dark Mode solutions
Apple introduced dark mode for iOS 13
Android did the same even earlier.
Dark mode isn't an entirely new concept
It has been around for quite some time already. Moreover, the first computers with displays and operational systems like MS-DOS had dark terminals by default.
Dark Mode Benefits
There are several reasons for adding dark mode to apps and systems nowadays.
Evening and night screen time
First of all, we use our screens more and more time. That's including day, evening, and often night time. We now spend an average of 24 hours per week looking at screens compare to only 9 hours in 2000.
Having a dark mode makes it easier on the eyes to scroll through your feed, check messages, read articles one last time in bed before going to sleep. Moreover, it can take a couple of hours of screen time. Your eyes will say thank you if you use a dark mode.
The bright screen can disrupt natural sleep cycles due to the body's natural clock gets pushed back. It might not be a big issue in the beginning, but it leads to some health issues in the long run.
Dark mode can benefit some users with specific health conditions that are irritated be bright lights. Photophobia is a condition that makes people sensitive to light. Using dark mode can also help those who suffer from migraines.
Another reason is innovations behind screens. Latest flagship models of phones in most of the cases have OLED screens that don't require a backlight as in the case with LCDs.
Also, this is something that improves your battery life. So dark pixels do not drain your battery that much as on LCD where it's pure light the entire screen, even though most of it is black.
So if you or your users into Sci-fi and Cyberpunk movies then Dark mode makes your apps look cool and futuristic. I believe this is something that we can use in the marketing strategies of products.
Thinking about others
Using Dark Mode is an excellent way to do what you do and do not disturb others in places like planes, cinema, and other places with a dim light or completely dark environment.
Dark Mode Design Specifics
Dark vs. Pitch black
The most common misconception is that dark is equal black or #000000, but that's not actually true. Pitch black color is n for UI elements on it. For example, you can't use shadows on a pure black background.
Also, since completely black pixels temporarily switch off these parts of the screen, it can work not so smoothly because the OLED screens technology still requires some time to turn these pixels on. So in cases like scrolling fast content or switching between screens, it can look dirty.
Using the same colors as in the light version of an app
The good news is that in most of the cases you don't need to think about an entirely new color palette for your app specifically for the dark mode. However, sometimes it's impossible to leave the same colors, and you need to tweak them a little, so they work correctly for the dark mode.
There is a quick hack that you can use to convert your color palette to make it work for the dark mode. Try adding an extra 40% white layer on top of colored elements like buttons, texts, messages and in general. It is not the only thing you can do, but you can try this as a starting point and then continue tweaking colors and testing everything, so it has a good contrast ratio, the text is readable.
White text in a Dark mode interface
The only problem here is that if you put 100% white text on a pure black background, it can decrease the readability of the text. Same goes for a pure white background on a 100% black text because it reflects too much light to focus on the words. So in case of a dark mode, try to decrease the intensity of the white text. 95% or 90% should work. It can help to prevent eye strain.
How do OLED display save power if pixels are not pure black?
Taking into account use cases about eye straining and text readability I described above you might think that there is no point of having a dark mode on OLED screens after all. However, on and off are not the only two states of OLED screens pixels. As the colors change from black to white, power consumption gradually increases. So at the end of the day, a white screen generally ends up consuming more power. Dark themes perform better than light themes in terms of power consumption.
Can an app be completely dark without a light theme?
It might be the case in the future when we have the next generations of OLED displays or even better screen technologies.
Currently, it's quite challenging to use dark mode in the day time, notably, in a bright environment and if you have reflections from shiny objects. The solution here can be improved brightness of OLED and a way to reduce reflections on screens. It is something that might make it possible to use a dark mode all the time.
We can't change it with a design only, but we can prevent having a poor user experience by providing users with two versions: light and dark, at least for now.
Latest Dark Mode Design Examples
Dark Mode in iOS 13
Nightfall Dark Mode Design System
Dark Theme in Material Design
Our eyes are not used to so much screen time. Especially late in the evening. The dark mode is a solution, and it's better to have it to cover all the use cases people might have.
The only reason not to implement a dark mode is if you 100% sure that your users are using it only in a day time, but I think it could be a rare case.
Also, I recommend you to think about the way of how to have the ability to switch to dark mode automatically when the time is right.
For example, if you use Night shift feature in iOS, you might know that there is a way to automatically switch it on during sunset time and switch off on sunrise.
Another example is the Twitter app. The Dark mode in the app switches automatically. I found it useful in cases like if you, for instance, didn't use your phone for a couple of hours during sunset hours and then decided to check Twitter. Instead of killing your eyes with the bright screen, it automatically shows the dark version of the app, which is gentle on your eyes and feels like it should be this way everywhere in iOS.