Image by author

We interact with apps and read websites all day and night. In some cases, white screens of the digital solutions may be inconvenient for our eyes. That’s why more and more designers pay attention to make their creations in two themes — light and dark.

Dark mode has got specific rules that we should follow to make it natural for the users. This story contains all of them, so you can create a theme that brings positive experience.

Pros of Dark mode :

• It reduces eye strain.
• Dark mode saves energy on high energy-consuming screens like — OLED, AMOLED, etc.
• Battery efficient.
• Enhance accessibility for users.
• Create an impression of luxury.
• It looks stunning

Cons of Dark mode :

• In bright light conditions, it sucks, causes more eye strain.

Needs Improvement (Image by author)

This is a bad example of dark UI screen. We are going to follow some cool tips to improve and make better dark UI screen.

1. Avoid 100% Black Background (Up to you)

This is the common mistake we all made. We should use a very dark tone to the background. I prefer to use dark grey — rather than black.

But sometimes black is fine.

I personally use for dark mode these colors — #0e0a1b & #04020f.

Not too much dark

2. Avoid 100% white as well

Avoid using #FFFFFF in your dark mode UIs. It causes really large contrast with the background, so its better to use light versions for example #F6F6F6 or #FAFAFA etc. Its better for the eyes.

Hard to notice but better practice

3. Contrast & Accessibility

There are specific guidelines for dark themes to be applied if you would like to make the solution more accessible. The most important one is the following: the contrast level between body text and the background should be at least 15.8:1.

Its easier to forget about contrast when working on both light and dark themes. Always double check contrast ratio to make sure UIs are accessible.

Contrast is key

4. Avoid shadows

Avoid using white shadows to elevate stuff, it looks bad. Instead create elevation system based on different opacities of white or other colors.

In light User Interfaces, we tend to use subtle shadows to communicate depth. However shadows are not so visible on the majority of dark mode elements. This is why they should be used less frequently. There is another way to communicate hierarchy.

Avoid using white shadows

5. Desaturate colors

Dark modes should avoid using saturated colors. The first reason for this is accessibility — saturated colors do not pass WCAG’s standard of at least 4.5:1 for body text against the dark background.

Saturated colors may also cause eye strain, causing optical vibrations against the background.

Better to eyes