Designing for Dark Mode: More Than Flipping a Switch
5 things the Outlook mobile team learned about scaling dark mode design
By: Wayne Sun and Joe Woodward
Imagine you’re tasked with implementing dark mode. You look around for standards, only to find a wild west of creatively applied themes in third-party environments. Hours turn into days. The darkness consumes you, and the answer becomes more distant with every keystroke. Meanwhile, dark mode continues to climb as a top customer ask in your feedback channels. The pressure’s on. What’s clear: people want dark mode. What isn’t: how to do it in a way that’s scalable without losing the product’s soul.
This isn’t as easy as it seems. Designing a cohesive, maintainable dark mode that makes existing creature comforts feel fresh seemed like a daunting task to the Outlook mobile design team. But after chatting with a few people in the community, we know we’re not alone. We’ve found five things to think about when designing for dark mode, and we hope you’ll find them helpful too. Let us know what you think in the comments!
1. Stay true to core product identity
To begin, we examined our product identity. For Outlook mobile, the combination of email and calendar is key. People use our product to tell them important information, and we need to serve that purpose well in any environment. Throughout the course of our journey, we made sure to protect the way people composed and read emails, and how they understood their schedules.
We also don’t live alone. Outlook mobile is a part of a bigger family, so we needed to bring all our other mobile apps along and ensure a consistent experience. For example, Outlook would have to look and feel familiar to a user coming from Word.
Microsoft 365 mobile prioritizes preserving continuity and collaborative promise for the user. As part of that effort, we constantly try to balance functionality, usability, and quality in Outlook mobile. It’s what helped us earn our reputation, and we can’t forget our roots.
2. Pure black is mobile friendly
To understand what surface colors made sense for us, we collaborated across Microsoft Design. The work that came from Fluent Design on web and desktop served as our north star. We explored various surface color variations and decided on a mobile-first direction. Here’s why we chose a pure black surface:
- As we refined our explorations, we discovered that pure black saved battery life.
- Neutral grays lived in harmony with time-of-day color temperature shifting such as TrueTone and Night Mode.
- Black surfaces gave us flexibility with other UI elements, such as cards, dialogues, and toolbar elements, all of which served as context signaling for the user.
- Pure black gave room for buttons and dialogues to separate from the base. The base was a starting point which served as a backdrop for accessibility-friendly fill colors and text.
Once we established this, we worked backwards. We applied each surface color variation to our core product screens, checking for accessibility and preserving user meaning. These screens served as early prototypes to help us see what did and didn’t work.
3. Applying color is a game of balance
Showing colors on darker surfaces means the differences between your saturated and unsaturated colors will stand out a lot more. Maintaining a balance between distinction and accessibility is key when designing for dark mode.
We started by auditing the most-used parts of our experience in light mode. We identified elements living at different elevations, such as action sheets and dialogues. This audit helped us define 80% of the elements we were using throughout the app and helped us isolate remaining gaps quickly. Sketch Color Libraries and Layer Styles allowed us to collaborate from a single source of truth and see our changes on both platforms simultaneously.
We then examined saturated color usage. In general, we increased brightness while dialing down saturation for most colors to meet WCAG contrast ratio standards across both modes. We made sure to support a high contrast accessibility feature in our color choices, too, which can make it easier to see text and UI elements.
4. A semantic system brings order to chaos
A semantic system allows us to create a single color swatch that has two or more color values, these colors then change when the app is in light or dark mode. For example, in Outlook mobile, primaryNavigationBar is outlookBlue in light mode and grey900 in dark mode. Assigning two fills to one component makes things easier, faster, and much more maintainable. Designers wouldn’t add bloat to app colors, and developers understood how to apply the components with built-in colors instead of one-off hex values. Everybody wins.
Embracing a semantic system allowed us to assign multiple colors to a single swatch, which made it easy to alternate these swatches between light and dark mode. The semantic name remains the same but the color could change app-wide without missing a spot.
5. Small details make a big difference
The work doesn’t end at the surface level. The smallest details, including icons and images, must communicate what they’re meant to. Icons need to maintain their form: for example, an envelope in light mode should look like an envelope in dark mode to show presence. For images, this means the smallest details, down to our app onboarding screens or supporting tutorials, need to be updated to support a newer, darker world.
We hope these lessons we learned creating dark mode for Outlook mobile can help other designers facing similar challenges. Dark mode should respect your core product purpose, feel familiar to a user, and set a foundation for future growth and success. The details matter, and being thorough with them can make all the difference. At its best, dark mode balances familiarity with excitement and shows people we’re paying attention to how they use our products.
Have you applied dark mode to your products? Share your learnings in the comments below!
A big thank you to William Hou, Lance Wang, Daohan Chong, Summer Li, Lency Qian, Luna Zheng, Bei Li, Claire Anderson, Ting Zhang, Miles Fitzgerald, Corbin Reynolds, Tali Roth, Michael Palermiti, Jon Friedman, and Charles Riccardi. This was a huge effort across the company with countless names to list.
To stay in-the-know with Microsoft Design, follow us on Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team at Microsoft, head over to aka.ms/DesignCareers.
