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 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.
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 divide everything into layers and imagine which objects are closer or deeper.
The color of the background doesn't matter in a dark theme. But the depth of the layers does. The surface background reflects this. The closer the layer, the lighter the surface. So if the card background is white, gray, or colored in the dark theme, it becomes a single surface color that reflects the depth of the card in relation to the other layers.
Borders in the dark theme do not matter too, and it is better to remove them from elements, especially if they have just a decorative role.
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 85-95%.
In the dark theme, it is good to make links with a light tint of the color that links are made in the light theme. For example, if the links have a blue in the light theme, then in the dark one, the links are light blue.
In a light theme, buttons can be bright and contrasty, especially 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.
By default, buttons with white or light gray backgrounds will have too much contrast and accent in a dark theme. A light border is sufficient to make the button stand out among other elements.
It is better to reduce the contrast of input fields as well as buttons. 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.
You don't need to lighten it too much when focusing on the input field. Just lighten up the border a bit.
Reducing contrast in a dark theme works for all design elements, including images and backgrounds. The 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 regular shadow effects in the light theme do not work for the dark one. They are faintly visible on dark backgrounds. Colored shadows create a strange glow in the dark, and their use is questionable.
The best solution is to give up the shadows in the dark theme. Depth levels with color elevation do their job without the use of shadows.
