DEV Community

Cover image for Dark Mode and webapps
Pritesh Usadadiya
Pritesh Usadadiya

Posted on

Dark Mode and webapps

We are seeing more and more products that offer a "dark mode" feature that turns look of your webpapp Dark and text light

The question i am wondering is that, Does it work better than normal color contrast ?

I see lot of people saying that it's better for the eyes. is it ? is there any scientific study behind this ?

As a developer how do you approach this ? I mean, What things you consider before making this feature available to make sure that it works well with other elements of your app ? (i.e. In a app where users can customize apps entire theme or portion of it. like, dev.to's profile theme)

As form the Accessibility point of view, how does it affect end users perception of an app, specially for visually impaired users for whom this can be instantly uncomfortable and hard to read.

Top comments (8)

Collapse
 
necrotechno profile image
NecroTechno

From an accessibility standpoint, from what I understand, it's not so much an issue of whether the background and text is dark or light as it is the contrast between the two. At a certain point, if the value of the text and background is too similar, it can make the text nearly impossible to read.

I've also heard that dark mode is a lot easier on the batteries of hand held devices.

Collapse
 
priteshusadadiya profile image
Pritesh Usadadiya

it's not so much an issue of whether the background and text is dark or light as it is the contrast between the two

Agreed

I've also heard that dark mode is a lot easier on the batteries of hand held devices.

Well, that's new :)

Collapse
 
theredspy15 profile image
Hunter Drum

Due to just about every new phone having AMOLED; dark backgrounds (more so completely blacked out) are actually huge battery savers

Thread Thread
 
priteshusadadiya profile image
Pritesh Usadadiya

Thanks for the detail Hunter :)

Collapse
 
kennydesigns profile image
Alexander Aguilar • Edited

I highly prefer dark themes over bright ones to the point that the first thing I do upon using any new site, app, etc. is to toggle it on. Personally, I find dark themes to be easier on my eyes especially when I'm staring at code all day long where else the typical bright white color gives me a headache. I also tend to browse the internet in low-light right before bed so the dark themes help me to relax. Adding on to that, I'll often avoid visiting certain sites altogether because they're too bright or I can't easily turn on the dark theme causing me to leave in frustration. Luckily for me, it seems as though dark themes or 'night modes' are becoming more common place on the web such as on YouTube or Reddit. From a user's perspective, I really appreciate being given this option even if my choices are limited to just light vs dark. As someone getting in to web development, I also appreciate it cause I think dark themes just look a whole lot cooler in addition to them being easier on my eyes.

Collapse
 
priteshusadadiya profile image
Pritesh Usadadiya

good point Alexander. I too have brightness set to 60% at all times.(it's easier on the eyes 👀)

Collapse
 
niorad profile image
Antonio Radovcic

It depends on the medium, the surroundings, and the font-weight/size.

When the contrast between your surroundings and your screen is to high, it gets uncomfortable.

White on black is better readable on projectors, especially crappy ones. With black-on-white, the white area bleeds too much into the letters. With w-o-b the letters can "shine".

Also recent studies show, that white-on-black is healthier for the eye.

Personally, I prefer white-on-black for terminals and coding, black-on-white for reading and writing, except at night or dark rooms.

Collapse
 
priteshusadadiya profile image
Pritesh Usadadiya

Interesting analogy Antonio. i guess personal preference matters a lot in this regard.
I was just reading something on Graphic Design

This was a take on by Graphic Design on Stack Exchange

Most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background.

Reference: Bauer, D., & Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp. 137-142). London: Taylor & Francis

Ok, 26% improvement – but why?

People with astigmatism (aproximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the "deformed" lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.