November 28, 2024
13 min
Justyna Labadz
Lead
True or false? It's a little more complicated. Dark mode can be a greener solution that increases battery life and reduces power draw, but only in particular conditions.
Body
"Having turned to the dark side" is no longer associated only with the Force of Dark Jedi in the Star Wars movie. As the dark mode is becoming increasingly popular, software and application owners popularize this feature through their channels as a way to use less energy and the way to manage battery drain.
To be precise, dark mode isn't anything new. The history of computers began with "dark mode." Or rather a dark view because there was no other option and mode at this time. Initially, all computer screens and their operating system were designed on a dark background with white or greenish letters. It didn't last long because the computers' dark theme was replaced with the brighter one and displayed black text on white. This switch was inspired by other papers and books that work, in most cases, with text on a white background. However, what is worth mentioning, is that those first computers with Cathode Ray Tube (CRT) monitors required less energy.
That's why, when in the early 2000' Google wanted to celebrate Earth Day, they changed the company's famous white interface to black and inspired other web creators who applied the exact solutions to their design. But it was at the time of the previously mentioned CRT monitors.
Now, 20 years later, technology evolved - but it doesn't mean, unfortunately, that it has become more environmentally friendly. However, the most popular while thinking about energy savings on the web still stays dark mode feature and improving user experience under special conditions of the device's usage.
Dark mode is a feature that allows users to switch the color scheme of a device or application from a light color scheme to a dark one. When this mode is enabled, the background display becomes black or very dark gray, and the text and other elements are displayed in lighter colors. The primary goal of the dark mode is to reduce the strain on the user's eyes and to make the display more comfortable to view in low-light conditions. However, it can also extend the battery life with OLED or AMOLED displays, while they use less power to display darker colors than lighter ones.
There is a difference between dark mode and dark background on the website. The dark background is more connected with the aesthetic side of the UI, even when users often change the mode to the dark for aesthetic reasons. However, when web designers create a website or an app with a black background, they do it accordingly to their strategy and different goals.
They can be, for instance:
To sum up, dark mode is a specific feature that allows users to switch the color scheme of a device or application. In contrast, a dark background is a specific visual element that can be used in conjunction with other design elements.
In terms of saving energy and the environment, both can work the same but are only used on OLED and AMOLED displays, which I will elaborate in the following paragraphs.
In recent years dark mode has become increasingly popular. First, this is because it represents a new approach to technology and features that deliver more physical and psychological benefits.
When dark mode appeared and became popular in digital products like websites and applications, many people switched to it, believing that it could help to save energy and, in this way, extend the battery life. However, only some users know it could work only on particular displays - OLED and AMOLED. LCDs, more popular in communication technology, may not necessarily be as energy efficient as they are supposed to be.
What are the differences between those displays?
LCD stands for Liquid Crystal Display, invented in 1964 by George H. Heilmeier. It is a display technology that uses liquid crystals to create an image. LCDs have been widely used in various devices, including smartphones, tablets, laptops, TVs, and digital signage, for many years. An LCD consists of several layers of material, including a layer of liquid crystals. However, many LEDs are used in the backlight, which is the central part of the equation. As long as your screen is on, every LED light consumes the same amount of power. It doesn't matter what color it is displayed on the LCD because pixels don't drain any power here. In this case, the backlight's brightness determines the display energy usage.
OLED stands for "organic light-emitting diode," and AMOLED is a shortcut for "active-matrix organic light-emitting diode." They both are types of display technology that use carbon-based, organic materials to create an image. However, while OLED displays use a simple matrix of electrodes to control current flow through the organic materials, AMOLED displays use a thin-film transistor (TFT) matrix. The key difference is not only the build of the matrix but also brightness, viewing angle, and, what may interest us the most, their power consumption. OLED is more energy efficient than AMOLED, which requires an additional TFT matrix to control the flow.
To sum up, an important difference between LCD and OLED screens is the use of individual LED light bulbs in OLED instead of a single backlight in LCD. The result is better picture quality, but dark colors also use less electricity since less is illuminated on the screen. Pixels light up only when needed, so the power draw of OLED displays will be smaller than others.
How about computer screens? Finding a laptop or monitor with an OLED display is still not common because this technology is quite expensive for large formats. So, of course, in most cases, users can switch to night light settings in Windows or other systems, but they should rather do it to filter out blue light and reduce eye strain than save energy.
In 2021 researchers from Purdue University tested how much OLED displays reduce energy (research from 2021). They tried out several smartphone models with the Android system, like Pixel 2, Moto Z3, Pixel 4, and Pixel 5. Despite not analyzing Apple phones, all of the devices since the iPhone X (2017) feature OLED displays, so the findings are likely to be similar.
Purdue researchers Pranab Dash and Charlie Hu were interested in discovering how much energy does dark mode really saves on Android battery. They examined energy consumption by a few of the most popular smartphone apps like calculator, Google Maps, YouTube, regular phone usage, and Google News App on different brightness levels. After one minute of testing each of those apps in the dark mode at 100 % brightness and the adaptive one, they measured and noted the results.
They discovered that OLED displays consume between 44% and 73% of the total phone's power during light mode at maximum brightness. However, since most people don't use their screens at full brightness, the study also measured the impact of brightness on energy consumption. It gave a surprising battery life figure. Changing from light to dark mode reduces the phone's power consumption by 42% at 100% screen brightness. When the brightness level is 50%, switching from light mode to dark mode saves 9 % of the battery, and when the brightness level is 30%, the saving is only 3 %.
According to researchers, dark mode on an OLED smartphone will save 3 to 9 percent of the power when used at 30 to 50 percent brightness, usually in line with the automatic brightness level.
In summary, the higher the brightness when switching from light mode, the greater the battery savings, both on iOS and Android. However, you will unlikely notice any difference even if you use the dark mode in darkness unless you need it to be at high brightness, such as on a sunny day.
If used properly, there are many benefits to using dark modes on your phone or computer:
There is a dark side of dark mode, and we can mention several reasons why and when you shouldn't change light mode to dark mode.
How about dark mode and accessibility? Dark mode can potentially make websites and apps more accessible for some users, particularly those with visual impairments, difficulty seeing, or who experience eye strain when looking at bright, white screens. Dark mode can reduce the amount of light emitted by a display, making it easier to read the text in high contrast and navigate menus and interfaces, especially in low-light conditions.
However, it's important to note that the benefits of dark mode will depend on the specific needs and preferences of the user. Some users may find that dark mode makes it easier to see and read text, while others may prefer the look and feel of a light color scheme. It's also essential to ensure that any text or elements displayed in dark mode are still legible and easy to read.
Overall, while dark mode can potentially make websites and apps more accessible for some users, it's important to consider the needs and preferences of the target audience and to ensure that the design is accessible and easy to use for all users. What we implemented at Dodonut's website is the offer to choose between three different color modes of the website:
What is crucial for us at Dodonut is to let the users decide which mode and background better serve them by providing a website with a mode switcher, which we implemented in our case.
So, if the dark mode does save electricity and become genuinely more sustainable? It can be, but as we examined earlier, only on OLED and AMOLED displays, and the impact will be more significant with the highest brightness of the display (but we still suggest relying on the auto-brightness feature, which is more often more effective). As we know from the research above, dark mode saves only 3%-9 % of power, assuming that our OLED displays work on auto-brightness. However, when users require higher brightness in dark mode, for instance, about 100%, in dark mode, he or she saves an average of 39%-47 % of the power, so almost half of the battery.
LCD users instead should find another way to achieve longer battery life, like turning off the apps or not using features at particular moments, like WIFI or Bluetooth. Still, those actions can be successfully applied both by OLED display users.
So, does it make no sense to apply dark modes to designs, devices, and their features to save the environment? Of course not. At Dodonut, we make users and web creators aware that even small actions, multiplied by many people, can help make a difference. Even if now OLED screens are not so popular in every phone and are too expensive for more computer displays, that doesn't mean that in the future, this technology will become more achievable and popular in tech solutions. What's also essential is that there are various shades between white and dark or black, so designers can see that their website can contain other colors that are more sustainable for the background between them. Check out what we wrote about colors here in the article.
Overall, while dark mode works only in particular settings and may be able to save some energy on certain types of displays, it is not a guarantee. It can be one of the ways to draw less power when displaying apps and websites on screens, and only in OLED and AMOLED displays. The best way to save energy on a device is to use it efficiently, such as by reducing the brightness of the display and closing apps when they are not in use or simply reducing their usage.
As web creators, we can encourage our users to try out night light settings. However, implementing a holistic approach to sustainable web design would be more valuable. Few of the ways to save energy and the same environment through sustainable web design we mentioned in the article "How to design a sustainable website?". We can optimize content (images, fonts, videos, animation), create well-working navigation, improve website performance, and provide the best user experience, among many others.
From the user perspective, we can behave more responsibly in our web usage. Every search and surfing web causes a carbon footprint, which is inevitable, but it's up to us to use a mindful approach that makes a difference and supports climate movement.
Resources:
Curious About Sustainable Design?
Dark mode is just the start of making tech greener. Whether you're interested in designing eco-friendly websites or creating user experiences that last, we can help. Let’s build something impactful together—get in touch today!
(1.0)
Learn
(2.0)
For manager
(3.0)
For developer
(4.0)
Adopt modern stack