This means that you need to create different shades (lighter) from your base surface color (primary background color).

For a dark theme Google advises to use a lighter surface color to indicate that a component is ‘on top’ of the other.

ElevationĮlevation is the relative distance between components along the z-axis. (don’t worry for now, more of this in part 2). However, make sure there is enough contrast to meet the accessibility standards outlined in the WCAG 2.0. This will be especially noticeable with longer areas of text. When designing a dark theme, it is recommended to use dark gray as a primary background color (Google recommends #121212).Īs you can see, white text on a dark gray surface has less contrast than white text on a true black surface and is therefore more comfortable for the eyes. True white (#FFFFFF) on true black (#000000) – or the other way around – creates a high contrast, but is not comfortable for our eyes. This applies to all color palettes, whether light or dark. One aspect that is very important when choosing the right colors for a design, isĬreating enough contrast while reducing eye strain. Part 1: Choosing the right surface colors 🔲🔳 Use a dark gray instead of true black Screen glare is reduced and thereby minimizes blue light.īe aware that a dark theme could cause eye strain in bright light conditions, especially if users look at the interface for a longer time.They reduce eye strain in low light environments.Dark themes save lives (battery lives).If a dark theme does not fit your brand or use case, you can always provide it as secondary option because it has some benefits: A dark theme also puts the focus on content – for example in the Spotify application, where the bright images stand out. Are you providing the dark theme as a secondary option or will it be the default theme? Netflix has a dark color palette, because we most likely use it in low light environments. Before designing anything it is good to think about why and how you want to use a dark theme.

Spotify color palette tool