Designing for Dark Mode
What goes into designing for dark mode? Why should I care about dark mode?
“In general, all of your apps should support dark mode. When the people use your app set their device to dark mode, they’ll expect your app to change as well.” Mike Stern, the Design Evangelism Manager at Apple.
From the resurgence of Dark Mode a few years ago, first in apps, then in the release of Mojave, followed by Chrome, Android, and eventually, iOS13, the Dark Mode trend proved that it’s here to stay. And, as mobile usage continues to rise and phone screens increase in size, Dark Mode is more than just personal preference. It’s become ubiquitous; “apps that don’t have it seem like they’re shining a flashlight in your eyes by comparison.”
Let’s explore the staying power behind dark mode and why adding it to your app has substantial benefits.
How does Dark Mode benefit the user and increase user retention?
- Saves battery life (60% reduction, according to Google).
- Reduces eyestrain. It blocks harmful blue LED light, which is damaging to vision and getting a proper night's sleep.
- Shows that your company is trend-focused and cares about the user’s overall experience.
But, designing for Dark Mode is more than just inverting colors. In fact, this “quick fix” is likely a detrimental one. It’s within the designer’s best interest to uphold the product’s purpose with thoughtful, intentional design while meeting accessibility requirements. The following outlines best practices in designing for Dark Mode:
Color
Instead of a pure black background, choose a dark grey like #121212, for example. This is important for a number of reasons. In a Google Design presentation, Javier Lopez expresses, “Dark grey surfaces can express a wider range of color, elevation, and depth because it’s easier to see a shadow onto of a grey color instead of a black color.” We will cover why conveying depth is important in the following section. It’s also worth noting that a dark grey background aids in reducing eye strain, which is crucial in maintaining user retention.
While it’s important to uphold brand colors, some highly saturated colors may cause unwanted vibration against the dark background. Google’s Material Design suggests for saturated colors to be decreased to fall between the 50-400 tonal levels in order to meet WCAG standards. Keep in mind that too much color on a dark background can feel distracting and at times, overwhelming. Using brand colors as accents will create a clean and focused UI, allowing the user to easily navigate through the product.
Elevation
Think of elevation in terms of layering elements in order to communicate hierarchy. Lighter elements on a dark background, for example, indicate higher elevation. Because the dark background is not quite pure black, adding a pure black drop shadow to elements (e.g. cards) successfully enables visual hierarchy. Elevation is essential to creating a seamless user experience.
Illustrations, Photos & Video
It’s a delicate task to preserve the artistic integrity of an illustration from Light Mode to Dark Mode. As a general rule, adjust the background of the illustration to greyscale while highlighting the foreground of the illustration with color.
Seeing photos and videos with clarity is one of the reasons why we’ve seen a shift from Light Mode to Dark Mode. As for photos and videos that clash with the dark background (for example, colored logos), adding a white box behind the element is a workaround that will maintain the quality of the image.
As we see the Dark Mode trend continue to gain popularity, the importance of implementing Dark Mode into your design is paramount. This study shows that 82.7% of people use Dark Mode on their operating system, and of that group, 64.6% of them expect Dark Mode to automatically be applied to the web pages and apps they open. Designing for Dark Mode makes “UI feel more expansive and integrated with the hardware itself.” With a majority of users seeing the benefit of Dark Mode, they now widely expect apps to maintain their visual preferences. Whether it’s adding a second Dark Mode theme to an existing app, or simply designing one theme in Dark Mode, it’s a trend with staying power, that’s not going away any time soon.
Ready to start a project?
