No doubt it will offer you all the advantages mentioned above while leaving an impression of black to the untrained eye! Choose your primary and secondary colors dark mode color dark mode ux ui webdesign For your primary color , go for a light color with enough saturation to stand out in any situation. On the other hand, it should not be too saturated to prevent it from "vibrating" on a dark background. This color will be used for your backgrounds, borders and text. Make sure that the readability is optimal! As far as the secondary color is concerned, you have two choices: a more discreet hue that highlights your primary color or an equally light tone. The second choice is however excluded if your interface has a strong need to prioritize certain elements.
Calibrate your whites caliber white photo retouching service dark dark mode app UX The base color for a dark mode is pure white (FFFFFF) but this shade would tend to "vibrate" on a dark background. Google Material Design recommends using a slightly darker white: Crucial texts should have an opacity of 87% Those of medium importance of 60% Least important 38% Light text on a dark background may appear bolder than dark text on a light background. Use a lighter grease for your dark mode! Read also: UX/UI Design: 5 rules to enhance your creations Set your levels Source While light themes use shadows to highlight their page (buttons, animations when clicking, etc.
Dark themes rely on transparencies, since the depth is harder to determine on this type of background. Start with three levels: 0, -1 and 1 . You can create more, but be careful not to make your visitors dizzy! dark as space dark mode darkmode webdesignSource We have already mentioned it: readability is less on a dark background than on a light background. To remedy this, generously distribute areas of space in your design to improve readability and make your elements more noticeable. Read also: Inspiration: to avoid with dark mode You have meticulously studied the possible colors for your web interface and you have opted for a dark design.