Dark Mode Design Principles: RaiseMe iOS Dark Mode theme
Best practices for designing dark mode versions for applications using the RaiseMe iOS app as a case study.
In 2019, chances are high your favorite app has a dark mode feature. With the introduction of iOS 13, this became the standard for many apps. Prior to this year, this feature was an afterthought for most consumers and designers, but once the release it even surpassed the search popularity of Kim Kardashian. To say there is a hype around dark mode would be an understatement. The idea of dark mode itself isn’t new — it’s been a long-requested feature of your favorite products like Instagram and Twitter, but was shelved because of product priority. With the introduction of iOS 13, Apple did most of the leg work for all of us with the introduction of UIKit.
YouTube, Instagram, Twitter, and Pinterest all took notice and were the first to release dark mode themes. Although it’s the shiny new thing, the verdict is still out on the effects of dark themes. Google has reported that for apps like Youtube using dark themes at 100% screen brightness the theme was saving 60% screen energy. Outside of battery usage, dark mode is easier to look at in low ambient lighting and provides a greater focus on the content. With dark mode becoming a default option in iOS settings and being offered by more products, there are a couple of principles to keep in mind before designing dark themes.
Disclaimer
There is no perfect way to go about designing for dark mode. While Apple has released the Human Interface Guidelines for designing Dark Mode and Google has Material Design Guidelines, they are simply that, guidelines. For dark mode to be effective it should be molded specifically to your brand and content. Following the guidelines strictly won’t accomplish that but using what works best for your app will.
Content comes first
If you’ve read any articles about dark mode, you know by now it’s not simply inverting the colors. Designing dark mode gives you the opportunity to take inventory of existing designs and not only judge their consistency with the brand, but their function in the new UI proposed by dark mode. You might be surprised to find some things are off-brand in order to meet accessibility standards.
Elements in your app may need to be tweaked to fit accessibility standards. For our app, we needed to adjust the color of our CTAs to meet accessibility standards based on the choice for background color. The introduction of this new blue needed to fit within our current design system. Accessibility is one of the major proponents of designing for dark mode. In addition to reshaping your color palette, changes may need to be made to your design system.
On the development side, a couple of choices can be made. A designer can make their themes from scratch or choose to adopt some of the provided APIs made available by Apple in iOS 13. One feature of the API is its dynamic color-provider method, which generates colors that automatically adapt to dark mode.
Components, colors, and interactions should all be complementary to the content displayed
Your content should be the first and foremost priority. Components, colors, and interactions should all be complementary to the content displayed. In Instagram’s dark theme, it’s hard to tell exactly where the “link in bio” is. The color used for the hyperlink is all too similar to the color used for non-linked copy. Sticking within their palette and using the blue for verified users as the hyperlink highlight allows it to stand out among the rest of the copy. Primary and secondary colors should be distinguishable from one another.
More than just a color palette
Outside of retooling colors and fonts, components of your design system may need to be retooled as well. Card Elevations are important in which surfaces are elevated higher than others. Use color contrast to differentiate between the foreground and the background.
A variation of shadows, grayscale and opacity helps communicate this to users. Google’s Material Design provides great guidelines for choosing a background color.
Stay true to the brand
Saturated colors may work well for light mode, but they won’t work well for dark mode. While going through all these adjustments to your design systems, one principle to keep in mind is to stay true to your brand. Your brand has a specific voice, tone and feel which should be consistent in both ambient mode and dark mode. When brand colors don’t contrast well with your dark mode theme, take an opportunity to use them as accent colors. Accent colors allow you to stay true to the brand while keeping consistent.
For our Portfolio category headers, we opted to strip out the background color and use it for the header font color. Every article spewing principles may not apply to your product (this one included). Chances are if you’re thinking about dark mode, you already have a design system, patterns, and elements. A good dark mode design leverages those.
A good mirror is the best view
One of the biggest parts of designing dark mode — for mobile apps specifically, is choosing your foreground and background colors. Choosing these correctly will affect color usage, accessibility, interaction states, and transitions. The goal is not to drastically change the look and feel of your app, but have dark mode mirror your light mode build. While colors and accessibility ratios may change, interactions, transitions, and flow should not.
Google’s Material Design has a great guide for selecting these colors and best practices. Although their colors are almost universally sound, make sure to choose colors that match your brand — not just those from third-party guidelines.
When choosing a background color, consider a dark grey background, as they provide more legibility than pure black backgrounds and are easier to showcase shadows for elevations. As your dark theme grows, you’ll find additional use for grayscale depending on the design component.
Test your design in both light and dark mode. Consistency is key and this can only be achieved through thorough testing and iteration.
Going forward
We’re still in the early stages of dark mode design and truthfully we don’t know much about the impact on readability for people without impaired vision. Although many people have written about dark mode at length, we’re still unaware of all of the benefits. Studies from 2013 show positive polarity (white text on black backgrounds) have benefits for both older and younger populations, while polarity shows no real difference in accommodative response. While it may be a trend now, it’s for sure here to stay.
If you’re a student looking for scholarship money, make sure to download the iOS app and check out RaiseMe here.
