When we began, dark mode had long been rumoured to be coming to the iOS and Android platforms, but nothing had been confirmed. It remained the top ask from our customers so here's the story of how we crafted the Microsoft dark mode experience.

We started by looking at the existing landscape of apps using a dark UI. At the time there was no platform standard so each app was doing its own thing - using different grey ramps and colours. So, we explored various tints and shades of grey in each of our apps.

light-mode-ios dark-mode-ios
light-mode-android-2 dark-mode-android

One of our goals was to share the same colour palette between all Microsoft Android and iOS apps. We chose pure black as the lowest surface colour, used neutral greys, and we optimized each of our colours in dark mode.

A challenge was to create a flexible system that would allow us to tailor the look and feel; simply mapping colours between light and dark would not give us the polished design that we were looking for. Alongside our engineering team, we took inspiration in the macOS semantic colours and created a similar system that would allow us to create custom swatches for both light and dark modes. We even open-sourced the code on GitHub.

dark-rollup-4

Icons and illustrations were also adapted, and these findings later helped to inform the design of the Fluent icon style. As we worked through the details the next step was to build dark mode into our design system. This gave us the documentation that we needed to scale to every product. Each component is built in both appearances, take a look here in our open-source Figma file.

It was an amazing and collaborative effort from teams across the company. Huge thanks to everyone who contributed to this project. 

exploration-11
View