Dark mode design tips

Technology is almost constantly present in our lives. As we interact with various websites, tools and applications both day and night, the artificial, bright light of our devices' screens accompanies us at every step. As a result of us staring at our gadgets, our eyes can become strained (especially while looking at blue light in dark surroundings). This being the case, an increasing number of designers and platforms are taking notice of this and are offering their users the option of using Dark Mode.

‍

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.

‍

…and test it!

See how your UI looks in both appearances and ensure that the themes are well constructed. For best results, you should also test dark mode at night and in low-light conditions. Once you’ve tested the functionality, you’re all set to allow users to switch from light to dark mode whenever they want!