Misplaced Pages

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. 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. However, conventional LED displays 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 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. 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. 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.

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. There are also a variety of browser add-ons that can re-theme web sites with dark color schemes, also aligning with system theme.

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.

In July 2024, Misplaced Pages's mobile website received a dark mode. The desktop website later received a dark mode as well.

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.

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 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.

CSS example:

@media (prefers-color-scheme: dark) {
    body {
        color: #ccc;
        background: #222;
    }
}

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

JavaScript example:

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

See also

• AMOLED
• Blackle
• Night Shift (software)
• OLED
• Solarised (color scheme)

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. ^ "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). "Misplaced Pages'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 Misplaced Pages 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

v t e Color topics
Color science	Color physics Electromagnetic spectrum Light Rainbow Visible Spectral colors Chromophore Structural coloration Animal coloration Color of chemicals Water Spectral power distribution Colorimetry Color perception Chromesthesia Sonochromatism Color blindness Achromatopsia Dichromacy Color calibration Color constancy Color task Color code Color temperature Color vision test Evolution of color vision Impossible colors Metamerism Opponent process Afterimage Unique hues Tetrachromacy The dress Color psychology Color symbolism Color preferences Lüscher color test Kruithof curve Political color National colors Chromophobia Chromotherapy Color reproduction Color photography Color balance Color cast Digital image processing Color management Color printing Multi-primary color display Quattron Color model additive RGB subtractive CMYK Color space Color mapping
Color philosophy	Color scheme Color tool Monochromatic colors black-and-white Complementary colors Analogous colors Achromatic colors (Neutral) Polychromatic colors Light-on-dark Web colors Tinctures in heraldry Color theory Color mixing Primary color Secondary color Chromaticity Color solid Color wheel Color triangle Color analysis (fashion) Color realism (art style) On Vision and Colours (Schopenhauer) Theory of Colours (Goethe)
Color terms	Basic terms Blue Green Red Yellow Pink Purple Orange Black Gray White Brown Cultural differences Linguistic relativity and the color naming debate Blue–green distinction in language Color history Black-and-white dualism Blue in culture Color in Chinese culture Traditional colors of Japan Human skin color Color dimensions Hue Dichromatism Colorfulness Pastel colors Luminance Lightness Darkness Brightness Iridescence Fluorescence Grayscale Tint, shade and tone
Color organizations	Pantone Color Marketing Group Color Association of the United States International Colour Authority International Commission on Illumination (CIE) International Color Consortium International Colour Association
Names	Lists List of colors: A–F List of colors: G–M List of colors: N–Z List of colors (compact) List of colors by shade List of color palettes List of color spaces List of Crayola crayon colors history Color chart List of RAL colors List of web colors Shades of: Red Orange Yellow Green Cyan Blue Violet Purple Magenta Pink Brown White Gray Black
Related	Vision Contrast Qualia Lighting
Category Index

• User interfaces
• Display technology
• Color schemes
• Computer graphics