To light-dark() or Not To light-dark()

• light-dark() MDN
• Come to the light-dark() Side - Sara Joy
• Light mode versus Dark mode, why not both? — Sara Joy (11ty Conf 2024)
• A sustainable web for everyone - Tom Greenwood - SotB2021
• Easy Light-Dark Mode Color Switching with light-dark() - Bramus
• The A11y Project - resources
• Dark Mode Can Improve Text Readability — But Not for Everyone
• An aura of accessibility - Adam Saucier
• Dark Mode vs. Light Mode: Which Is Better? - Raluca Budiu
• Shedding light on dark mode to save energy
• What's the difference between AMOLED, OLED, and POLED?
• Dark Mode vs. Light Mode in Web Design
• SotB 2025 light-dark() demos

OK. To light-dark() or not to light-dark() that's the question I'm going to be asking today. My name is Niya. I'm a master student at the University of Greenwich studying web design, and this is my first time at State of the Browser, so thank you for having me.

Today, I'm going to talk to you about light and dark mode and how to enable it using the light-dark() CSS function.

Before I start, I want to make a quick disclaimer that there will be some small flashes and changes between light and dark colors, I apologize in advance if that triggers someone.

So what is light-dark() mode? Light-dark() mode means that we have two interface color schemes that we for our websites, you can set the preference for light or dark mode or even both for specific hours when to switch between them. What then happens is when a user visits our website, the browser checks if we have enabled both on websites. Looks at the user's operating settings for the preferred color scheme and displays it.

If the user has not set a preferred color scheme, by default, the browser will display the website in light mode. But why is it actually important to have both modes enabled on our websites?

Enabling both modes used to be considered nice to have, but now, it's slowly becoming the norm for good user experience. Offering both modes can have great impact on users' decisionmaking. You might want to encourage subscriptions or purchases with our websites.

And in some cases, by destructing the experience, we might discourage them from taking that step and purchasing that product or signing up for the newsletter. What I want to focus on next are visual accessibility needs that we may not think of that often, unless we have one or know someone who does.

And I'm talking about conditions like astigmiatism, dyslexia, low vision, cataracts, migraines, and photophobia. Enabling light and dark mode for people with such conditions can be crucial to their experience on the web.

For example, people with astigmiatism, dyslexia, low vision, might prefer a brighter color screen because it's easier to focus when there's no light reaching their eye. And for them, light mode makes the content easier to read, especially if it's a longer piece of text.

On the other hand, people with migraines or photophobia, which is sensitivity to light might prefer content that's presented in darker colors. For them, light mode has the opposite effect. When there is too much light, their eyes struggle to create a clear and focused image. So they might prefer dark mode.

Where lower levels of light reach their eyes and make it easier for them to focus. OK. If we think about a user's overall journey on the web, where some websites support both modes, and some support the one that's not their choice, and they're going from one website to the next, all of that switching between modes can pretty much guarantee to cause them eyestrain in the end, even if they don't have a condition.

OK. So here I used a browser extension called stark accessibility checker to simulate a few examples of how some of those people may be experiencing the web. And I'm using the A11y project website just as an example here.

This first example is of how someone with cataracts or blurred vision would likely see the website in either light or dark mode.

This is how someone with astigmatism would likely see it. And this is how people with tunnel vision would likely see it. You should also bear in mind that what I'm showing you will not be 100% the same for everyone.

For some people, their condition might be more severe and for others, it may be less. But this still gives us a good understanding of how people can experience the web. We should also consider that there could be many other reasons why someone would prefer one or the other.

Situational and environmental conditions can also influence a user's preference. Maybe it's a bright and shiny day, and this is a simulation of exactly that, bright light directly on the screen.

Maybe a person is sitting in their office trying to finish their project on time and meet the deadline. But they can barely see their screen because of that light. We wouldn't want them to miss their deadline. Well, if the website has both modes available, it's easy, the person can switch between and continue the work. But what if that was impossible?

They'll likely get pretty annoyed because they can't do their job. Another example can be that someone recently had eye surgery, and they used to prefer dark mode, but now during the recovery, light mode just works better for them.

We can't really predict when and which mode our users would prefer or need to use. So it's important that when possible, we provide them with the choice and don't make it on their behalf. Now, let's look into sustainability. Before joining the industry, I had heard a rumor that dark mode can save energy.

But I didn't really believe it since I didn't know exactly how it saves the energy. So I did my research, and I can confirm that the rumors are actually true. And they're true because of the impact that colors have on energy consumption, which is biggest devices in all screens, smartphones, laptops, tablets have.

In those screens, the power is individually sourced to each pixel, and the darker the color that they're displaying, the less energy they consume. And when they're displaying a pure black color, the pixels turn off completely and don't use any energy at all.

Now, these are some statistics from research done by the university on how much energy dark mode can actually save. They're not set percentages for each and every device since there are more factors to consider, like age of the device. But shows us a benefit to using darker colors. And we consider how many people the devices applies, even small percentages make a big difference.

OK. And since displaying dark colors on the screens means the energy being used is much lower than when displaying bright colors, it makes dark mode more energy efficient. Meaning, that by enabling it on our websites, we can reduce the power usage on devices up to 47%. And save and extend battery life for portable devices like smartphones and laptops.

So what are the benefits of enabling both modes? Regardless of whether we prefer our designs to be light or dark themed, we still need to consider our users and their needs. There's no right or wrong when it comes to choosing light or dark mode. People have different needs that we may not even be aware of, which is why it's best to offer both.

It will give users control over how they want to experience our websites, which will also enhance their overall experience and satisfaction. Both modes have also been known to help users focus and improve the website's readability depending on the needs. For someone with dyslexia, it might be increased with light mode and someone with migraines, in dark mode.

Because of the use of dark colors, dark mode specifically can also help with making screen flickering less noticeable. And lastly, depending on the -- designing a website for both modes allows a brand to be more adaptive.

It provides various color combinations that remain aligned and associated with the brand. This approach maintains brand consistency and recognition across all user devices regardless of the mode they choose. And it can also assist with physical products that a brand may decide to produce in the future by providing different color combinations to be used on different products.

So how do we light-dark()? Up until now, we would have to use the preferred schema query and some JavaScript, probably. And our code would look something like this. Or this. Where we would have to repeat ourselves and declare the color values twice for each mode.

But what if we could make it look like this? A bit simpler. All that code that you just saw can be replaced by just this. So let's see how easy it is to actually start doing it. We now have the light-dark() CSS function, which we can use instead of media queries to make our job a little bit easier and our code a bit simpler.

We can apply the light-dark() function anywhere in CSS that we would normally declare a color value. But instead of one, light-dark() can take two color values. Inside the bracket, we will declare the first color that will be for light mode and the second one for dark mode.

And depending on the user's preferred mode, the browser will render the document in one of the two colors. So now, I'm going to show you a few demos of how you actually put this to work.

So, to enable light-dark() mode, I first declare the color scheme property with the light and dark values to indicate in which color schemes I want the document to be rendered in. I test it quickly with the dev tools to make sure it works.

Then, I go ahead and apply the light-dark() function to the elements and properties I want to change, depending on the mode. Which in this case are the body text and background. And I just save it and test it with the dev tools just quickly, make sure it works.

And that I want to remain the same regardless of the mode my website is in. Which in this case are the navigation menu and the button. And then, check it one more time with the dev tools. That's it. So here, again, in this example, I start by declaring the color scheme property. And I'm quickly switching to light mode with the dev tools to check that it works.

The browser displays the website in dark mode because that's what I have as default on my laptop. In the root, I have also declared my color variables and applied the light-dark() function with the color suite on the switch between. And then, I go ahead and declare the different variables to the elements I want. And in this case, I want the whole page to change depending on the mode.

And then, I just save it and test it with the dev tools, again. And everything works. So for the last example, I took the code from the previous one. And just added a feature for light-dark() where I'm using HTML and CSS only, to make that work.

I can see -- and how I did this -- was that I added some value attribute to the light and dark options, and then, in CSS, I just target them with the class and the value attribute and declared the color scheme property, again, with a single value for either light or dark for the whole root of the document.

And that's all I needed, basically. OK. Some considerations. We need to be aware that since the function is quite new, it's currently supported in more recent browser versions and it has a coverage of almost 87%, which means that it may not work on some of the other browser versions. So we need to keep that in mind. That light-dark() is still a simple starting point to make our websites visually accessible.

And limitations we currently have are that the color scheme properties support only light and dark themes only at the moment. And that the light and dark function accepts only two color values, one for light mode and one for dark mode.

But if we needed some small changes in our design because let's say the front looks heavier in light mode than in dark mode, then intention behind light-dark() was exactly that. To act as an intermediate step towards a more powerful function.

And the good news is that in the future, there are more plans to add more values to the color scheme property, along with the option to create custom ones, which we might decide to use to create custom themes for low and high contrast along with the light and dark themes.

And, there is a function that has been proposed in the CSS working group issue currently named scheme value. The idea behind it, we would use it similar to light-dark() but we would be able to declare more than just two color values that we want to change.

Like different background images for each mode, which will definitely make designing themes for our websites much more pleasant and less complex. To summarize, there is no right or wrong when it comes to light and dark mode. Different people have different needs that we need to be considerate of.

And the best way to do this is just by enabling both modes. By doing so, we accommodate users' needs and offer two different ways for them to experience our websites. And instead of media queries, we can now use the light-dark() CSS function to save us time and simplify our code.

So my question is, would you like dark? Before I finish, I want to say a quick thank you to everyone on this slide for helping me develop the talk in one way or another and to Dave for giving me the opportunity and inviting me to speak.

Thank you for listening.

Transcript by Diane (in Iowa) from White Coat Captioning