Dark mode is no design trend. It’s part of essential usability.
It’s nice to see how many companies nowadays recognize that many users want dark mode. A pioneer here is certainly Twitter, which was one of the first major platforms to integrate dark mode. If you look around the relevant design platforms, you will quickly notice that dark mode has not only made it into a feature, but also became a stand-alone design trend in 2020/21.
An example of a design feature is Spotify, which does not provide the user with a light mode option, but only a native dark mode. Anyone who’s ever used Spotify on a laptop outside in broad daylight will now find themselves faced with the following problem:
Dark mode is not a choice.
The problem with dark mode
Some users permanently prefer dark mode. However, for the broad mass of users, dark mode is to be seen more as a usability feature. When I work with the laptop during the day, sit outside on the balcony or terrace, I am at a decisive disadvantage with dark mode. Dark applications or websites are much more difficult to see in a bright environment and cause a lot of eye strain due to the weak contrast.
Apple introduced the first version of Dark Mode for MacOS Mojave without an automatic light / dark change. As a result, there were major complaints about the missing features. This feature was added in the next updates. Until then, users could switch via apps such as Night Owl.
The dark mode automation should not be linked to Night Shift, but to the ambient light sensor.
Unfortunately, the automatic change still relates to the Night Shift settings. These, in turn, refer to the time of day, which is often not a statement about the lighting conditions. I can sit in a brightly lit office at 8 p.m. or in a darkened room for a presentation in the afternoon. Therefore, the light mode / dark mode automation should be linked to the ambient light sensor of the device and act independently of nightshift.
Implementation
Make sure to implement the dark mode in such a way that the user has the choice to synchronize the setting with the system or to switch easily between light and dark mode using an easily accessible switch. Github.com should be mentioned as a positive example. There, in the user settings, either light / dark mode or synchronization with the system settings can be selected.
Dark Mode CSS media query
//Do not choose black and white, because high contrast causes eye-strain
body {
background-color: Snow;
color: MidnightBlue;
}
@media screen and (prefers-color-scheme: light) {
body {
background-color: MidnightBlue;
color: Snow;
}
}Dark mode is not a question of design, but an essential part of the natural operation of an app / software. The functionality must remain unaffected by the dark mode. It is important to ensure that interactive elements can still be recognized as such.
Automation is good, but it can’t possibly predict every situation. Therefore, the user should have the free choice of the application’s light / dark mode. For this it is important not to hide the setting deep in the system, but to make it easily accessible. Toggles with which you can switch between the modes have proven particularly useful.
Contrast & Health
As can be seen in the example above, hard contrasts such as black and white should be avoided. Instead, dark gray values or a corresponding tone value can be selected for text / backgrounds in order to reduce the strain on the eyes.
“58 percent of adults in the U.S. have experienced eye strain from working on computers.”
Future outlook
In the future it will hopefully not be a question of design, but of essential usability of an application, whether a dark or light mode is available. This presents companies with the challenge of optimally positioning their brand in both worlds. This initiates another major split from the print industry, in which a static corporate identity is usually chosen regardless of the time of day or lighting conditions.
