Menu
I'm looking for the color palette used by Material Design's Dark theme as found on this page: http://developer.android.com/training/material/theme.html
Any ideas? I've done a quick google and couldn't find anything about it. I'm looking for layout background, drawer background, appbar color, etc.
743
Color usage and palettes link The Material Design color system helps you apply color to your UI in a meaningful way. In this system, you select a primary and a secondary color to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways.
Dark palettes don't necessarily need to consist of all darker colors and shades. Vibrant and bold colors can be included too. There is a lot of variety to play with when it comes to dark color schemes. You can use black and shades of grey, as well as deepened primary colors like navy blue, merlot, or deep greens.
The Material dark theme system can be used to create a beautiful and functional dark theme for your app, which generally consists of dark background colors and light foreground colors for elements such as text and iconography.
Update: the answer below contains a link to an archive of the Material docs. Check out the current docs for the most up to date information.
Scroll to the bottom of the color docs to see the dark theme colors.
Here is the text color info from the same docs:
See this link to convert those percentage values to hex.
145
This page in the official material design website is dedicated to dark theme (including its colors). Here is the colors:
The image below compares Light and Dark theme colors (Light colors on the left side, Dark colors on the right):
Image credits: official material design website
29
Here's some more information related to the same topic. According to the Properties section in the Dark theme page of material.io, the base color is #121212, but when you want to place an element over another one, you use a white layer with transparency to generate a lighter version of that grey. And this is what they share:
The problem with it is that that's great in terms of design, but it doesn't make our work that simple as a developers. So I got the photo editor and mapped that guidelines to hexadecimal colors. And here it is!
| elevation | overlay | hex |
| --------- | ------- | ------- |
| 00dp | 0% | #121212 |
| 01dp | 5% | #1e1e1e |
| 02dp | 7% | #222222 |
| 03dp | 8% | #242424 |
| 04dp | 9% | #272727 |
| 06dp | 11% | #2c2c2c |
| 08dp | 12% | #2e2e2e |
| 12dp | 14% | #333333 |
| 16dp | 15% | #343434 |
| 24dp | 16% | #383838 |
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
