Dark mode

History

Microsoft introduced a dark theme in the Anniversary Update of Windows 10 in 2016. In 2018, Apple followed in macOS Mojave. In September 2019, iOS 13 and Android 10 both introduced dark modes. Some operating systems provide tools to change the dark mode state automatically at sundown or sunrise. There are also a variety of browser add-ons that can re-theme web sites with dark color schemes, also aligning with system theme. Wikipedia's mobile and desktop versions received a dark mode option in 2024.

Implementation

There is a prefers-color-scheme media query in CSS, to detect if the user has requested light or dark color scheme and serve the requested color scheme. It can be indicated from the user's operating system preference or a user agent.

CSS example:

::code[lang=css]
<span style="background-color: light-dark(#fff, #333); color: light-dark(#333, #fff);"></span>
::

JavaScript example:
::code[lang=javascript]
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    dark();
}
::


## Energy usage
Light on dark color schemes require less energy to display on OLED displays. This positively impacts battery life and reduces energy consumption.

While an OLED will consume around 40% of the power of an LCD displaying an image that is primarily black, it can use more than three times as much power to display an image with a white background, such as a document or web site. This can lead to reduced battery life and higher energy usage unless a light-on-dark color scheme is used. The long-term reduced power usage may also prolong battery life or the useful life of the display and battery.

The energy savings that can be achieved using a light-on-dark color scheme are because of how OLED screens work: in an OLED screen, each subpixel generates its own light and it only consumes power when generating light. This is in contrast to how an LCD works: in an LCD, subpixels either block or allow light from an always-on (lit) LED backlight to pass through.

"AMOLED Black" color schemes (that use pure black instead of dark gray) do not necessarily save more energy than other light-on-dark color schemes that use dark gray instead of black, as the power consumption on an AMOLED screen decreases proportionately to the average brightness of the displayed pixels. Although it is true that AMOLED black does save more energy than dark gray, the additional energy savings are often negligible; AMOLED black will only give an additional energy saving of less than 1%, for instance, over the dark gray that's used in the dark theme for Google's official Android apps. In November 2018, Google confirmed that dark mode on Android saved battery life.

## Web issues
Some argue that a color scheme with light text on a dark background is easier to read on the screen, because the lower overall brightness causes less eyestrain, while others argue to the contrary. Some pages on the web are designed for white backgrounds; Image assets (GIF, PNG, SVG, WOFF, etc) can be used improperly causing visual artifacts if dark mode is forced (instead of designed for) with a plugin like Dark Reader.

## References



## References

1. https://sniklaus.com/darkpapers
2. Cummins, Eleanor. (November 21, 2018). ["Dark mode is easier on your eyes—and battery"](https://www.popsci.com/night-dark-mode-design).
3. Emily Price. (November 11, 2018). ["Use Dark Mode to Conserve Your Phone's Battery Power"](https://lifehacker.com/use-dark-mode-to-conserve-your-phones-battery-power-1830368436).
4. (2020). ["The Rise of Dark Mode : A qualitative study of an emerging user interface design trend"](http://urn.kb.se/resolve?urn=urn:nbn:se:hj:diva-50563).
5. ["Winning the Game of Contrast: MiniLEDs and Local Dimming Displays"](https://www.radiantvisionsystems.com/blog/winning-game-contrast-minileds-and-local-dimming-displays).
6. Murphy. (October 28, 2020). ["Embrace Evil by Enabling Dark Mode in Every App"](https://lifehacker.com/embrace-evil-by-enabling-dark-mode-in-every-app-1845497287).
7. ["The Anniversary Update's most exciting features: Windows 10 users weigh in"](https://www.pcworld.com/article/415733/the-anniversary-udates-most-exciting-features-windows-10-users-weigh-in.html).
8. (October 25, 2019). ["macOS Mojave: Dark Mode, Stacks, & More"](https://www.macrumors.com/roundup/macos-10-14/).
9. Hardwick, Tim. (June 6, 2019). ["How to Enable Dark Mode in iOS 13"](https://www.macrumors.com/how-to/enable-dark-mode-in-ios-13/).
10. Callaham, John. (2019-09-03). ["Here's how to enable the Android 10 dark theme mode"](https://www.androidauthority.com/android-10-dark-theme-1025156/).
11. Porter, Jon. (2019-06-03). ["Dark mode is coming to iOS 13"](https://www.theverge.com/2019/6/3/18647199/ios-13-dark-mode-apple-features-battery-saving-release-date-wwdc-2019). *Android Authority*.
12. (2024-09-16). ["The best dark mode extensions for Google Chrome"](https://www.androidauthority.com/best-dark-mode-extensions-google-chrome-3295454/). *Android Authority*.
13. Mehta, Ivan. (2024-07-12). ["Wikipedia's mobile website finally gets a dark mode"](https://techcrunch.com/2024/07/12/wikipedias-mobile-website-finally-gets-a-dark-mode-heres-how-to-turn-it-on/).
14. Purdy, Kevin. (2024-07-29). ["Darkness reigns over Wikipedia as official dark mode comes to pass"](https://arstechnica.com/gadgets/2024/07/wikipedia-finally-has-an-official-dark-mode-on-desktop-and-mobile/).
15. ["prefers-color-scheme - CSS: Cascading Style Sheets"](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
16. Walsh, David. (2019-01-28). ["prefers-color-scheme: CSS Media Query"](https://davidwalsh.name/prefers-color-scheme).
17. ["Window.matchMedia() - Web APIs"](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
18. Gottsegen, Gordon. (Nov 10, 2018). ["Using Android's dark mode improves battery life, Google confirms"](https://www.cnet.com/news/using-androids-dark-mode-improves-battery-life-google-confirms-p/).
19. Stokes, Jon. (2009-08-11) [https://arstechnica.com/gadgets/news/2009/08/this-september-oled-no-longer-three-to-five-years-away.ars This September, OLED no longer "three to five years away"] {{webarchive. [link](https://web.archive.org/web/20120125223142/http://arstechnica.com/gadgets/news/2009/08/this-september-oled-no-longer-three-to-five-years-away.ars). (2012-01-25 . Arstechnica.com. Retrieved 2011-10-04.)
20. Raga, Dylan. (June 27, 2019). ["No, "AMOLED Black" Does NOT Save More Battery Than Dark Gray"](https://www.xda-developers.com/amoled-black-vs-gray-dark-mode/).
21. Welch, Chris. (November 2, 2018). ["Google confirms dark mode is a huge help for battery life on Android"](https://www.theverge.com/2018/11/8/18076502/google-dark-mode-android-battery-life).
22. Sharma, Adamya. (2020-06-29). ["Love dark mode? Here's why you may still want to avoid it"](https://www.androidauthority.com/dark-mode-1046425/).
23. Clarke, Laurie. (2019-07-30). ["Dark mode isn't as good for your eyes as you believe"](https://www.wired.co.uk/article/dark-mode-chrome-android-ios-science).
24. (February 2, 2020). ["Dark Mode vs. Light Mode: Which Is Better?"](https://www.nngroup.com/articles/dark-mode/).

::callout[type=info title="Wikipedia Source"]
This article was imported from [Wikipedia](https://en.wikipedia.org/wiki/Dark_mode) and is available under the [Creative Commons Attribution-ShareAlike 4.0 License](https://creativecommons.org/licenses/by-sa/4.0/). Content has been adapted to SurfDoc format. Original contributors can be found on the [article history page](https://en.wikipedia.org/wiki/Dark_mode?action=history).
::