The main advantage of dark themes is their increased readability in low-light environments. Dark mode reduces the luminance emitted while still maintaining proper color contrast. It improves visual ergonomics and appropriately adjusts to specific light conditions

Each of these features make it more pleasant to use technological devices in the evening or late at night. More interestingly, if your device has an OLED or AMOLED screen display, dark mode can significantly increase its battery life.

Because of its many useful benefits, dark mode has become one of the biggest trends in design, and many world-class brands like Apple, Google and Facebook have already implemented dark themes. In support of its growing popularity, we’ve put together a short guide on how to properly create dark mode designs.

Don’t go too dark

Often, the first thing that comes to mind when creating a dark version of a design is too simply change the background to basic black (000000). Although this may seem like a sensical choice, don’t do it — using a pure black background is a common mistake, as the contrast is too stark. It causes readers to squint and can lead to headaches. A very dark shade of grey is a better choice.

Desaturate colors

Consider making colors less saturated. This is to maximise accessibility — saturated colors don’t pass WCAG’s standard. Highly saturated colors may also cause eye strain and optical vibrations against dark backgrounds.

Two color palletes

They must know, then, that the above-named gentleman whenever he was at leisure (which was We already know that desaturated colors work better for the dark theme. Then again, we all love vivid tones in light interfaces. Therefore, it’s wise to create complementary palettes for both themes.

Accessibility

The dark mode has specific guidelines to make the solution more accessible. The most important rule: the contrast level between the text and background should be at least 15.8:1. This solution increases the readability, even if device surfaces will be lighter.

Communicate depth

They must know, then, that the above-named gentleman whenever he was at leisure (which was As we know, shadows don’t work so well in the dark mode. A better way to communicate hierarchy in a user interface is to play with the brightness — as a surface rises in elevation, it becomes lighter in color.