Blog

Dark mode vs Light Mode

I am sure that this battle between Dark mode and Light mode is never ending. Studies show that in general, dark mode is healthier for users, if used correctly. One of the biggest benefits of dark mode is that it is better for your eyes. Sitting in front of bright screens all day affects the secretion of melatonin. This is a hormone that helps us to fall asleep. This is why some people may struggle to sleep or even have headaches!

I have noticed that recently more apps and web products have started offering dark mode. Apple said “Dark Mode makes it easier to stay focused on your work, because your content stands out while darkened controls and windows recede into the background”.

# When to use dark UI?

  • When you want to give your users the feel of a dark environment like in a movie.

  • When you want the core element of the page to stand out and gain prominence

  • When you want to reduce eye strain and make it comfortable for users to stay long in your website

# Tips

  • Avoid Pure Black/White - 100% color brightness and black have 0% color brightness causes the user’s eyes to work harder to adapt to the brightness.

  • Avoid Saturated Colors - Less saturated colors from your color palette improve legibility and reduce visual vibration.

  • Communicate depth - The more elevated the surface is, the stronger and brighter the overlay becomes.

  • Avoid Shadows - Shadows on dark themes don’t serve the same purpose as they do on light themes, also they don’t look good.

# The Summary:

  • Night is dark. Screen is bright. Eyes hurt.

  • Night is dark. Screen is dark. Eyes not hurt.

Image placeholder

V. Hristova

Engineer Front-end developer