DEV Community

Cover image for Dark Mode and webapps
Pritesh Usadadiya
Pritesh Usadadiya

Posted on

3 1

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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

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
 
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.

 
priteshusadadiya profile image
Pritesh Usadadiya β€’

Thanks for the detail Hunter :)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay