HOME

TheInfoList



OR:

A light-on-dark color scheme —also called black mode, dark mode, dark theme, night mode, or lights-out (mode)— is a
color scheme In color theory, a color scheme is the choice of colors used in various artistic and design contexts. For example, the "Achromatic" use of a white background with black text is an example of a basic and commonly default color scheme in web de ...
that uses light-colored text, icons, and
graphical user interface elements Graphical user interface elements are those elements used by graphical user interfaces (GUIs) to offer a consistent visual language to represent information stored in computers. These make it easier for people with few computer skills to work with ...
on a dark background. It is often discussed in terms of computer
user interface In the industrial design field of human–computer interaction, a user interface (UI) is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine f ...
design and
web design Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code an ...
. 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. Displaying white on full brightness uses roughly six times as much power as pure black on a 2016
Google Pixel Google Pixel is a brand of consumer electronic devices developed by Google that run either ChromeOS or the Android operating system. The Pixel brand was introduced in February 2013 with the first-generation Chromebook Pixel. The Pixel line inc ...
, which has an
OLED display An organic light-emitting diode (OLED or organic LED), also known as organic electroluminescent (organic EL) diode, is a light-emitting diode (LED) in which the emissive electroluminescent layer is a film of organic compound that emits light i ...
. However conventional
LED displays A light-emitting diode (LED) is a semiconductor device that emits light when current flows through it. Electrons in the semiconductor recombine with electron holes, releasing energy in the form of photons. The color of the light (cor ...
cannot benefit from reduced power consumption. Most modern operating systems support an optional light-on-dark color scheme.


History

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 CRTs like those used for oscillographs or oscilloscopes. The
phosphor A phosphor is a substance that exhibits the phenomenon of luminescence; it emits light when exposed to some type of radiant energy. The term is used both for fluorescent or phosphorescent substances which glow on exposure to ultraviolet or vi ...
was normally a very dark color, and lit up brightly when the
electron beam Cathode rays or electron beam (e-beam) are streams of electrons observed in discharge tubes. If an evacuated glass tube is equipped with two electrodes and a voltage is applied, glass behind the positive electrode is observed to glow, due to ele ...
hit it, appearing to be white, green, blue, or amber on a black background, depending on phosphors applied on a
monochrome A monochrome or monochromatic image, object or palette is composed of one color (or values of one color). Images using only shades of grey are called grayscale (typically digital) or black-and-white (typically analog). In physics, monochrom ...
screen.
RGB The RGB color model is an additive color model in which the red, green and blue primary colors of light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three addi ...
screens continued to operate similarly, using all the beams set to "on" to form white. With the advent of
teletext A British Ceefax football index page from October 2009, showing the three-digit page numbers for a variety of football news stories Teletext, or broadcast teletext, is a standard for displaying text and rudimentary graphics on suitably equipp ...
, research was done into which primary and secondary light colors and combinations worked best for this new medium. 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 In computing, WYSIWYG ( ), an acronym for What You See Is What You Get, is a system in which editing software allows content to be edited in a form that resembles its appearance when printed or displayed as a finished product, such as a printed d ...
word processor A word processor (WP) is a device or computer program that provides for input, editing, formatting, and output of text, often with some additional features. Word processor (electronic device), Early word processors were stand-alone devices ded ...
s to simulate ink on paper, and became the norm. In 2018, Apple followed in
macOS 10.14 macOS Mojave ( ; version 10.14) is the fifteenth software versioning, major release of macOS, Apple Inc.'s desktop operating system for Macintosh computers. Mojave was announced at Apple's Apple Worldwide Developers Conference, Worldwide Devel ...
. In September 2019,
iOS 13 iOS 13 is the thirteenth major release of the iOS mobile operating system developed by Apple Inc. for their iPhone, iPod Touch, and HomePod lines. The successor to iOS 12 on those devices, it was announced at the company's Worldwide Developer ...
and
Android 10 Android 10 ( codenamed Android Q during development) is the tenth major release and the 17th version of the Android mobile operating system. It was first released as a developer preview on March 13, 2019, and was released publicly on Septembe ...
both introduced dark modes.
Firefox Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current and ...
and
Chromium Chromium is a chemical element with the symbol Cr and atomic number 24. It is the first element in group 6. It is a steely-grey, lustrous, hard, and brittle transition metal. Chromium metal is valued for its high corrosion resistance and hardne ...
have optional dark theme for all internal screens. It will also be possible for third-party developers to implement their own dark themes. In 2019, a "prefers-color-scheme" option was created for front-end web developers, being a
CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone techno ...
property that signals a user's choice for their system to use a light or dark color theme.


Energy usage

Light on dark color schemes require less energy to display on
OLED An organic light-emitting diode (OLED or organic LED), also known as organic electroluminescent (organic EL) diode, is a light-emitting diode (LED) in which the emissive electroluminescent layer is a film of organic compound that emits light i ...
displays. This positively impacts battery life and 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 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 A backlight is a form of illumination used in liquid crystal displays (LCDs). As LCDs do not produce light by themselves—unlike, for example, cathode ray tube (CRT), plasma (PDP) or OLED displays—they need illumination ( ambient light or a ...
to pass through. "
AMOLED AMOLED (active-matrix organic light-emitting diode, ) is a type of OLED display device technology. OLED describes a specific type of thin-film-display technology in which organic compounds form the electroluminescence, electroluminescent materia ...
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 Google LLC () is an American multinational technology company focusing on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics. ...
confirmed that dark mode on Android saved battery life.


Issues with the web

Some argue that a
color scheme In color theory, a color scheme is the choice of colors used in various artistic and design contexts. For example, the "Achromatic" use of a white background with black text is an example of a basic and commonly default color scheme in web de ...
with light text on a dark background is easier to read on the screen, because the lower overall brightness causes less eyestrain. Others argue to the contrary. The caveat is that most pages on the
web Web most often refers to: * Spider web, a silken structure created by the animal * World Wide Web or the Web, an Internet-based hypertext system Web, WEB, or the Web may also refer to: Computing * WEB, a literate programming system created by ...
are designed for white backgrounds;
GIF The Graphics Interchange Format (GIF; or , see pronunciation) is a bitmap image format that was developed by a team at the online services provider CompuServe led by American computer scientist Steve Wilhite and released on 15 June 1987. ...
and PNG images with a transparency bit instead of alpha channels tend to show up with choppy outlines, as well as causing problems with other graphical elements. There is a prefers-color-scheme media feature on
CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone techno ...
, 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 In computing, a user agent is any software, acting on behalf of a user, which "retrieves, renders and facilitates end-user interaction with Web content". A user agent is therefore a special kind of software agent. Some prominent examples of us ...
. CSS example: @media (prefers-color-scheme: dark) JavaScript example: if (window.matchMedia('(prefers-color-scheme: dark)').matches)


See also

*
AMOLED AMOLED (active-matrix organic light-emitting diode, ) is a type of OLED display device technology. OLED describes a specific type of thin-film-display technology in which organic compounds form the electroluminescence, electroluminescent materia ...
* Blackle *
Night Shift (software) Night Shift is a built in software feature of iOS and macOS. It was introduced in 2016-2017 into iOS in iOS 9.3 and into macOS in macOS Sierra 10.12.4. The feature changes the color temperature of the display towards the warmer part of the color ...
*
OLED An organic light-emitting diode (OLED or organic LED), also known as organic electroluminescent (organic EL) diode, is a light-emitting diode (LED) in which the emissive electroluminescent layer is a film of organic compound that emits light i ...
* Solarized (color scheme)


References

{{color topics User interfaces Display technology Color schemes Computer graphics