Editing Light-on-dark color scheme

{{Short description|Type of color scheme}}
{{about|the technical scheme and its concept|information concerning usage of "dark mode" in Wikipedia|Wikipedia:Dark mode|selfref=y}}
{{redirect|Night mode|the Russian sci-fi thriller film|Night Mode (film)}}
{{Use American English|date=March 2022}}
{{Use mdy dates|date=March 2022}}
[[File:Mediawiki-skin-aether.png|thumb|Versions of a web site in normal display mode (left) and dark mode (right)]]
[[File:GNOME Shell, GNOME Clocks, Evince, gThumb, GNOME Files at version 3.30 (2018-09) in Dark theme.png|thumb|Dark theme for [[GNOME]]]]

A '''light-on-dark color scheme''', better known as '''dark mode, dark theme''' or '''night mode''', is a [[color scheme]] that uses light-colored text, icons, and [[graphical user interface elements]] on a dark background. It is often discussed in terms of computer [[user interface]] design and [[web design]]. Many modern websites and operating systems offer the user an optional light-on-dark display mode.

Some users find dark mode displays more visually appealing, and claim that it can reduce [[eye strain]].<ref>{{cite web |last=Cummins |first=Eleanor |date=November 21, 2018 |title=Dark mode is easier on your eyes—and battery |url=https://www.popsci.com/night-dark-mode-design |url-status=live |archive-url=https://web.archive.org/web/20230121021129/https://www.popsci.com/night-dark-mode-design/ |archive-date=Jan 21, 2023 |website=Popular Science}}</ref> Displaying white at full brightness uses roughly six times as much power as pure black on a 2016 [[Google Pixel]], which has an [[OLED|OLED display]].<ref>{{cite web |title=Use Dark Mode to Conserve Your Phone's Battery Power |url=https://lifehacker.com/use-dark-mode-to-conserve-your-phones-battery-power-1830368436 |date=November 11, 2018 |author=Emily Price |website=[[Lifehacker]] |accessdate=2021-03-20 |archive-date=January 27, 2023 |archive-url=https://web.archive.org/web/20230127114202/https://lifehacker.com/use-dark-mode-to-conserve-your-phones-battery-power-1830368436 |url-status=live }}</ref> However, conventional [[LED display|LED displays]] cannot benefit from reduced power consumption.<ref>{{Cite book |last1=Eisfeld |first1=Henriette |url=http://urn.kb.se/resolve?urn=urn:nbn:se:hj:diva-50563 |title=The Rise of Dark Mode : A qualitative study of an emerging user interface design trend |last2=Kristallovich |first2=Felix |date=2020}}</ref> Most modern operating systems support an optional light-on-dark color scheme.<ref>{{Cite web |author=Murphy |first=David |date=October 28, 2020 |title=Embrace Evil by Enabling Dark Mode in Every App |url=https://lifehacker.com/embrace-evil-by-enabling-dark-mode-in-every-app-1845497287 |url-status=live |archive-url=https://web.archive.org/web/20201116193004/https://lifehacker.com/embrace-evil-by-enabling-dark-mode-in-every-app-1845497287 |archive-date=2020-11-16 |access-date=2020-11-15 |website=[[Lifehacker]]}}</ref>

== History ==
[[File:Zork on CRT display.jpg|thumb|The video game ''[[Zork]]'' running on a green-on-black CRT display]]
Predecessors of modern computer screens, such as cathode-ray oscillographs, oscilloscopes, etc., tended to plot graphs and introduce other content as glowing traces on a black background.

With the introduction of computer screens, originally user interfaces were formed on [[cathode-ray tube|cathode-ray tubes (CRTs)]] like those used for oscillographs or oscilloscopes. The [[phosphor]] was normally a very dark color, and lit up brightly when the [[electron beam]] hit it, appearing to be white, green, blue, or amber on a black background, depending on phosphors applied on a [[monochrome]] screen. [[RGB]] screens continued to operate similarly, using all the beams set to "on" to form white.

With the advent of [[teletext]], research was done into which primary and secondary light colors and combinations worked best for this new medium.<ref>{{Cite web|last=Petterson|first=Rune|date=March 1985|title=Use of colors in Teletext and Videotex|url=https://www.researchgate.net/publication/281936183|website=[[ResearchGate]]}}</ref> Cyan or yellow on black was typically found to be optimal from a palette of black, red, green, yellow, blue, magenta, cyan and white.

The opposite color set, a '''dark-on-light color scheme''' ('''light mode''' or '''light theme'''), was originally introduced in [[WYSIWYG]] [[word processor]]s to simulate ink on paper, and became the norm.

[[Microsoft]] introduced a dark theme in the [[Anniversary Update]] of [[Windows 10]] in 2016.<ref>{{Cite web |title=The Anniversary Update's most exciting features: Windows 10 users weigh in |url=https://www.pcworld.com/article/415733/the-anniversary-udates-most-exciting-features-windows-10-users-weigh-in.html |access-date=2023-08-07 |website=PCWorld |language=en |archive-date=July 30, 2024 |archive-url=https://web.archive.org/web/20240730012845/https://www.pcworld.com/article/415733/the-anniversary-udates-most-exciting-features-windows-10-users-weigh-in.html |url-status=live }}</ref> In 2018, [[Apple Inc.|Apple]] followed in [[macOS Mojave]].<ref>{{Cite web |date=October 25, 2019 |title=macOS Mojave: Dark Mode, Stacks, & More |url=https://www.macrumors.com/roundup/macos-10-14/ |url-status=live |archive-url=https://web.archive.org/web/20220808141343/https://www.macrumors.com/roundup/macos-10-14/ |archive-date=2022-08-08 |access-date=2022-08-08 |website=MacRumors |language=en}}</ref> In September 2019, [[iOS 13]] and [[Android 10]] both introduced dark modes.<ref>{{Cite web |last=Hardwick |first=Tim |date=June 6, 2019 |title=How to Enable Dark Mode in iOS 13 |url=https://www.macrumors.com/how-to/enable-dark-mode-in-ios-13/ |url-status=live |archive-url=https://web.archive.org/web/20220808141343/https://www.macrumors.com/how-to/enable-dark-mode-in-ios-13/ |archive-date=2022-08-08 |access-date=2022-08-08 |website=MacRumors |language=en}}</ref><ref>{{Cite web |last=Callaham |first=John |date=2019-09-03 |title=Here's how to enable the Android 10 dark theme mode |url=https://www.androidauthority.com/android-10-dark-theme-1025156/ |url-status=live |archive-url=https://web.archive.org/web/20220808141344/https://www.androidauthority.com/android-10-dark-theme-1025156/ |archive-date=2022-08-08 |access-date=2022-08-08 |website=Android Authority |language=en}}</ref> Some operating systems provide tools to change the dark mode state automatically at sundown or sunrise.<ref>{{Cite web| title = The best dark mode extensions for Google Chrome| work = Android Authority| access-date = 2024-12-03| date = 2024-09-16| url = https://www.androidauthority.com/best-dark-mode-extensions-google-chrome-3295454/}}</ref>

[[Firefox]] and [[Chromium (web browser)|Chromium]] have optional dark theme for all internal screens. It will also be possible for third-party developers to implement their own dark themes.<ref>{{Cite web|url=https://www.theverge.com/2019/6/3/18647199/ios-13-dark-mode-apple-features-battery-saving-release-date-wwdc-2019|title=Dark mode is coming to iOS 13|last=Porter|first=Jon|date=2019-06-03|website=The Verge|access-date=2019-06-05|archive-date=August 7, 2019|archive-url=https://web.archive.org/web/20190807053751/https://www.theverge.com/2019/6/3/18647199/ios-13-dark-mode-apple-features-battery-saving-release-date-wwdc-2019|url-status=live}}</ref> There are also a variety of browser add-ons that can re-theme web sites with dark color schemes, also aligning with system theme.<ref>{{Cite web| title = The best dark mode extensions for Google Chrome| work = Android Authority| access-date = 2024-12-03| date = 2024-09-16| url = https://www.androidauthority.com/best-dark-mode-extensions-google-chrome-3295454/}}</ref>

In 2019, a "prefers-color-scheme" option was created for [[Front-end web development|front-end web developers]], being a [[CSS]] property that signals a user's choice for their system to use a light or dark color theme.<ref name=":0" />

In July 2024, [[Wikipedia]]'s mobile website received a dark mode.<ref>{{Cite web |last=Mehta |first=Ivan |date=2024-07-12 |title=Wikipedia's mobile website finally gets a dark mode |url=https://techcrunch.com/2024/07/12/wikipedias-mobile-website-finally-gets-a-dark-mode-heres-how-to-turn-it-on/ |access-date=2024-07-13 |website=[[TechCrunch]] |language=en-US |archive-date=July 13, 2024 |archive-url=https://web.archive.org/web/20240713040329/https://techcrunch.com/2024/07/12/wikipedias-mobile-website-finally-gets-a-dark-mode-heres-how-to-turn-it-on/ |url-status=live }}</ref> The desktop website later received a dark mode as well.<ref>{{Cite web |last=Purdy |first=Kevin |date=2024-07-29 |title=Darkness reigns over Wikipedia as official dark mode comes to pass |url=https://arstechnica.com/gadgets/2024/07/wikipedia-finally-has-an-official-dark-mode-on-desktop-and-mobile/ |access-date=2024-07-29 |website=[[Ars Technica]] |language=en-us |archive-date=July 29, 2024 |archive-url=https://web.archive.org/web/20240729234627/https://arstechnica.com/gadgets/2024/07/wikipedia-finally-has-an-official-dark-mode-on-desktop-and-mobile/ |url-status=live }}</ref>

== Energy usage ==
Light on dark color schemes require less energy to display on [[OLED]] displays. This positively impacts battery life and reduces energy consumption.<ref>{{Cite web |last=Gottsegen |first=Gordon |date=Nov 10, 2018 |title=Using Android's dark mode improves battery life, Google confirms |url=https://www.cnet.com/news/using-androids-dark-mode-improves-battery-life-google-confirms-p/ |url-status=live |archive-url=https://web.archive.org/web/20221227222448/https://www.cnet.com/tech/mobile/using-androids-dark-mode-improves-battery-life-google-confirms-p/ |archive-date=Dec 27, 2022 |website=CNET}}</ref>

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.<ref>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|url=https://web.archive.org/web/20120125223142/http://arstechnica.com/gadgets/news/2009/08/this-september-oled-no-longer-three-to-five-years-away.ars |date=2012-01-25 }}. Arstechnica.com. Retrieved 2011-10-04.</ref> 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.<ref>{{Cite web|url=https://www.xda-developers.com/amoled-black-vs-gray-dark-mode/|title=No, "AMOLED Black" Does NOT Save More Battery Than Dark Gray|date=June 27, 2019|last=Raga|first=Dylan|website=XDA}}</ref> In November 2018, [[Google]] confirmed that dark mode on Android saved battery life.<ref>{{Cite web|url=https://www.theverge.com/2018/11/8/18076502/google-dark-mode-android-battery-life|title=Google confirms dark mode is a huge help for battery life on Android|last=Welch|first=Chris|date=November 2, 2018|website=The Verge|access-date=January 30, 2020|archive-date=December 8, 2019|archive-url=https://web.archive.org/web/20191208015626/https://www.theverge.com/2018/11/8/18076502/google-dark-mode-android-battery-life|url-status=live}}</ref>

== Issues with the web ==
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. Others<ref>{{Cite web |last=Sharma |first=Adamya |date=2020-06-29 |title=Love dark mode? Here's why you may still want to avoid it |url=https://www.androidauthority.com/dark-mode-1046425/ |url-status=live |archive-url=https://web.archive.org/web/20200924091033/https://www.androidauthority.com/dark-mode-1046425/ |archive-date=Sep 24, 2020 |access-date=2020-09-12 |website=Android Authority}}</ref><ref>{{Cite magazine|last=Clarke|first=Laurie|date=2019-07-30|title=Dark mode isn't as good for your eyes as you believe|magazine=Wired UK|url=https://www.wired.co.uk/article/dark-mode-chrome-android-ios-science|access-date=2020-09-12|issn=1357-0978|archive-date=June 22, 2023|archive-url=https://web.archive.org/web/20230622175218/https://www.wired.co.uk/article/dark-mode-chrome-android-ios-science|url-status=live}}</ref><ref>{{cite web |last1=Budiu |first1=Raluca |date=February 2, 2020 |title=Dark Mode vs. Light Mode: Which Is Better? |url=https://www.nngroup.com/articles/dark-mode/ |url-status=live |archive-url=https://web.archive.org/web/20230214144737/https://www.nngroup.com/articles/dark-mode/ |archive-date=Feb 14, 2023 |website=Nielsen Norman Group}}</ref> argue to the contrary. Some pages on the [[World Wide Web|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.

There is a <code>prefers-color-scheme</code> media feature on [[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]].<ref name=":0">{{Cite web |title=prefers-color-scheme - CSS: Cascading Style Sheets |url=https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme |url-status=live |archive-url=https://web.archive.org/web/20210318082819/https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme |archive-date=2021-03-18 |access-date=2021-03-18 |website=[[MDN Web Docs]]}}</ref><ref>{{Cite web|last=Walsh|first=David|date=2019-01-28|title=prefers-color-scheme: CSS Media Query|url=https://davidwalsh.name/prefers-color-scheme|access-date=2021-03-18|website=David Walsh Blog|archive-date=March 17, 2021|archive-url=https://web.archive.org/web/20210317162842/https://davidwalsh.name/prefers-color-scheme|url-status=live}}</ref>

CSS example:
<syntaxhighlight lang="css">
@media (prefers-color-scheme: dark) {
    body {
        color: #ccc;
        background: #222;
    }
}
</syntaxhighlight>
<syntaxhighlight lang="css">
<span style="background-color: light-dark(#fff, #333); color: light-dark(#333, #fff);"></span>
</syntaxhighlight>
JavaScript example:<ref>{{Cite web |title=Window.matchMedia() - Web APIs |url=https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia |url-status=live |archive-url=https://web.archive.org/web/20210302135113/https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia |archive-date=2021-03-02 |access-date=2021-03-18 |website=MDN Web Docs |quote=The Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query}}</ref>
<syntaxhighlight lang="javascript">
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    dark();
}
</syntaxhighlight>

== See also ==
* [[AMOLED]]
* [[Blackle]]
* [[Night Shift (software)]]
* [[Night light (Windows)]]
* [[OLED]]
* [[Solarized|Solarised (color scheme)]]

== References ==
{{Reflist}}

{{color topics}}

[[Category:User interfaces]]
[[Category:Display technology]]
[[Category:Color schemes]]
[[Category:Computer graphics]]