Come to the dark side
How, when and where should dark mode be used in user interfaces?
The idea behind dark mode is to reduce the light emitted by devices while maintaining the minimal color contrast ratios required for readability.
What appears to be a new trend dates back to the early days of computers and user interfaces. Computer screens were originally in a sort of "dark mode" due to their capacities at the time. However, to encourage non-programmers to use computers, interfaces were adapted to resemble black text on white paper.
Nowadays, we still debate whether Dark Mode improves readability or extends battery life. What we can't ignore, on the other hand, is that Dark Mode is more suitable for certain products. Spotify is an example of a product that only exists in dark mode. We can hardly imagine it having a Light Mode design. Most products today are designed in both light and dark modes, and users can choose which one is more suitable for them.
So we as designers need to be aware of the advantages and disadvantages dark mode can have and how to design it accordingly.
PROs
-
Dark mode saves energy when used on OLED or AMOLED screens.
-
It reduces eye strain when reading in darker lighting conditions.
-
Since most of the screen is dark, screen reflection is reduced, minimizing flickering and blue light.
CONs
-
Readability. Depending on contrast, dark mode can be harder to read. This is especially true for longer paragraphs of text and in brighter lighting conditions.
-
Not all colors are suitable for dark mode, so it can be difficult to match predefined brand colors. Colors also convey different emotions on darker backgrounds than on lighter ones.
-
Design may appear cluttered due to lack of "white space" as darker colors do not provide the same breathing space as lighter colors.
-
Some users are only used to light modes and just don't like the darker ones.
Tips and tricks
1. Avoid pure black and white.
Reducing the contrast between white and black reduces eye strain:
2. Avoid saturated colors
Saturated colors often do not meet WGAG's accessibility standard. In contrast, choosing less saturated colors improves readability and reduces visual vibrations.
Since colors convey different emotions in both light and dark modes, adjust and expand the color palette for dark mode: