Designing Dark Mode

How we’re crafting Dark Mode experiences across Microsoft 365 that adapt to your daily flow

Jon Friedman
Aug 28, 2019 · 4 min read
A woman holding a cell phone with Dark Mode enabled.
A woman holding a cell phone with Dark Mode enabled.

People often think of Dark Mode as a choice between a black or white screen, but this feature involves a wide spectrum of both grayscale and color gradients.

It’s an apt metaphor for why we love Dark Mode: human needs unfold across an equally broad spectrum. Whether you want to reduce eye strain, improve battery life, or it just has aesthetic appeal, Dark Mode exemplifies our ability to craft simple and powerful Microsoft 365 experiences that give you choice and flexibility.

Customer choice was why we first brought a darker UI theme to desktop apps in Office 2010, and we’ve brought it to more Microsoft experiences, like Teams, ever since due to its popularity.

A cross-company design collaboration propels us to seamlessly bring Dark Mode to the broader M365 product suite, and today marks the initial rollout of Dark Mode on Outlook for iOS and Android, as well as Office.com! The upcoming launch of iOS 13 will then extend this rollout to Word, Excel, OneNote, PowerPoint, SharePoint, OneDrive, Planner, and To-Do on mobile.

Designing Dark Mode for Outlook mobile and Office.com

Today’s fast and fluid world constantly blurs the lines between work and life, and we believe in meeting people where they are. Our tools are used to keep up to speed on everything from work communication, to personal events that include friends and family, to changes in shared documents. This often means viewing email, calendars, or files in places where the default white mode may be less suitable, like darkened airplanes, movie theaters, or in bed at night.

Our design research specifically focused on these contexts where folks would want to use Dark Mode, and the response was very positive. While some Dark Mode experiences can be neon or overly bright, people felt that Outlook mobile kept the kind of relaxed feeling you might want in a dimly lit living room or bedroom. They described the experience as comfortable, crisp, clear, and aesthetically pleasing, a nod to how Dark Mode can reduce eye strain.

Dark Mode on various iOS mobile devices.
Dark Mode on various iOS mobile devices.
Dark Mode experiences on iOS. The colors pop for legibility without overwhelming the darker feel.

Dark Mode may also save battery life when you’re traveling or on the go for long stretches of time. We’re building in capabilities so following the next round of OS releases on iOS and Android, Outlook will automatically switch to Dark Mode depending on the preference you set. In the meantime, Outlook for Android automatically switches to Dark Mode when you choose Battery Saver. These perks all hold true for Dark Mode on Office.com.

Dark Mode on various web programs.
Dark Mode on various web programs.
Dark Mode experiences on web.

A Design culture of creative collaboration

The seamlessness and flexibility that we’re building into Microsoft 365 design systems mirrors our own fluid creative process. We brought designers together from across the company to create a common Dark Mode experience for all our mobile and web apps. The creative energy that came from exchanging ideas and collaborating with new peers was one of the most fun parts of this entire effort.

Starting from the ground up and using the new gray palette for Fluent, our app teams began by aligning to the single palette. This included increasing contrast, brand color saturation, and consistency among details like how and when we use shadows when in Dark Mode.

A color palette that ranges from blacks to greys to whites.
A color palette that ranges from blacks to greys to whites.
Colo palettes for blues, purples, greens, and oranges.
Colo palettes for blues, purples, greens, and oranges.
We explored hundreds of color options against various backgrounds before selecting these muted color categories.

Future rollout for Dark Mode in Microsoft 365 apps

We’re excited to bring Dark Mode to even more of the Microsoft 365 product suite, starting with additional mobile experiences. Dark Mode comes to Word, Excel, and PowerPoint for mobile with the launch of iOS 13, as well as iPad, where we know many people choose to use those apps. That same launch will also bring Dark Mode to SharePoint, OneDrive, OneNote, Planner, and To-Do on mobile.

There will be more experiences to follow — Dark Mode for all Outlook clients, Planner and OneDrive on web are coming down the pipe — so stay tuned for those rollout dates. Meanwhile, we’d love to hear your thoughts and feedback in the comments below!

To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft

Jon Friedman

Written by

Head of Microsoft Office design, leading the next generation of experiences for work & life. Opinions expressed here are my own, even the few good ones;-)

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft. Sharing sketches, designs, and everything in between.

Jon Friedman

Written by

Head of Microsoft Office design, leading the next generation of experiences for work & life. Opinions expressed here are my own, even the few good ones;-)

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft. Sharing sketches, designs, and everything in between.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store