Dark mode switch ui how to#
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. Assigning two fills to one component makes things easier, faster, and much more maintainable. For example, in Outlook mobile, primaryNavigationBar is outlookBlue in light mode and grey900 in dark mode. A semantic system brings order to chaosĪ 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. 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. In general, we increased brightness while dialing down saturation for most colors to meet WCAG contrast ratio standards across both modes. Sketch Color Libraries and Layer Styles allowed us to collaborate from a single source of truth and see our changes on both platforms simultaneously. This audit helped us define 80% of the elements we were using throughout the app and helped us isolate remaining gaps quickly. We identified elements living at different elevations, such as action sheets and dialogues. We started by auditing the most-used parts of our experience in light mode. Maintaining a balance between distinction and accessibility is key when designing for dark mode. Showing colors on darker surfaces means the differences between your saturated and unsaturated colors will stand out a lot more. We explored a bunch of different surface colors and complementary detail treatments to find the right solution. These screens served as early prototypes to help us see what did and didn’t work.
We applied each surface color variation to our core product screens, checking for accessibility and preserving user meaning. Once we established this, we worked backwards. The base was a starting point which served as a backdrop for accessibility-friendly fill colors and text. Pure black gave room for buttons and dialogues to separate from the base.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.Neutral grays lived in harmony with time-of-day color temperature shifting such as TrueTone and Night Mode.As we refined our explorations, we discovered that pure black saved battery life.Here’s why we chose a pure black surface: We explored various surface color variations and decided on a mobile-first direction. The work that came from Fluent Design on web and desktop served as our north star. To understand what surface colors made sense for us, we collaborated across Microsoft Design. It’s what helped us earn our reputation, and we can’t forget our roots.īecause our products live within a larger family, we needed a solution to work across all of Microsoft 365. As part of that effort, we constantly try to balance functionality, usability, and quality in Outlook mobile. Microsoft 365 mobile prioritizes preserving continuity and collaborative promise for the user. For example, Outlook would have to look and feel familiar to a user coming from Word. 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. Throughout the course of our journey, we made sure to protect the way people composed and read emails, and how they understood their schedules. People use our product to tell them important information, and we need to serve that purpose well in any environment. For Outlook mobile, the combination of email and calendar is key. To begin, we examined our product identity. Let us know what you think in the comments! 1. We’ve found five things to think about when designing for dark mode, and we hope you’ll find them helpful too. But after chatting with a few people in the community, we know we’re not alone. Designing a cohesive, maintainable dark mode that makes existing creature comforts feel fresh seemed like a daunting task to the Outlook mobile design team. What isn’t: how to do it in a way that’s scalable without losing the product’s soul. Meanwhile, dark mode continues to climb as a top customer ask in your feedback channels. The darkness consumes you, and the answer becomes more distant with every keystroke. You look around for standards, only to find a wild west of creatively applied themes in third-party environments. Imagine you’re tasked with implementing dark mode.