How to win with design for dark mode interfaces

HOW TO WIN WITH DESIGN FOR DARK MODE INTERFACES

Dark themes are less fierce and are usually experienced better in dark environments and reduce eye fatigue. This has been one of the most requested features in recent years. But how do you design for dark mode?

AVOID PURE BLACK & WHITE
It isn't that easy to invert colors when switching to dark mode. In case, white text on a black background can be painful for the eyes.
That's why it is safer to work with dark gray tones. Material design recommend #121212 as the dark gray surface color.

AVOID COLORS
Saturated colors can look amazing on a white background, but will vibrate on dark surfaces. It will decrease the readability, so make sure you don't use to much saturated colors. Use light tones between the 200 - 50 range.

ACCESSIBILITY WITH COLOR CONTRAST STANDARDS
Make sure your content is comfortable to read and has enough contrast. Google Material Design has the guideline to make the contrast level at least 15.8: I between text and the background.
There are several tools and plugins that you can use to test the contrast level:

• WebAlM Color Contrast Checker
• Tanaguru Contrast Finder
• NoCoffee Vision Simulator

REDUCE LARGE BLOCKS OF BRIGHT COLORS
In light theme we often use brighter colors for large blocks. For dark mode this is different, because big blocks with bright colors pull the focus from the important elements. So don't overkill with bright colors.

RECTANGLES FOR 3TH PARTY IMAGESILOGOS
When you can't check the brandguidelines for a white logo or are able to get those, make sure to draw a white rectangle behind the original logo.

DEPTH & HIERARCHY
It's important to create a visual hierarchy in your dark Ul and empathize important elements.
In light mode, we use shadows on objects to express elevation. With dark mode this isn't possible so we use color overlays. The higher the elevation, the lighter the surface will be.

Some Extra Tips

• Be flexible to switch to other colors.
• Don't forget to check the company's brand guidelines.
• Be able to switch to other colors that look better on dark.
• Utilize brand color as the color accent.
• Only use pure black for shadows.
• Allow users to switch between dark and light mode.

YOU'RE READY TO DESIGN
Let me know your thoughts in the comments, would love to hear you!