Why I Use Light Mode

What's up everyone?

Welcome to Next in Dev, a podcast where I'll cover topics and news about modern web dev technology.

On today's episode, I'm going to address a comment that I get quite often on my editor’s theme.

I won't be talking about any company or code or anything in particular like that.

But I am going to cover a very important topic that we should be talking about as web developers, and that's accessibility.

Specifically, I'm going to touch on the importance of dark mode and light mode.

Dark mode has existed for a long time in web development, but it wasn't until about 2019 that browsers had widespread support for it through the CSS media query.

Prefers color scheme.

That means that any dark mode color scheme from before 2019, if it existed at all, was based on cookies, local storage, or a user's preferences stored in a database.

That does mean, though, that not many sites implemented dark mode based on a user's preferences.

And if we're honest, it was more or less treated as an afterthought.

And sometimes today it's still treated as an afterthought.

Dark mode has some real benefits, though.

I'm not going to knock that.

So it's great that now browsers and operating systems treat dark mode as a first class feature now so is dark mode important?

Yes. in low light environments, dark mode can reduce the strain that our screens put on our eyes.

overall screen luminance and glare are reduced in dark mode, and this can prevent discomfort in dim settings.

One's eyes may adjust more easily between a dark room and a dark screen.

That said, this is only beneficial if that person is working at night or in a dark room.

Black pixels consume less energy on OLED screens because they emit no light.

that makes Dark Mode a power and battery saving option for modern devices like mobile phones, laptop screens, TVs.

And a lot of ways, dark mode just looks a lot cooler than light mode does.

Yes, I understand that this is also just user preference, but there's just something about a dark background with light text that just works.

While dark mode is important, we have to remember that light mode exists for a reason.

One thing that many people don't consider is that light mode is an accessibility feature.

Not everyone perceives content the same way.

so to assume light mode is just altogether inferior is a UX mistake.

there are a couple of groups of people to consider where light mode is going to be preferred.

for those with an astigmatism like me, Dark mode can get uncomfortable when used for too long.

About half the US population has some sort of astigmatism.

According to a study done by the World Health Organization, An astigmatism can make a dark background with light text have what's called a halation effect or halo effect.

Which makes light text appear to have a glow, or to be fuzzy, which is kind of how I perceive traffic lights at night without my glasses.

people with dyslexia also have an easier time with light mode than they do dark mode.

According to an article from the Bureau of Internet Accessibility, extreme contrast like pure white over pure black, can cause legibility issues for those with dyslexia.

lighter background with an adequately contrasting darker text color is preferred for this population.

It's best in general to avoid that pure black and pure white combination, so many people of different varieties can enjoy your website as well.

just like light mode is an accessibility feature, dark mode is also an accessibility feature.

The first population who really enjoys dark mode are going to be the ones who suffer from chronic migraines.

Some people suffer from migraines that are caused by bright lights, so light mode can be a trigger event for their migraine.

So I get it.

In this case, many people are going to prefer to consume their content in dark mode.

Another group of people are those who have a light sensitivity called a photophobia.

Dark mode tends to be easier on the eyes in normal circumstances when ambient light is low.

This means that times like sundown or sunrise, or in rooms that have few lights or dim lights, dark mode could be the preferred way to consume content.

if there's not a lot of light, or it's dark outside, a dark theme may be more appropriate for your editing needs.

There are peer reviewed studies, like one presented on nature.com that claim that reading in light mode might promote nearsightedness, while reading in dark mode might prevent it.

This is not a definitive claim at this point, though, but research does suggest that this is one benefit of dark mode.

Now, with all of that to say, what should you do?

Dark mode is a first class feature now in browsers and operating systems, and it should be treated as such.

Your dark mode theme should look just as good as your light mode theme, and vice versa.

All the accessibility and contrast rules that you would normally put into your preferred theme Should apply to the opposite theme so that everybody, or as many people as possible can enjoy your website or your app.

Consider people who rely on keyboards to interact with your website.

Does your focus have sufficient contrast against your darker backgrounds?

If not, then you have some work to do.

A simple way to handle dark mode is to design with your user preference in mind.

You ultimately want to provide the user with a way to interact with your site, the way that they want to interact with it.

It's important to support dark mode.

It's also important to support light mode.

It's also important to remember that a user's preference may also be an accessibility concern, and should not be ignored.

If you want to support Dark mode, please do it.

If you want to support light mode, I recommend it.

However, if you're going to support either, always allow a way for your user to choose what they prefer.

if you can't provide a toggle, theme provider, or a theme selector, then the simplest way is to design based on the prefers color scheme CSS media query.

This way, you're designing based on a user's browser's color preference.

This is extremely easy to do, even with CSS alone.

Since you're able to target a user's preferences with just a few lines of CSS, you can easily design for multiple accessibility needs at once just using CSS.

Tools like tailwind CSS make this easy to do too, with their modifiers that allow you to target based on light mode, dark mode, prefers contrast, reduce contrast, reduced motion, no motion.

All of it.

All of that's included with tailwind CSS.

It's up to you, my developer friends, to make your website or app as accessible to as many people as possible.

The tools are at your disposal.

So why do I use light mode?

Because in environments with a lot of lights, like when the sun is out or in studio lights, I have a hard time reading and focusing on dark backgrounds with light text.

in fact, especially in normal lighting situations, light mode is a relief to my astigmatism.

When the sun starts to set earlier, my dark mode will kick in sooner, which will then be more comfortable for my eyes during that season.

In the case of my IDE, though, I'm unable to switch my color theme based on who's watching the video.

And that's unfortunate.

Since that's the case, I need to use what's most comfortable for me, just as you need to use what's most comfortable for you.

However, as I design, I'll keep in mind the people who have different accessibility needs than I do, and I hope you will too.

Now I want to hear what you think.

Leave a comment and I'll do my best, as I always do, to respond to all of them.

But until then, I'll see you on the next one.