Web Interface  |  Color

Dark theme

This section is about how to work with colors for a dark theme of design.

01Grayscale without blue

The dark mode interface of Mac OS and Windows operating systems has a black color and its shades close to pure black. Therefore, for dark theme of the website, it is better to avoid mixing blue, green, and so on in grayscale colors. Such a theme looks alien to the interface of the system.

The base color dark theme and other colors with a mix of blue.
The base color of the dark theme and other colors are closer to pure black and its shades.

02Levels

The easiest way to build a color difference in a dark theme design is to use depth levels. The closer an object or layer is, the lighter it is. The farther or deeper, the darker it is. And all depth levels are on a base background.

Colors based on depth levels.

Depth levels allow you to simplify the color construction of a dark theme. You don't have to think about how to rearrange the colors of a regular light theme, how to invert or replace them. Just decompose everything in the design into layers and imagine which objects are closer and which are deeper.

Build design layers with depth in mind.

03Text

Any pure white text and headings are better muted in a dark theme. This will reduce the contrast of the text and it will be more comfortable to read. It is sufficient to reduce the transparency of the text to 90-95%.

Text with pure white is too contrasty and hard to read.
White text with 90-95% transparency is more comfortable to read.

04Buttons

In a light theme, buttons can be bright and contrasty, especially if they are call-to-action buttons. In a dark theme, you should be more careful with contrast. Strong and bright accents make it hard to read and understand the information in a dark theme. Therefore, it is worth muting the bright colors of the buttons.

The contrast between the button and the background is too strong.
The muted color of the button will make it harmonious and balanced in a dark theme.

Buttons with white or light gray backgrounds by default will have too much contrast and accent in a dark theme. That's why it's better to replace their background color with a neutral gray, which will contrast less.

The white button has a high contrast.
Neutral gray reduces contrast.

Also for light buttons is a good technique to make them ghost or outline in a dark theme. A light border is sufficient design to make the button stand out among other elements.

The white button has a high contrast.
Ghost or outlined button has a reduce contrast.

05Inputs

For input fields, it is better to reduce contrast, as well as buttons and other design elements. This makes it easier to fill out forms in a dark theme. Thus input fields do not stand out in the interface and do not take away all the attention with their brightness.

The input field has too much contrast.
Reduced contrast for inputs works better.

06Brightness

Reducing contrast in a dark theme works for all design elements, including images and backgrounds. High contrast of images or backgrounds makes it harder to read the text and understand the information on the site. So a good trick is to make images with little transparency, this will automatically lower their contrast. And for bright backgrounds should lower the Lightness and Saturation parameters of their color.

The image may be too contrasty and interfere with other information.
Reducing contrast helps to balance the design as a whole.
The background is too bright.
Reducing the contrast of the background helps you better read the information on it.

07Shadows

The regular shadow settings in the light theme are not suitable for the dark one. They are faintly visible on dark backgrounds. Colored shadows create a strange glow on dark and their use is also questionable.

Regular shadows are faintly visible, and colored shadows create an alien glow.
It is good to use rich shadows in a dark theme.

08Palette

The color palette for the dark theme is different from the light one. The dark theme builds on the color differences in the depth of the design layers. The accent or primary colors are more muted. Also, three shades are enough for the base colors in the dark theme, instead of five or seven in the light theme.

Below you can see an example of a dark theme palette that shows the base background color and colors for displaying layer depth. Black and muted white for borders and other auxiliary needs. As well as accent colors for buttons and other elements that need attention.

Example of dark theme palette