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 decompose everything in the design into layers and imagine which objects are closer and which are deeper.
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%.
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.
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.
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.
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.
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 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.
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.