Light-on-dark color scheme

Last updated

Versions of a web site in normal display mode (left) and dark mode (right) Mediawiki-skin-aether.png
Versions of a web site in normal display mode (left) and dark mode (right)
Dark theme for GNOME GNOME Shell, GNOME Clocks, Evince, gThumb, GNOME Files at version 3.30 (2018-09) in Dark theme.png
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.

Contents

Some users find dark mode displays more visually appealing, and claim that it can reduce eye strain. [1] Displaying white at full brightness uses roughly six times as much power as pure black on a 2016 Google Pixel, which has an OLED display. [2] However, conventional LED displays cannot benefit from reduced power consumption. [3] Most modern operating systems support an optional light-on-dark color scheme. [4]

History

The video game Zork running on a green-on-black CRT display Zork on CRT display.jpg
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 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. [5] 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, was originally introduced in WYSIWYG word processors to simulate ink on paper, and became the norm.

Microsoft introduced a dark theme in the Anniversary Update of Windows 10 in 2016. [6] In 2018, Apple followed in macOS Mojave. [7] In September 2019, iOS 13 and Android 10 both introduced dark modes. [8] [9] Some operating systems provide tools to change the dark mode state automatically at sundown or sunrise. [10]

Firefox and Chromium have optional dark theme for all internal screens. It will also be possible for third-party developers to implement their own dark themes. [11] There are also a variety of browser add-ons that can re-theme web sites with dark color schemes, also aligning with system theme. [12]

In 2019, a "prefers-color-scheme" option was created for 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. [13]

In July 2024, Wikipedia's mobile website received a dark mode. [14] The desktop website later received a dark mode as well. [15]

Energy usage

Light on dark color schemes require less energy to display on OLED displays. This positively impacts battery life and reduces energy consumption. [16]

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. [17] 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. [18] In November 2018, Google confirmed that dark mode on Android saved battery life. [19]

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 [20] [21] [22] 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.

There is a prefers-color-scheme 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. [13] [23]

CSS example:

@media(prefers-color-scheme:dark){body{color:#ccc;background:#222;}}
<spanstyle="background-color: light-dark(#fff, #333); color: light-dark(#333, #fff);"></span>

JavaScript example: [24] 

if(window.matchMedia('(prefers-color-scheme: dark)').matches){dark();}

See also

Related Research Articles

<span class="mw-page-title-main">Screensaver</span> Computer program that blanks the screen or fills it with moving images

A screensaver is a computer program that blanks the display screen or fills it with moving images or patterns when the computer has been idle for a designated time. The original purpose of screensavers was to prevent phosphor burn-in on CRT or plasma computer monitors. Though most modern monitors are not susceptible to this issue, screensaver programs are still used for other purposes. Screensavers are often set up to offer a basic layer of security by requiring a password to re-access the device. Some screensaver programs also use otherwise-idle computer resources to do useful work, such as processing for volunteer computing projects.

<span class="mw-page-title-main">Screen burn-in</span> Disfigurement of an electronic display

Screen burn-in, image burn-in, ghost image, or shadow image, is a permanent discoloration of areas on an electronic visual display such as a cathode-ray tube (CRT) in an older computer monitor or television set. It is caused by cumulative non-uniform use of the screen.

<span class="mw-page-title-main">Flexible display</span> Type of computer monitor

A flexible display or rollable display is an electronic visual display which is flexible in nature, as opposed to the traditional flat screen displays used in most electronic devices. In recent years there has been a growing interest from numerous consumer electronics manufacturers to apply this display technology in e-readers, mobile phones and other consumer electronics. Such screens can be rolled up like a scroll without the image or text being distorted. Technologies involved in building a rollable display include electronic ink, Gyricon, Organic LCD, and OLED.

<span class="mw-page-title-main">AMOLED</span> Display technology for use in mobile devices and televisions

AMOLED is a type of OLED display device technology. OLED describes a specific type of thin-film-display technology in which organic compounds form the electroluminescent material, and active matrix refers to the technology behind the addressing of pixels.

<span class="mw-page-title-main">Universal Display Corporation</span> Developer and manufacturer of OLED technologies

Universal Display Corporation is a developer and manufacturer of organic light emitting diodes (OLED) technologies and materials as well as provider of services to the display and lighting industries. It is also an OLED research company. Founded in 1994, the company currently owns or has exclusive, co-exclusive or sole license rights with respect to more than 3,000 issued and pending patents worldwide for the commercialization of phosphorescent based OLEDs and also flexible, transparent and stacked OLEDs - for both display and lighting applications. Its phosphorescent OLED technologies and materials are licensed and supplied to companies such as Samsung, LG, AU Optronics CMEL, Pioneer, Panasonic Idemitsu OLED lighting and Konica Minolta.

<span class="mw-page-title-main">Samsung Galaxy S series</span> Series of smartphones and tablet computers

The Samsung Galaxy S series is a line of Android-based smartphones and tablet computers produced by Samsung Electronics. In conjunction with the foldable Galaxy Z series, the series serves as Samsung's flagship smartphone lineup, and is the high-end line of the wider Samsung Galaxy family of Android devices.

Google Pixel is a brand of portable consumer electronic devices developed by Google that run either ChromeOS or the Pixel version of the Android operating system. The main line of Pixel products consists of Android-powered smartphones, which have been produced since October 2016 as the replacement of the older Nexus, and of which the Pixel 9, Pixel 9 Pro and Pixel 9 Pro XL are the current models. The Pixel brand also includes laptop and tablet computers, as well as several accessories, and was originally introduced in February 2013 with the Chromebook Pixel.

The Samsung Galaxy Express (GT-I8730) is a smartphone made by Samsung which was launched in March 2013 in India featuring a similar design to the Galaxy S Duos but with additional features such as 4G LTE, NFC. It also features a bigger 4.5-inch screen with Super AMOLED Plus and retains all the features which the Samsung Galaxy S III phone has.

<span class="mw-page-title-main">Moto X (1st generation)</span> Android smartphone developed by Motorola Mobility

Moto X is an Android smartphone developed and manufactured by Motorola Mobility, and released in August 2013.

The Droid Maxx is a smartphone developed by Motorola Mobility. It is the first Droid to be a high end smartphone exclusively developed by Motorola for Verizon Wireless. It is part of the Verizon Droid line, and was announced on 23 July 2013 along with the Droid Ultra and Droid Mini at a joint Motorola and Verizon Wireless press conference.

<span class="mw-page-title-main">Samsung Galaxy S6</span> Line of Android-based smartphones by Samsung Electronics

The Samsung Galaxy S6 is a line of Android-based smartphones manufactured, released and marketed by Samsung Electronics. Succeeding the Samsung Galaxy S5, the S6 was not released as a singular model, but instead in two variations unveiled and marketed together—the Galaxy S6 and Galaxy S6 Edge—with the latter differentiated primarily by having a display that is wrapped along the sides of the device. It is distinguished from its predecessor through a internal battery with an increased charging speed but a decreased capacity, an optically stabilized camera, sound in slow motion video recordings, a glass back, and it lacks a user-replaceable battery, a memory card slot, water resistance, and MHL-to-HDMI connection for viewing on an external monitor or television set.

<span class="mw-page-title-main">Nexus 6P</span> Android smartphone developed and marketed by Google and manufactured by Huawei

Nexus 6P is an Android smartphone developed and marketed by Google and manufactured by Huawei. It succeeded the Nexus 6 as the flagship device of the Nexus line of Android devices by Google and was the final Nexus before Google switched to the Pixel lineup. Officially unveiled on 29 September 2015 along with the Nexus 5X at the Google Nexus 2015 press event held in San Francisco, it was made available for pre-order on the same day in United States, United Kingdom, Ireland, and Japan.

Mobvoi Information Technology Company Limited is a technological company headquartered in Beijing, China that sells and develops consumer electronics and Chinese voice recognition, natural language processing, and vertical search technology in-house.

<span class="mw-page-title-main">Android Oreo</span> Eighth major version of the Android mobile operating system

Android Oreo is the eighth major release and the 15th version of the Android mobile operating system.

An always-on display (AOD) is a computer-device feature mostly found on smartphones that has the device display show limited information while the phone is asleep. It is widely available on Android handsets, and is available on Apple iPhone Pro models since the iPhone 14 Pro. On some Android devices, the feature is sometimes called Ambient Display or Active Display, depending on its implementation and behavior. Depending on the phone's design, it may be a replacement or complementary to another feature, such as the notification LED.

<span class="mw-page-title-main">Android Pie</span> Ninth major version of the Android mobile operating system

Android Pie, also known as Android 9 is the ninth major release and the 16th version of the Android mobile operating system. It was first released as a developer preview on March 7, 2018, and was released publicly on August 6, 2018.

<span class="mw-page-title-main">Samsung Galaxy A70</span> 2019 phablet by Samsung

The Samsung Galaxy A70 and A70s are a series of Android phablets manufactured by Samsung Electronics as part of its fifth-generation Galaxy A series lineup. The phones feature Android 9 (Pie) with Samsung's proprietary One UI skin, 128 GB of internal storage, and a 4500 mAh battery. The A70 was unveiled in South Korea on April 19, 2019.

<span class="mw-page-title-main">Notification LED</span> Light on a smartphone to indicate new notifications

A Notification LED is a small RGB or monochrome LED light usually present on the front-facing screen bezel of smartphones and feature phones whose purpose is to blink or pulse to notify the phone user of missed calls, incoming SMS messages, notifications from other apps, low battery warning, etc., and optionally to facilitate locating the mobile phone in darkness. It usually pulses in a continuous way to draw the attention of the user. It is a part of the device's notification system that uses a cloud-powered push notification service to relay remote notification messages to the user, or local notifications. Similar to audio notifications, a notification LED is a very battery-efficient way to inform the user of new notifications without turning on the screen at all.

SlimRoms is an Android custom ROM. Its main feature is the many setting options of the user interface. The last release was in 2018.

References

  1. ↑ Cummins, Eleanor (November 21, 2018). "Dark mode is easier on your eyes—and battery". Popular Science. Archived from the original on January 21, 2023.
  2. ↑ Emily Price (November 11, 2018). "Use Dark Mode to Conserve Your Phone's Battery Power". Lifehacker . Archived from the original on January 27, 2023. Retrieved March 20, 2021.
  3. ↑ Eisfeld, Henriette; Kristallovich, Felix (2020). The Rise of Dark Mode : A qualitative study of an emerging user interface design trend.
  4. ↑ Murphy, David (October 28, 2020). "Embrace Evil by Enabling Dark Mode in Every App". Lifehacker . Archived from the original on November 16, 2020. Retrieved November 15, 2020.
  5. ↑ Petterson, Rune (March 1985). "Use of colors in Teletext and Videotex". ResearchGate .
  6. ↑ "The Anniversary Update's most exciting features: Windows 10 users weigh in". PCWorld. Archived from the original on July 30, 2024. Retrieved August 7, 2023.
  7. ↑ "macOS Mojave: Dark Mode, Stacks, & More". MacRumors. October 25, 2019. Archived from the original on August 8, 2022. Retrieved August 8, 2022.
  8. ↑ Hardwick, Tim (June 6, 2019). "How to Enable Dark Mode in iOS 13". MacRumors. Archived from the original on August 8, 2022. Retrieved August 8, 2022.
  9. ↑ Callaham, John (September 3, 2019). "Here's how to enable the Android 10 dark theme mode". Android Authority. Archived from the original on August 8, 2022. Retrieved August 8, 2022.
  10. ↑ "The best dark mode extensions for Google Chrome". Android Authority. September 16, 2024. Retrieved December 3, 2024.
  11. ↑ Porter, Jon (June 3, 2019). "Dark mode is coming to iOS 13". The Verge. Archived from the original on August 7, 2019. Retrieved June 5, 2019.
  12. ↑ "The best dark mode extensions for Google Chrome". Android Authority. September 16, 2024. Retrieved December 3, 2024.
  13. 1 2 "prefers-color-scheme - CSS: Cascading Style Sheets". MDN Web Docs . Archived from the original on March 18, 2021. Retrieved March 18, 2021.
  14. ↑ Mehta, Ivan (July 12, 2024). "Wikipedia's mobile website finally gets a dark mode". TechCrunch . Archived from the original on July 13, 2024. Retrieved July 13, 2024.
  15. ↑ Purdy, Kevin (July 29, 2024). "Darkness reigns over Wikipedia as official dark mode comes to pass". Ars Technica . Archived from the original on July 29, 2024. Retrieved July 29, 2024.
  16. ↑ Gottsegen, Gordon (November 10, 2018). "Using Android's dark mode improves battery life, Google confirms". CNET. Archived from the original on December 27, 2022.
  17. ↑ Stokes, Jon. (2009-08-11) This September, OLED no longer "three to five years away" Archived 2012-01-25 at the Wayback Machine . Arstechnica.com. Retrieved 2011-10-04.
  18. ↑ Raga, Dylan (June 27, 2019). "No, "AMOLED Black" Does NOT Save More Battery Than Dark Gray". XDA.
  19. ↑ Welch, Chris (November 2, 2018). "Google confirms dark mode is a huge help for battery life on Android". The Verge. Archived from the original on December 8, 2019. Retrieved January 30, 2020.
  20. ↑ Sharma, Adamya (June 29, 2020). "Love dark mode? Here's why you may still want to avoid it". Android Authority. Archived from the original on September 24, 2020. Retrieved September 12, 2020.
  21. ↑ Clarke, Laurie (July 30, 2019). "Dark mode isn't as good for your eyes as you believe". Wired UK. ISSN   1357-0978. Archived from the original on June 22, 2023. Retrieved September 12, 2020.
  22. ↑ Budiu, Raluca (February 2, 2020). "Dark Mode vs. Light Mode: Which Is Better?". Nielsen Norman Group. Archived from the original on February 14, 2023.
  23. ↑ Walsh, David (January 28, 2019). "prefers-color-scheme: CSS Media Query". David Walsh Blog. Archived from the original on March 17, 2021. Retrieved March 18, 2021.
  24. ↑ "Window.matchMedia() - Web APIs". MDN Web Docs. Archived from the original on March 2, 2021. Retrieved March 18, 2021. 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
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.