DEV Community


Posted on • Originally published at

Actually, dark mode can save the planet

This is an update to an article I wrote last year. I'll briefly go over it again here. There's no need to read the old article, actually I'd rather you didn't.

Was Blackle right?

Many years ago, I was introduced to Blackle.

Blackle is just Google with a black background. Why? A black background uses less light, and so less electricity than a white background — and if everyone used Blackle we'd pollute less carbon into the atmosphere — and every little helps — well that's the idea anyway — but is it true?

Sort of.

In 2007, when Blackle was first launched, cathode ray tube (CRT) monitors were still popular —  around 25% of desktop computer monitors were CRTs — and CRTs do use less electricity displaying black pixels than white pixels.

A CRT monitor is one of those old non-flat ones. They look like this:

A CRT monitor

The blog post that inspired blackle used this 25% figure to suggest that 750 megawatt-hours a year would be saved if google went black.

That's equivalent to the electricity use of about 53 households in the USA.

The remaining CRT screens were rapidly replaced with Liquid crystal displays. LCDs use the same power regardless of the screen color — and so Blackle became redundant…

That is, until OLED screens became a thing. OLED screens, like CRTs, use less energy when the screen is darker — and so, once again using dark mode saves electricity — and prevents CO2 emissions.

How much CO2 does dark mode save on an OLED screen?

We'll do some quick napkin math, and get a very rough idea of what kind of energy savings we're dealing with here — we'll use an iPhone as an example.

Mobile Enerlytics, (a company that researches mobile battery drain), estimates dark mode saves anywhere between 1.8% and 44.7% of battery life depending on what activity is being performed and the screen brightness settings of the phone.

For instance, reading The Verge on dark mode at 38% screen brightness saves 23.5% battery life, compared with light mode.

An iPhone X uses a 20 watt charger and takes ~1 hour to charge. If you charge it fully once per day, that's 20 watt hours a day, 7.2 kilowatt hours a year.

I imagine people probably spend most of the time on their phone browsing the web, on social media apps, or messaging — that's entirely based on my own experience and not on any data (because I can't find any). So we'll make a conservative estimate that dark mode saves 5% of battery life.

In the USA 0.4kg of CO2 is emitted per KWh.

So 1 million iPhone Xs on dark mode for a year would save about 144,000kg of CO2.

The same emissions as 31 cars.

That was where the previous article concluded.

Dark mode saves a tiny amount of energy. It's not nothing — but with 200 million cars in the USA alone, it feels like nothing.

But a big part of this story is missing.

Built in emmisions

The largest source of carbon emissions from smart phones and tablets is their production.

According to Apple, each new iPhone 12 will produce 80kg of carbon. 14% is from using the device, 2% from transport, < 1% from "end of life processing" and 83% from its production.

Producing less stuff has a much larger impact than using stuff less — and one of the reasons people buy new stuff is because their old stuff is broken.

One reason people buy a new phone is that the battery has died.

Companies like Apple make it costly and difficult to replace a battery — and so, people tend to buy a new phone instead.

Lithium ion batteries can only be used so many times before they stop working — Apple says iPhone batteries maintain 80% of their capacity after 500 charging cycles.  

The more energy a phone uses — the sooner it stops working.

So, supporting dark mode may save more carbon than a few cars.

Emissions intensity

Increasing the lifetime of a product prevents a new product being created — which will emit carbon from it's manufacture, transport, packaging, and end-of-life.

How you calculate the effect a product's lifetime has on the environment is not immediately obvious (at least to me!)

But generally, the way it is done is by spreading the built in emissions across the lifetime of the product — then dividing those emissions by some measure that's relevant to the use of that product.

This is called emissions intensity.

An example of emissions intensity

The emissions intensity of say, a car, would be calculated with respect to how much mileage the car gives you. If it takes 1000 tons of CO2 to build a car and it only travels 10 kilometers before it explodes, the emissions intensity of the car would be 100 tons per kilometer.

For the sake of simplicity we'll use the metric, CO2 per year for the calculation of our smartphone emission intensities, and we'll compare it to some other things to give it context.

Calcualting how much dark mode saves

I don't know how much dark mode increases the life-time of a phone battery. I've tried my best to find out, but there's too much uncertainty.

So instead of giving you my best guess. I've made a tool that allows you to input your best guess on the missing data.

I've prefilled it with information from the iPhone 12 environmental report, using 100 million units, and my best guesses. The code for the calculator is at the bottom of the article.

Hopefully it'll give you an idea of the scope of this issue.

There's some factors I've left out:

  • The likelyhood of getting a new phone goes up over time, new models are released, your phone has aged in other ways, software updates have stopped.
  • The direct energy savings — mentioned at the start of the article.
  • The second hand market — phones don't just have one owner before they end up in landfill.
  • Batteries get replaced — and the carbon used to manufacture a battery is less than the device as a whole.
  • Maybe dark mode also reduces the chance of screen burn-in, or increases the life-time of other parts.

And there's likely some I haven't thought of at all.

Why your website (or app) should support dark mode?

It's our responsibility as designers and developers to minimize the damage our products cause. Dark mode does have environmental benefits — and that should be reason enough. But it's also what the people want!

  • It's easier on the eyes.
  • It saves battery.
  • Its light is more flattering — therefore you're more likely find to love.

What's more, some browsers have the option to use forced dark mode for websites that don't support it. This means your website may not render as you intended — and can lead to readability issues:

Here's a screen shot from in forced dark mode on Google Chrome. The links become difficult to read.

A screenshot of the markup with a link that is difficult to read

What have I missed?

If you have any expertise, insider knowledge, or sources you'd like to add, let me know, and I'll happily update this article.

Top comments (1)

moopet profile image
Ben Sinclair

It's all good points, though you could say that the effort people all put in to making and maintaining a second theme for every one of their products ends up using more electricity as well!

My only non-efficiency quibble is that "dark mode" isn't necessarily "easier on your eyes", mostly because "dark mode" isn't a thing.

Since forever, people have made products with themes or skins and they have included ones which are light-on-dark, and some are gentle (think, "solarized") while some are harsher (think "tango" or "hi-contrast").

The technology trend that pushes people to implement an entire theming layer but then deliberately restrict that to two variants means that you (the developer) have to make a bunch of choices on behalf of the user. Do you want your dark mode to be easy on the eyes or better for accessibility? Is it important that people can read your text while out walking in the sunshine and at home? Do you care about people with deuteranopia?

Making a theme layer that isn't restricted to two variants means people can choose what works for themselves.

And we can still hook into things like prefers-dark-mode provided by the system as a starting point.

The way I see the future working is that more information is exposed through an API from the OS, including the entire colour scheme. Then, for example CSS could use

... but I think the point about it helping you find love deserves a research grant.