At Google I/O 2019, Material Design introduced guidance for crafting a dark theme to complement your product's existing Material theme. While light themes are great for longform reading and offer more legible contrast, a dark theme's reduced luminance provides safety in dark environments and can minimize eye strain.
In Material, dark themes are designed to be used as a supplemental mode to a default light theme, maintaining your app's unique identity (including styles for color, shape, type, and elevation) through a nuanced and night-friendly presentation.
In this designlab, we'll walk through the steps required to create a dark theme based on an existing Material theme—using one of our Material Studies.
We'll work with Reply, an email app designed for clarity, legibility, intuition, and ease of use. We'll learn about Reply's identity and make careful decisions to retain branded moments in the app while crafting a theme that's still comfortable in the dark.
We'll also push the theme further and work with custom surface colors that go beyond the basic dark theme to reemphasize Reply's unique personality.
Before getting started, you'll need to download our Figma starter file. Everything you'll need for the designlab is included in this file.
Next, you'll need to set up your design environment.
First, sign into Figma or create an account.
Once you're signed in, import the file you downloaded in the previous step. To do this, just find the "import file" icon in the upper left corner of the Figma files screen and locate the file in your "Downloads" folder.
Take a moment to look around the file. It contains a light theme, a pre-built tonal palette based on the app's brand, and a copy of the final dark theme we'll be creating.
Before getting started on the dark theme for Reply, we need to understand some of Reply's brand characteristics. This will help us make informed choices about our theme so that Reply's identity and brand are consistently expressed across both light and dark themes.
Reply's brand places an emphasis on communication. The app prioritizes functional qualities, favoring ease-of-use over design elements that don't have functional purpose.
For our purposes in this designlab, the most important elements of brand expression in Reply are color, type, and shape.
Reply's color theme uses a dark blue-gray primary color paired with an orange-yellow secondary color.
Because the secondary color is rarely used, Reply's UI is often monochromatic, using variations of its primary color. This subtle color theme allows content to be easily read without distraction, and allows photographic avatars to be easily seen.
Reply's secondary color, then, has an outsized impact wherever it's used — emphasizing critical actions and clearly pronouncing branded moments throughout the app.
As an app that focuses heavily on text-based content and efficiency, type and typography are central to Reply's expression of identity. The app relies on Work Sans for its complete type scale, using a variety of styles that incorporate six weights of Work Sans: Light, Regular, Medium, SemiBold, and Bold.
Building the entire type scale from Work Sans gives Reply consistent and predictable, but organic and legible, typography.
According to Work Sans designer Wei Huang, the family is optimized for on-screen usage. This makes it great for efficiently reading passages of text in emails or other content. Its loose basis in the forms of early Grotesques lends it a somewhat more friendly and human aesthetic, while wider tracking makes for smoother reading.
Reply has a nuanced shape story, pairing round and sharp components in ways that reinforce the efficiency and functional nature of the email list while giving a softer touch to key actions and larger componentry.
Small components like buttons and the FAB are completely rounded, while medium components like email cards and the bottom app bar are completely squared. Large components like the account switcher and bottom sheet have slightly rounded corners.
These shapes combine to reinforce the user's understanding of where they are in the app and how each component is conceived, as well as how it relates to the rest of the interface.
Knowing how color relates to Reply's expression of brand in its default light theme, we can make informed adjustments to its palette for a usable and expressive dark theme.
In Material, color systems are based on tonal palettes — these palettes use your brand colors to create a set of harmonious variants that come together in a comprehensive color system applied across your app, ensuring style and legibility.
In the Figma file, you can see Reply's primary and secondary tonal palettes. The light arrows above each palette indicate the values used in Reply's light theme, while the dark arrows indicate the variants we'll use in our dark theme.
When crafting a dark theme with Material, lighter variants are chosen so that your color system can remain expressive and maintain appropriate contrast without causing eye strain. More saturated colors tend to visually "vibrate" against darker backgrounds, making them harder to read. Lighter tones also provide more flexibility in varying the color of elevated surfaces, which we'll look at shortly.
Now that we have a handle on Reply's tonal palettes and the colors we'll be using in our dark theme, it's time to start adjusting color values in our mockup.
In Material dark themes, the bottom-most layer of the interface is typically a dark gray with the hex value #121212.
In Reply's monochromatic inbox view, email cards have a slightly lighter color than the background, so we should lend the same treatment to the cards in dark theme to maintain the inbox's visual hierarchy.
Now that the email cards have been darkened, our text is illegible. We'll tackle text colors next.
To understand text colors in dark themes, it's important to understand how color is applied to text in the broader Material Design system.
Material Components define the notion of "on" colors, which are so called because they're colors that appear "on" top of components and key surfaces that use primary, secondary, surface, background, or error colors. "On" colors are primarily used for text, to ensure that it remains legible on these surfaces.
The default "on" colors in Material are white (#FFFFFF) and black (#000000). Since a black or dark "on" color wouldn't be suitable against our darkened surfaces, we'll use white.
The system for establishing text hierarchy with this "on" color is simple. High-emphasis text has an opacity of 87%, while medium emphasis text is applied at 60%, and disabled text uses an opacity of 38%.
High priority text isn't pure white because, as discussed in step 5, #FFFFFF—a bright color—would visually "vibrate" against our dark backgrounds. Additionally, pure #FFFFFF text against a dark background can harm legibility since the light from that text appears to bleed or blur against the dark background.
Knowing all of this, let's fix the text colors in our dark theme.
In dark themes built with Material, elevated surfaces and components are colored using overlays. The more elevated the surface is, the stronger and brighter the overlay becomes. This is a way of communicating elevation and hierarchy when the background is too dark to reliably portray dark shadows.
Bottom app bar
For Reply's bottom app bar, which is elevated above the rest of the inbox UI, we'll apply a subtle overlay.
Floating action button
Next we'll apply a new color to the FAB. To do that, go back to the tonal palettes we looked at earlier and grab the 700 value of Reply's secondary color.
Optionally, for small but high-impact components in your own app, you could select a slightly more saturated color as long as it retains the right contrast with the underlying colors. We'll explore this option in a later step.
You might notice that the same impactful orange-yellow color also appears on the corner of selected email cards in Reply's inbox. This is another strongly branded moment but it doesn't fit cleanly into components, surfaces, or text.
For situations like this, it's best to start from our secondary variant color (in this case #FFFBE6) and work backward to find something that is appropriately expressive without being a distraction to Reply's functional aesthetic. For Reply, we can stick with our normal secondary variant.
As we learned earlier, the floating action button (or FAB) in Reply is a highly emphasized component that also represents a strongly branded moment in the app. For this reason, we might decide to maintain its color expression in Reply's dark theme by using Reply's original secondary color.
We might also want to bring back Reply's primary color as a custom surface color for the bottom app bar and the email cards. To do this, we would just need to change the overlay to use the dark primary color indicated in the tonal palette we've been referencing.
In Material, dark themes are a thoughtful and intentional extension of your product's unique identity as it's expressed in light theme. Through simple adjustments to color and the way that elevation is conveyed, you've just successfully created your first Material dark theme. Congrats!
Consider the steps in this design lab a framework for understanding and defining your own product's dark theme, and always keep the properties and goals of your brand and product at heart.
For more dark theme guidance, have a look at the Material Design spec for dark themes.
If you've got questions, feel free to ask us any time using @MaterialDesign on Twitter.
Stay tuned for more design content and tutorials on the Google Design YouTube channel.