Dark Mode within apps, native programs, and the user interface of operating systems is becoming commonplace. Certainly as an option for users to choose whether they want their system to default to dark mode or not.
With websites, however, it feels like the trend is slower on the uptake. This isn’t a surprise and is likely due to the fact that the majority of websites are used as a digital home for a brand. If the brand doesn’t have a dark colour scheme, then the website is also likely not to have a dark colour scheme. It makes sense.
But, with changing technologies, darker colour schemes could have an effect on the environmental impact of a website, or any other digital product or service for that matter.
A [very] short history of ‘dark modes’
A long time ago it was the default that computer systems ran in ‘dark mode’. Limited by technology that couldn’t illuminate the entire screen without burning out, dark colours were the only option. As technology improved and screen types changed from CRT to Plasma, LCD, and then LED, a wider gamut of colours could be supported.
As the method of lighting the screen changed, so too did the power consumption of using different colours. On LCD for example the entire screen is backlit (this is also the case for LED screens). This means that using a darker colour palette for a website didn’t necessarily use that much less power than a light one. That changed when OLED technology hit the market.
The introduction of OLED
OLED screens are equal parts winner and loser when it comes to energy consumption compared to LED. They use a totally different lighting system, with each pixel being lit, rather than the entire screen being backlit. While an LED-backlit screen with the brightness settings turned down might win out on power consumption over an OLED with the same settings, an OLED will win if the content on the screen is darker in colour.
Why dark mode is beneficial for OLED
The reason for this is down to the individual pixel lighting. If the content on the screen is totally black, the pixels showing that content on an OLED screen can be effectively turned off. Meaning the screen will consume less power. The more pixels that can be turned off, the less power the screen will consume.
How dark mode affects battery drain on mobile devices
Using dark mode on apps as well as the system UI can have a pretty dramatic effect on battery drain. A 2018 study found that using dark mode could cut total battery drain by 1.8% to 23.5%. This is dependant on a number of factors. The device which is used, the amount it is used, and the specific apps that are being used. But, the savings here are pretty clear. Moving to dark mode can reduce battery drain.
How to implement dark mode on a website
Like anything within web development, there are always a number of methods to achieve the same thing. Implementing dark mode is no different. Here are a few different methods with varying levels of difficulty and time needed.
Method One: The one-line instant dark-ish mode
The quickest method of implementing a dark mode of sorts to your already developed website.
Pros: It is super quick to implement
Cons: No way to customise. Not very reliable or accessible
html {
filter: invert(1) hue-rotate(180deg);
}
More Cons: Images are inverted
To combat images being inverted, you can run the same line of code to reverse the effects for images only.
img {
filter: invert(1) hue-rotate(180deg);
}
Method Two: Adding a toggle between styles
Pros: You can have the best of both and appease user preferences
Cons: More code needed
Definitely the most complex of the approaches, but maybe the best solution. This way you’re giving your users the choice, but you can also set your default theme too.
<div id='theme-container' data-theme="light">
<button id='theme-selector' onclick="toggleTheme()" role="button" aria-label="Toggle the website theme">Toggle theme</button>
<section>
<hgroup>
<h1>Toggle light and dark mode</h1>
<h2>This theme is <i id='theme-type'>light</i></h2>
</hgroup>
<p>You may have chosen this in your preferences, or toggled it using the Toggle theme button.</p>
</section>
</div>
h1,
h2,
p {
color: inherit;
}
#theme-container {
transition: background-color 0.3s, color 0.3s;
}
#theme-container[data-theme~='light'] {
background-color: #f2f2f2;
color: #111;
}
#theme-container[data-theme~='dark'] {
background-color: #111;
color: #f2f2f2;
}
// first set up our constants for the containers
// get the main theme container. this could also be your html or body element
const themeContainer = document.getElementById('theme-container');
// get the container of the theme text within the title - just for our demo
const themeType = document.getElementById('theme-type');
// get any stored theme in local storage
const storedTheme = localStorage.getItem('theme');
// check if stored theme exists
if (localStorage.getItem('theme')) {
// set the default theme to the stored theme
themeContainer.setAttribute('data-theme', storedTheme);
themeType.innerHTML = storedTheme;
} else if (window.matchMedia('(prefers-color-scheme)').matches) { // check if browser supports prefered color scheme
// check the default preference on load
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
// set the default theme to the prefered theme
themeContainer.setAttribute('data-theme', 'dark');
themeType.innerHTML = 'dark';
} else if (window.matchMedia("(prefers-color-scheme: light)")) {
// set the default theme to the prefered theme
themeContainer.setAttribute('data-theme', 'light');
themeType.innerHTML = 'light';
}
// if user changes their prefered scheme to dark
window.matchMedia("(prefers-color-scheme: dark)").addListener(
e => {
if(e.matches) {
// set the default theme to the prefered theme
themeContainer.setAttribute('data-theme', 'dark');
themeType.innerHTML = 'dark';
}
}
);
// if user changes their prefered scheme to light
window.matchMedia("(prefers-color-scheme: light)").addListener(
e => {
if(e.matches) {
// set the default theme to the prefered theme
themeContainer.setAttribute('data-theme', 'light');
themeType.innerHTML = 'light';
}
}
);
}
// create the theme toggle function
function toggleTheme(){
// get our changing theme data attribute
let currentTheme = themeContainer.getAttribute('data-theme');
// if the theme is light, change to dark and vis versa
if(currentTheme === 'light'){
// change the data attribute to dark
themeContainer.setAttribute('data-theme', 'dark');
// change the title text to the current theme
themeType.innerHTML = 'dark';
// set local storage theme
localStorage.setItem('theme', 'dark');
} else {
// change the data attribute to light
themeContainer.setAttribute('data-theme', 'light');
// change the title text to the current theme
themeType.innerHTML = 'light';
// set local storage theme
localStorage.setItem('theme', 'light');
}
}
See this CodePen example to see how this works.
Method Three: Dark mode by default
Pros: Potentially less code needed
Cons: No user preference/choice for light or dark
The third method is in some ways very simple in its approach. Design and build in a darker colour palette from the start. Drop the toggle, the detection of preference over lighter themes and use dark mode all the time.
This was the approach for our own website. The idea is that the site will always use a little less power from a visitor’s machine when viewed on an OLED screen. Whether on a mobile device, laptop, or desktop screen. However, we realised this didn’t give enough choice to users. Not everyone likes dark modes for reading. So, we decided to implement method two instead.
Conclusion
Whichever method you take, it’ll be great to see more dark mode compatible websites out there. So many devices now use OLED screens and that trend isn’t going away.
Using dark mode is just one more method we can employ to make our websites that little bit more sustainable when viewed across devices. Websites that use less energy mean the devices use less power and should need to be charged less, ultimately leading to people producing less carbon.
References:
eyeondesign.aiga.org
cnet.com
mobileenerlytics.com