Does Dark Mode Reduce a Website's Energy Use?
Understand when dark mode can reduce display energy, why results vary by device and brightness, and how to preserve readability and user choice.
Part of our guide: Sustainable Websites: A Practical Guide for Small Businesses
Dark mode can reduce display energy on some devices, particularly those using OLED screens. It does not produce the same saving on every screen, and it does not make the rest of a website’s delivery impact disappear.
Choose dark mode for a useful, accessible experience first. Any energy claim should be tied to the device, brightness and test conditions rather than presented as a universal percentage.
Understand the display difference
OLED pixels emit their own light, so darker content can use less display power. Many LCD displays use a backlight, which changes the relationship between page colour and energy use.
The device’s brightness setting and the content on screen also matter. A dark interface with a large bright image is different from a mostly dark reading page.
Purdue’s research summary explains why dark-mode savings depend strongly on conditions. Do not turn a study’s particular results into a promise for every visitor.
Thinking about your own rebuild?
Tell us about your business, your current website and what you would like to improve. We will help you work out the next step.
Keep colour choices consistent with the principles in website accessibility.
Separate the screen from the whole website
Changing colours does not necessarily reduce image downloads, server work, scripts or network activity. Those parts remain important.
The website carbon-footprint guide describes the wider system, while the sustainability guide helps prioritise practical improvements.
Dark mode is one design option, not a substitute for reducing unnecessary resources.
Respect the visitor’s preference
Some people find a dark theme more comfortable in low light. Others read more easily with a light background.
Use a sensible default informed by the system preference, with an understandable control where appropriate. Avoid forcing a theme purely to support a marketing claim.
Make the selected state and its persistence predictable. A theme switch should not cause the page to lose the visitor’s place.
Test both themes properly
Check text, links, focus indicators, form fields, errors and disabled controls. A colour combination that works on a light background may fail on a dark one.
Review photographs and logos too. A transparent asset may disappear, and a bright rectangular image can create an uncomfortable contrast.
The low-impact design guide keeps these checks within the overall art direction rather than treating dark mode as a simple colour inversion.
Avoid creating extra waste
Two themes do not need two copies of every large asset. Use suitable styling and only supply alternative images when they serve a real purpose.
Test whether theme-specific files are downloaded unnecessarily. Keep the implementation maintainable so future content changes do not break one mode.
A feature intended to help should not quietly add substantial complexity without a clear benefit.
Measure only what your test can establish
A browser screenshot cannot measure energy. Device-level testing needs an appropriate method, and results remain tied to the hardware and workload.
The carbon-estimation guide explains why modelled page figures should not be confused with measured battery savings.
If you have no suitable energy evidence, describe dark mode as a display preference rather than a quantified environmental achievement.
Keep the decision proportionate
For a small business site, fixing unreadable text, oversized media or a broken form may be more urgent than introducing a second theme.
Where dark mode is useful, build and test it as a complete experience. Review it when new components are added.
For help assessing whether a dark theme would improve your website, contact AfterWorks.
