_in_Dark_theme.png)
Adark mode, dark theme,night mode, orlight-on-dark color scheme is acolor scheme that uses light-colored text, icons, andgraphical user interface elements on a dark background. It is often discussed in terms of computeruser interface design andweb 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 reduceeye strain.[2] Displaying white at full brightness uses roughly six times as much power as pure black on a 2016Google Pixel, which has anOLED display.[3] However, conventionalLED displays may not benefit from reduced power consumption; but if aLED display has the partial dimming features, it still benefits from reduced power consumption.[4][5] Most modern operating systems support an optional light-on-dark color scheme.[6]
Microsoft introduced a dark theme in theAnniversary Update ofWindows 10 in 2016.[7] In 2018,Apple followed inmacOS Mojave.[8] In September 2019,iOS 13 andAndroid 10 both introduced dark modes.[9][10] Some operating systems provide tools to change the dark mode state automatically at sundown or sunrise.[11] A "prefers-color-scheme" option was created forfront-end web developers in 2019, being aCSS property that signals a user's choice for their system to use a light or dark color theme.[12]Firefox andChromium have optional dark theme for all internal screens. It is also possible for third-party developers to implement their own dark themes.[13] There are also a variety of browser add-ons that can re-theme web sites with dark color schemes, also aligning with system theme.[14]Wikipedia's mobile and desktop versions received a dark mode option in 2024.[15][16]
There is aprefers-color-schememedia query inCSS, 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 auser agent.[12][17]
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:[18]
if(window.matchMedia('(prefers-color-scheme: dark)').matches){dark();}
Light on dark color schemes require less energy to display onOLED displays. This positively impacts battery life and reduces energy consumption.[19]
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.[20] 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, eachsubpixel 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.[21] In November 2018,Google confirmed that dark mode on Android saved battery life.[22]
Some argue that acolor 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.[23][24][25] Some pages on theweb 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.
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
Color topics | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Color science |
|  | ||||||||
| Color philosophy |
| |||||||||
| Color terms |
| |||||||||
| Color organizations | ||||||||||
| Names |
| |||||||||
| Related | ||||||||||
