DARK THEME — MATERIAL DESIGN
The Ultimate Guide on Designing a Dark Theme for your Android app.
In this article, I’m going to explain the step by step process of designing Dark Theme/Dark Mode to your app based on the Material Design Guidelines by Google.
Now before we get started, I’d like to do a super small plug to one of my highly requested courses!
It’s Free! The Mega Product Design Course for Beginners!
If you’re looking to drastically upskill and change your career trajectory for the better, make sure to check out my Mega Product Design Course for beginners on my YouTube Channel.
I’ve had the good fortune of working with some of the biggest companies and startups and have learned a lot through that. And I share all the knowledge with you all for free on my YouTube Channel.
I cover everything from the core foundations of Product Design, UX Design and so much more. Get to see and learn what it takes to be a skillful product designer which can get you any opportunity you want.
Anyway, let’s get into the case study!
At the recent Google I/O 2019, when Google announced an epidemic widespread of Dark Theme, I was super pumped. For those of you who follow me on social media, you might know that I am a hardcore fan of Dark Theme. I just love it!
With Android Q coming out in the 3rd Quarter of 2019, I felt that it was important for everyone to get the Dark Theme ready for their apps.
Google has released the Material Guidelines for applying Dark Theme to your apps. The documentation is excellent unlike the Human Interface Guidelines by Apple. (Why Apple? Why?). Anyway, you can definitely spend time reading that, but I plan to make your life a lot easier with a step by step process.
I also have a 5 part Instagram series on it if you want to quickly brush through the fundamentals of a Dark Theme.
One last thing. I will be covering only the design aspect and not the development aspect. You can check out this video by Google that explains the development aspect.
You can also check out my full-fledged Tutorial on YouTube as well!
I also released a full-fledged article on designing Dark Mode for iOS. If you have an iOS app as well, definitely do consider checking that out!
Alright, assuming that you now have a design system ready with colors, type, components, and all the other jazz, let’s get started!
Elevation
Every app is made up of a lot of components. Nav drawer, app bar, FAB, buttons and so much more. Each component has a certain amount of Elevation, as it is one of the fundamentals of Material Design.
In light theme, it made sense to give a shadow to a component based on the amount of elevation. But that does not work for the dark theme as a black shadow on a dark background is visually not perceptible. And so Google came up with the idea of making the component lighter as the elevation increased. But do note that in dark theme, the components will continue to have the same shadow settings as in light theme.
The base always uses a dark grey color with a value of #121212. Apple likes to be different all the time and so they suggest a pure black color of #000000.
All the drop shadow and elevation values have been provided by Google in their UI Kit (Sticker Sheet).
Design Application
Every component in dark theme is built using 2 layers. It is built by placing a semi-transparent overlay over a surface with a color of #121212. This can be either a white or a colored overlay. I will explain the usage of both of these.
Applying this concept varies depending on the design tool that you are using. It is faster in Figma and Sketch but requires an extra step in Adobe XD. For now, I will be showing you the design application in Figma.
Let us take the example of an App bar to understand this better.
As you can see the app bar is made up of 2 layers. The base is always #121212. On top of the base layer, there is a white semi-transparent overlay. The opacity of that overlay has been set to 9%. This value varies based on the amount of elevation. In this case, the App bar has an elevation of 4dp. Higher the elevation, the higher the opacity of the overlay. The elevation and overlay values are available in the UI Kit provided by Google.
If you are using a tool like Adobe XD, the process is a little different. You will have to create a duplicate of the base layer (#121212) and then change the color of the duplicate to White. Then set the opacity of the duplicated layer to 9%. You cannot add 2 layers of color to a single element in Adobe XD.
Development Handoff
There are 2 ways to hand this off to the dev.
- You don’t hand it over to the dev 😂. Ask the dev to use the code components provided by Google. These code components will automatically apply the elevation and color.
- If you are using a custom built component, then give the true color value. In this case, it is #272727 which is a mix of #121212 and #FFFFFF (9%).
Background and surfaces with a brand color
Some brands like to use their brand color everywhere. And so there is another way to add a little flair to your Dark Theme.
In this example, we will choose blue as our Primary color (#4BB2F9).
Here, I have replaced the White semi-transparent overlay with a Blue semi-transparent overlay. I have set the transparency level such that it meets WCAG’s accessibility standards. I will explain more about this in the Accessibility Section.
So should all components have a dark-colored surface? Not really. Here is an example of the FAB (Floating Action Button). Components such as buttons and FAB can have a shade of the primary color.
I will cover a bit more about this in the next section.
Color Palette
Up next, is the colorful part (Pun intended 🤪). The first thing you need to do is to take your Primary and Secondary colors and generate a color palette. To generate the color palette you can go to the color section of the Material.io website and input the colors. It will then generate a color palette for you. Make sure you scroll down to the “Tools for picking colors section”.
Let us understand the components of a Color Palette.
- Tonal values: Each shade of the color palette is assigned with a number that ranges from 50–900. This is number is a tonal value. They are used only to identify a certain shade of the color palette.
- Primary Color: When you input the primary color value, the color palette generator will assign a tonal value to your primary color. This is based on the saturation of the primary color. In the above case, the tonal value of the primary color is 600. However, this is the primary color for light theme. But for dark theme, the primary color shifts to a desaturated color shade. (Explained below). Google recommends using the color that has 200 as the tonal value as the primary color for dark theme.
- Primary Variant: Any shade of the primary color is called a Primary Variant. So in this case, any color shade other than the 600 tonal value is considered as a primary variant for light theme. And any color shade other than the 200 tonal value is considered as a primary variant for the dark theme.
Why do we need a full-color palette?
It’s because Dark Theme works well with desaturated colors. Shades with tonal values that range from 50–400 are the most appropriate colors for dark theme.
Make sure that you have the generated the color palette for your accent and secondary colors as well.
One last thing before we wrap up the color section. It’s about the color for components like FAB and buttons that I showed you the in the previous section.
In the above image, the FAB in the top screen has the dark theme primary color which is the 200 tonal value. But the guidelines give us an option to use a more saturated color for these components. In this case, it would be the primary color for light theme which has a tonal value of 500.
However, the application of the primary color should be limited to one or two branded elements, such as a logo or a branded button. Desaturated colors should still be used in the rest of a dark theme UI.
From now onwards, where ever I use the word ‘Primary Color’, I am referring to the ‘Dark theme primary color’ (200 tonal value).
‘On’ colors
The guidelines provide a set of rules for elements such as text and icons that have to be followed for dark theme. It’s called ‘Dark Theme Baseline Palette’ which looks something like this.
The colors on the right side are called ‘On’ colors. They are applied to text, icons, and strokes which are placed “on” top of surfaces that use a primary, secondary, surface, background, or error color.
In the above image, we have an Extended FAB which has a primary color. The color of the text is black. Not white. This follows the ‘Dark Theme Baseline Palette’.
So that pretty much wraps up everything you need to know about color.
Accessibility and Contrast
Now comes the interesting part. On every surface, there are 3 types of elements — Icons, Text, and Strokes. These can have either white color or a shade of the brand color.
Let us take an example assuming that the text and icon color will be white.
In the above image, there are 3 different opacity levels for the white-colored text. As per the Material Guidelines,
- High Emphasis text needs to have an opacity of 87%.
- Low Emphasis text needs to have an opacity of 60%.
- A text which is disabled needs to have an opacity of 38%.
Now, of course, these values can definitely be changed to your liking. And so, in this case, the tab title (Activity) has an opacity of 100% while the other title has an opacity of 87% and the subtitle has an opacity of 60%.
Now let us take an example where the text color is not white, rather a shade of the brand color.
As you can see, I have used a desaturated orange color for the tabs, tab title, and button. This desaturated orange color has a tonal value of 200 as recommended by the Material Guidelines.
So how do accessibility and contrast play a role in this? Its super simple actually.
All colors used in dark theme should display elements with sufficient contrast passing the WCAG’s standard for text.
The guidelines provide us with 2 contrast ratios, that need to be satisfied for sufficient contrast. Here are 3 tools that you can use for quickly checking the color contrast. Do let me know if you use any other tools apart from these.
So based on everything I have explained so far, here are the 4 possible outcomes for your user interface. You may adopt any of the 4 outcomes. Take a moment to slowly see the differences between the 4 outcomes.
Okay, now let’s talk numbers. So as I mentioned there are 2 contrast ratios that need to be satisfied. And here are the elements that play a role in the contrast ratio.
4.5:1
- Surface with a primary color (Dark Theme). (Outcome 3 and 4)
- Text with white color or a non-white color. (All 4 outcomes)
15.8:1
- Surface with a primary color (Dark Theme) or default black color. (All 4 outcomes)
- 100% white text color. (Outcome 1 and 3)
I know that this is super hard to comprehend if you have never worked with contrast ratios before. But do not worry, as I am here to your rescue.
Step 1
Decide on whether you are going to go for a background with the default color or your primary color.
Step 2
When testing your colors make sure that you test them at the highest elevation level of 24dp. As per the guidelines, a dialogue modal has an elevation of 24dp. But in the image above I have taken a Navigation Bar having an elevation of 16dp as an example. The color difference is negligible between 16dp and 24dp elevation.
Step 3
If you choose to have a background with the default dark color, then you only need to test for the 4.5:1 contrast ratio. And if the choice of text color is 100% white, then you don’t have to apply any contrast ratio at all in this case.
But if the text has your brand color, then test for the 4.5:1 contrast ratio. Let us take a look at how this works.
As you can see here, the colors pass the contrast ratio of 4.5:1 which is what we desire.
Step 4
If you choose to have a background with your primary color, then you only need to test for the 15.8:1 contrast ratio. You need to test the ratio irrespective of the color of the text in this case.
One thing that you need to note is that, if the text color is white, then test for 15.8:1 ratio. If the text color is a brand color, test for a 4.5:1 ratio.
Let us take a look at how this works.
In the above image, we are testing for a ratio of 15.8:1 as text color is white. At 11% opacity, the background color becomes dark enough to satisfy the 15.8:1 contrast ratio.
In the above image, we are not going to test a ratio of 15.8:1 as the text color is not white. Instead, test for a ratio of 4.5:1. The 15.8:1 ratio needs to be tested only when the text color is white.
One more thing to take note of when testing the contrast ratios is to test them on error state backgrounds.
The guidelines specify the exact color to be used for error states. In this case, it is a bright red with a semi-transparent overlay with 40% opacity. This gives the color of #CF6679. 40% opacity ensures that the contrast ratio is met. The red color (#B00020) is the default error color for the light theme.
The text here is in black and not white. This is because of the ‘Dark Theme Baseline Palette’ that we took a look at before.
But if you choose to use a different color for error states, just make sure that they satisfy the 4.5:1 contrast ratio.
States
Designing dark theme for different states of a component is easy and straightforward. All the shadow, overlay and stroke settings are available in the UI Kit. I am going to show you an example with the dragged state of a component.
There are 2 types of components. One that uses the default dark color (#121212) and one that uses a primary color. In the below image I am going to show you the design treatment when the component has a default dark color.
In the above image, the dragged state has 8dp shadow and a semi-transparent white overlay. The value of 8% is a fixed value as recommended by the guidelines. So it is best not to edit that value.
There is another variation where the text uses the primary color. The treatment is the very same with a slight change.
When the text uses the primary color, the color of the overlay is the same as the text color. In this case, the color of the text is #F796AE and so the overlay also uses the same color.
Most of the times, components such as buttons and FAB always use brand colors. So always use a white overlay for the different states. For a dragged state the opacity is 8% as we have seen in the previous examples.
For disabled states, there are only 2 variations.
Above is the image shows the only 2 variations for disabled states. It can be either have a stroke or a fill. In both cases, the text is white with 38% opacity.
Illustrations
Wait… what? Like graphic design type illustration stuff?
Hahaha. Yeah 😂
Illustrations also need to tweaked to suit dark theme. Unfortunately, the guidelines have not mentioned anything about Illustrations. The only guidance available is the talk given at Google I/O.
So let's dive in. The illustrations that I will be using are from Undraw.com.
Tweaking illustrations for dark theme is quite simple. All you need to is to break up your illustration into 2 parts namely, subject and background.
- For the background element, you need to make it greyscale. But while doing that you need to follow a simple rule. The lightest shade in light theme becomes the darkest shade in dark theme and vice versa. Sometimes you might have to play around with the black and white colors to make it look perfect. You do not have to always follow that rule.
- For subjects, you need to use desaturated colors. So shades with a tonal value of 400–50 is your range.
In light theme, the illustration used a highly saturated green color with a tonal value of 800. But in dark theme use a less saturated color from the same color palette. I have used a tonal value of 200 in this case. But feel free to use even the 400 or 300 tonal value.
The other parts of the illustration such as the pant and shirt have a desaturated color already, so no need to change that.
And… That’s a wrap!
So that is pretty much everything you need to know about designing dark theme for your android app. Feel free to reach out to me anytime if you need any clarification or get stuck anywhere. You can send me a message on any social media platform. I will be more than happy to help you out 😁.
Resources
- Talk at Google I/O covering the design aspect.
- Talk at Google I/O covering the development aspect.
- Dark Theme UI Kit/Sticker Sheet by Google.
- Design Lab for Figma by Google.
- Material Design UI Kit/Sticker Sheet for Figma.
- Material Design UI Kit/Sticker Sheet for Adobe XD.
I would also like to mention Files.Design for allowing me to use their Material Design UI Kit for the purpose of this article. They have great professional resources for digital designers. You can create awesome projects faster and accurately with wireframes, iOS and Android templates made by Great Simple Studio.
🔥 2 Free months of Skillshare Premium!
If you want to learn to build a fully functional website from scratch without using a single line of code in Webflow, make sure to check out my Mega Webflow Course for Beginners! You can find the course on Skillshare
Register with my link and get 2 free months of Skillshare Premium and watch it for free.
Did you know?
You can give up to 50 Claps for an article? Just hold the clap button for a few seconds and bam! Try it out 😋
Check out my other articles on medium
Reach out to me on social media
Twitter, Instagram, LinkedIn, Dribbble, Behance and YouTube.
