CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-sticky-header-enabled vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Light-on-dark color scheme - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-sticky-header-enabled vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"ef9a86df-d2e3-4bef-b6fc-14620b17abda","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Light-on-dark_color_scheme","wgTitle":"Light-on-dark color scheme","wgCurRevisionId":1276511259,"wgRevisionId":1276511259,"wgArticleId":175004,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Webarchive template wayback links","Articles with short description","Short description is different from Wikidata","Use American English from March 2022","All Wikipedia articles written in American English","Use mdy dates from March 2022","User interfaces","Display technology","Color schemes","Computer graphics"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Light-on-dark_color_scheme","wgRelevantArticleId":175004,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikipedia","wgCiteReferencePreviewsActive":false,"wgFlaggedRevsParams":{"tags":{"status":{"levels":1}}},"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":20000,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q6545942","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGELevelingUpEnabledForUser":false}; RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","ext.pygments":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.makeCollapsible.styles":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready"};RLPAGEMODULES=["ext.cite.ux-enhancements","ext.pygments.view","mediawiki.page.media","site","mediawiki.page.ready","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.cx.uls.quick.actions","wikibase.client.vector-2022","ext.checkUser.clientHints","ext.quicksurveys.init","ext.growthExperiments.SuggestedEditSession"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.pygments%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.22"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/9/97/Mediawiki-skin-aether.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="720"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Mediawiki-skin-aether.png/800px-Mediawiki-skin-aether.png"> <meta property="og:image:width" content="800"> <meta property="og:image:height" content="480"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Mediawiki-skin-aether.png/640px-Mediawiki-skin-aether.png"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="384"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Light-on-dark color scheme - Wikipedia"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikipedia.org/wiki/Light-on-dark_color_scheme"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=Light-on-dark_color_scheme&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikipedia.org/wiki/Light-on-dark_color_scheme"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikipedia Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-Light-on-dark_color_scheme rootpage-Light-on-dark_color_scheme skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" title="Main menu" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-contents" class="mw-list-item"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia"><span>Contents</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Portal:Current_events" title="Articles related to current events"><span>Current events</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Visit a randomly selected article [x]" accesskey="x"><span>Random article</span></a></li><li id="n-aboutsite" class="mw-list-item"><a href="/wiki/Wikipedia:About" title="Learn about Wikipedia and how it works"><span>About Wikipedia</span></a></li><li id="n-contactpage" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us" title="How to contact Wikipedia"><span>Contact us</span></a></li> </ul> </div> </div> <div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction" > <div class="vector-menu-heading"> Contribute </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia"><span>Help</span></a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia"><span>Learn to edit</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia"><span>Upload file</span></a></li><li id="n-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages"><span>Special pages</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="The Free Encyclopedia" src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikipedia [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=en.wikipedia.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Light-on-dark+color+scheme" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Light-on-dark+color+scheme" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Log in and more options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=en.wikipedia.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Light-on-dark+color+scheme" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Light-on-dark+color+scheme" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">(Top)</div> </a> </li> <li id="toc-History" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#History"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>History</span> </div> </a> <ul id="toc-History-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Energy_usage" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Energy_usage"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Energy usage</span> </div> </a> <ul id="toc-Energy_usage-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Issues_with_the_web" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Issues_with_the_web"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Issues with the web</span> </div> </a> <ul id="toc-Issues_with_the_web-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>See also</span> </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>References</span> </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" title="Table of Contents" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Light-on-dark color scheme</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 14 languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-14" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">14 languages</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikipedia.org/wiki/%D9%86%D8%B8%D8%A7%D9%85_%D8%A7%D9%84%D8%A3%D9%84%D9%88%D8%A7%D9%86_%D8%A7%D9%84%D8%AE%D9%81%D9%8A%D9%81%D8%A9_%D8%B9%D9%84%D9%89_%D8%A7%D9%84%D8%B8%D9%84%D8%A7%D9%85" title="نظام الألوان الخفيفة على الظلام – Arabic" lang="ar" hreflang="ar" data-title="نظام الألوان الخفيفة على الظلام" data-language-autonym="العربية" data-language-local-name="Arabic" class="interlanguage-link-target"><span>العربية</span></a></li><li class="interlanguage-link interwiki-cv mw-list-item"><a href="https://cv.wikipedia.org/wiki/%D0%A2%C4%95%D0%BA%D1%81%C4%95%D0%BC_%D1%80%D0%B5%D0%B6%D0%B8%D0%BC" title="Тĕксĕм режим – Chuvash" lang="cv" hreflang="cv" data-title="Тĕксĕм режим" data-language-autonym="Чӑвашла" data-language-local-name="Chuvash" class="interlanguage-link-target"><span>Чӑвашла</span></a></li><li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikipedia.org/wiki/Dark_Mode" title="Dark Mode – German" lang="de" hreflang="de" data-title="Dark Mode" data-language-autonym="Deutsch" data-language-local-name="German" class="interlanguage-link-target"><span>Deutsch</span></a></li><li class="interlanguage-link interwiki-fa mw-list-item"><a href="https://fa.wikipedia.org/wiki/%D8%B1%D9%86%DA%AF%E2%80%8C%D8%A8%D9%86%D8%AF%DB%8C_%D8%B1%D9%88%D8%B4%D9%86_%D8%B1%D9%88%DB%8C_%D8%AA%D8%A7%D8%B1%DB%8C%DA%A9" title="رنگ‌بندی روشن روی تاریک – Persian" lang="fa" hreflang="fa" data-title="رنگ‌بندی روشن روی تاریک" data-language-autonym="فارسی" data-language-local-name="Persian" class="interlanguage-link-target"><span>فارسی</span></a></li><li class="interlanguage-link interwiki-fr mw-list-item"><a href="https://fr.wikipedia.org/wiki/Mode_sombre" title="Mode sombre – French" lang="fr" hreflang="fr" data-title="Mode sombre" data-language-autonym="Français" data-language-local-name="French" class="interlanguage-link-target"><span>Français</span></a></li><li class="interlanguage-link interwiki-ko mw-list-item"><a href="https://ko.wikipedia.org/wiki/%EB%8B%A4%ED%81%AC_%EB%AA%A8%EB%93%9C" title="다크 모드 – Korean" lang="ko" hreflang="ko" data-title="다크 모드" data-language-autonym="한국어" data-language-local-name="Korean" class="interlanguage-link-target"><span>한국어</span></a></li><li class="interlanguage-link interwiki-nl mw-list-item"><a href="https://nl.wikipedia.org/wiki/Donkere_modus" title="Donkere modus – Dutch" lang="nl" hreflang="nl" data-title="Donkere modus" data-language-autonym="Nederlands" data-language-local-name="Dutch" class="interlanguage-link-target"><span>Nederlands</span></a></li><li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikipedia.org/wiki/%E3%83%80%E3%83%BC%E3%82%AF%E3%83%A2%E3%83%BC%E3%83%89" title="ダークモード – Japanese" lang="ja" hreflang="ja" data-title="ダークモード" data-language-autonym="日本語" data-language-local-name="Japanese" class="interlanguage-link-target"><span>日本語</span></a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikipedia.org/wiki/%D0%A2%D1%91%D0%BC%D0%BD%D1%8B%D0%B9_%D1%80%D0%B5%D0%B6%D0%B8%D0%BC" title="Тёмный режим – Russian" lang="ru" hreflang="ru" data-title="Тёмный режим" data-language-autonym="Русский" data-language-local-name="Russian" class="interlanguage-link-target"><span>Русский</span></a></li><li class="interlanguage-link interwiki-tr mw-list-item"><a href="https://tr.wikipedia.org/wiki/Gece_modu" title="Gece modu – Turkish" lang="tr" hreflang="tr" data-title="Gece modu" data-language-autonym="Türkçe" data-language-local-name="Turkish" class="interlanguage-link-target"><span>Türkçe</span></a></li><li class="interlanguage-link interwiki-uk mw-list-item"><a href="https://uk.wikipedia.org/wiki/%D0%A2%D0%B5%D0%BC%D0%BD%D0%B0_%D1%82%D0%B5%D0%BC%D0%B0" title="Темна тема – Ukrainian" lang="uk" hreflang="uk" data-title="Темна тема" data-language-autonym="Українська" data-language-local-name="Ukrainian" class="interlanguage-link-target"><span>Українська</span></a></li><li class="interlanguage-link interwiki-vi mw-list-item"><a href="https://vi.wikipedia.org/wiki/Ch%E1%BA%BF_%C4%91%E1%BB%99_t%E1%BB%91i" title="Chế độ tối – Vietnamese" lang="vi" hreflang="vi" data-title="Chế độ tối" data-language-autonym="Tiếng Việt" data-language-local-name="Vietnamese" class="interlanguage-link-target"><span>Tiếng Việt</span></a></li><li class="interlanguage-link interwiki-zh-yue mw-list-item"><a href="https://zh-yue.wikipedia.org/wiki/%E5%A4%9C%E9%96%93%E6%A8%A1%E5%BC%8F" title="夜間模式 – Cantonese" lang="yue" hreflang="yue" data-title="夜間模式" data-language-autonym="粵語" data-language-local-name="Cantonese" class="interlanguage-link-target"><span>粵語</span></a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/%E5%A4%9C%E9%96%93%E6%A8%A1%E5%BC%8F" title="夜間模式 – Chinese" lang="zh" hreflang="zh" data-title="夜間模式" data-language-autonym="中文" data-language-local-name="Chinese" class="interlanguage-link-target"><span>中文</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q6545942#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Light-on-dark_color_scheme" title="View the content page [c]" accesskey="c"><span>Article</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:Light-on-dark_color_scheme" rel="discussion" title="Discuss improvements to the content page [t]" accesskey="t"><span>Talk</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Light-on-dark_color_scheme"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Light-on-dark_color_scheme&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Light-on-dark_color_scheme&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Light-on-dark_color_scheme"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Light-on-dark_color_scheme&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Light-on-dark_color_scheme&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Light-on-dark_color_scheme" title="List of all English Wikipedia pages containing links to this page [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Light-on-dark_color_scheme" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Light-on-dark_color_scheme&oldid=1276511259" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Light-on-dark_color_scheme&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Light-on-dark_color_scheme&id=1276511259&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FLight-on-dark_color_scheme"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FLight-on-dark_color_scheme"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Light-on-dark_color_scheme&action=show-download-screen" title="Download this page as a PDF file"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Light-on-dark_color_scheme&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="wb-otherproject-link wb-otherproject-commons mw-list-item"><a href="https://commons.wikimedia.org/wiki/Category:Light-on-dark_color_scheme" hreflang="en"><span>Wikimedia Commons</span></a></li><li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q6545942" title="Structured data on this page hosted by Wikidata [g]" accesskey="g"><span>Wikidata item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikipedia, the free encyclopedia</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="shortdescription nomobile noexcerpt noprint searchaux" style="display:none">Type of color scheme</div> <style data-mw-deduplicate="TemplateStyles:r1236090951">.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}</style><div role="note" class="hatnote navigation-not-searchable selfref">This article is about the technical scheme and its concept. For information concerning usage of "dark mode" in Wikipedia, see <a href="/wiki/Wikipedia:Dark_mode" title="Wikipedia:Dark mode">Wikipedia:Dark mode</a>.</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951" /><div role="note" class="hatnote navigation-not-searchable">"Night mode" redirects here. For the Russian sci-fi thriller film, see <a href="/wiki/Night_Mode_(film)" title="Night Mode (film)">Night Mode (film)</a>.</div> <p class="mw-empty-elt"> </p> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Mediawiki-skin-aether.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/9/97/Mediawiki-skin-aether.png/220px-Mediawiki-skin-aether.png" decoding="async" width="220" height="132" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/97/Mediawiki-skin-aether.png/330px-Mediawiki-skin-aether.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/97/Mediawiki-skin-aether.png/440px-Mediawiki-skin-aether.png 2x" data-file-width="1000" data-file-height="600" /></a><figcaption>Versions of a web site in normal display mode (left) and dark mode (right)</figcaption></figure> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:GNOME_Shell,_GNOME_Clocks,_Evince,_gThumb,_GNOME_Files_at_version_3.30_(2018-09)_in_Dark_theme.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/0/08/GNOME_Shell%2C_GNOME_Clocks%2C_Evince%2C_gThumb%2C_GNOME_Files_at_version_3.30_%282018-09%29_in_Dark_theme.png/220px-GNOME_Shell%2C_GNOME_Clocks%2C_Evince%2C_gThumb%2C_GNOME_Files_at_version_3.30_%282018-09%29_in_Dark_theme.png" decoding="async" width="220" height="124" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/08/GNOME_Shell%2C_GNOME_Clocks%2C_Evince%2C_gThumb%2C_GNOME_Files_at_version_3.30_%282018-09%29_in_Dark_theme.png/330px-GNOME_Shell%2C_GNOME_Clocks%2C_Evince%2C_gThumb%2C_GNOME_Files_at_version_3.30_%282018-09%29_in_Dark_theme.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/08/GNOME_Shell%2C_GNOME_Clocks%2C_Evince%2C_gThumb%2C_GNOME_Files_at_version_3.30_%282018-09%29_in_Dark_theme.png/440px-GNOME_Shell%2C_GNOME_Clocks%2C_Evince%2C_gThumb%2C_GNOME_Files_at_version_3.30_%282018-09%29_in_Dark_theme.png 2x" data-file-width="1920" data-file-height="1080" /></a><figcaption>Dark theme for <a href="/wiki/GNOME" title="GNOME">GNOME</a></figcaption></figure> <p>A <b>light-on-dark color scheme</b>, better known as <b>dark mode, dark theme</b> or <b>night mode</b>, is a <a href="/wiki/Color_scheme" title="Color scheme">color scheme</a> that uses light-colored text, icons, and <a href="/wiki/Graphical_user_interface_elements" class="mw-redirect" title="Graphical user interface elements">graphical user interface elements</a> on a dark background. It is often discussed in terms of computer <a href="/wiki/User_interface" title="User interface">user interface</a> design and <a href="/wiki/Web_design" title="Web design">web design</a>. Many modern websites and operating systems offer the user an optional light-on-dark display mode. </p><p>Some users find dark mode displays more visually appealing, and claim that it can reduce <a href="/wiki/Eye_strain" title="Eye strain">eye strain</a>.<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> Displaying white at full brightness uses roughly six times as much power as pure black on a 2016 <a href="/wiki/Google_Pixel" title="Google Pixel">Google Pixel</a>, which has an <a href="/wiki/OLED" title="OLED">OLED display</a>.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> However, conventional <a href="/wiki/LED_display" title="LED display">LED displays</a> cannot benefit from reduced power consumption.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> Most modern operating systems support an optional light-on-dark color scheme.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="History">History</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Light-on-dark_color_scheme&action=edit&section=1" title="Edit section: History"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Zork_on_CRT_display.jpg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Zork_on_CRT_display.jpg/250px-Zork_on_CRT_display.jpg" decoding="async" width="220" height="233" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Zork_on_CRT_display.jpg/330px-Zork_on_CRT_display.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Zork_on_CRT_display.jpg/500px-Zork_on_CRT_display.jpg 2x" data-file-width="3572" data-file-height="3785" /></a><figcaption>The video game <i><a href="/wiki/Zork" title="Zork">Zork</a></i> running on a green-on-black CRT display</figcaption></figure> <p>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. </p><p>With the introduction of computer screens, originally user interfaces were formed on <a href="/wiki/Cathode-ray_tube" title="Cathode-ray tube">cathode-ray tubes (CRTs)</a> like those used for oscillographs or oscilloscopes. The <a href="/wiki/Phosphor" title="Phosphor">phosphor</a> was normally a very dark color, and lit up brightly when the <a href="/wiki/Electron_beam" class="mw-redirect" title="Electron beam">electron beam</a> hit it, appearing to be white, green, blue, or amber on a black background, depending on phosphors applied on a <a href="/wiki/Monochrome" title="Monochrome">monochrome</a> screen. <a href="/wiki/RGB" class="mw-redirect" title="RGB">RGB</a> screens continued to operate similarly, using all the beams set to "on" to form white. </p><p>With the advent of <a href="/wiki/Teletext" title="Teletext">teletext</a>, research was done into which primary and secondary light colors and combinations worked best for this new medium.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> Cyan or yellow on black was typically found to be optimal from a palette of black, red, green, yellow, blue, magenta, cyan and white. </p><p>The opposite color set, a <b>dark-on-light color scheme</b> (<b>light mode</b> or <b>light theme</b>), was originally introduced in <a href="/wiki/WYSIWYG" title="WYSIWYG">WYSIWYG</a> <a href="/wiki/Word_processor" title="Word processor">word processors</a> to simulate ink on paper, and became the norm. </p><p><a href="/wiki/Microsoft" title="Microsoft">Microsoft</a> introduced a dark theme in the <a href="/wiki/Anniversary_Update" class="mw-redirect" title="Anniversary Update">Anniversary Update</a> of <a href="/wiki/Windows_10" title="Windows 10">Windows 10</a> in 2016.<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> In 2018, <a href="/wiki/Apple_Inc." title="Apple Inc.">Apple</a> followed in <a href="/wiki/MacOS_Mojave" title="MacOS Mojave">macOS Mojave</a>.<sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> In September 2019, <a href="/wiki/IOS_13" title="IOS 13">iOS 13</a> and <a href="/wiki/Android_10" title="Android 10">Android 10</a> both introduced dark modes.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup> Some operating systems provide tools to change the dark mode state automatically at sundown or sunrise.<sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup> </p><p><a href="/wiki/Firefox" title="Firefox">Firefox</a> and <a href="/wiki/Chromium_(web_browser)" title="Chromium (web browser)">Chromium</a> have optional dark theme for all internal screens. It will also be possible for third-party developers to implement their own dark themes.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup> There are also a variety of browser add-ons that can re-theme web sites with dark color schemes, also aligning with system theme.<sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup> </p><p>In 2019, a "prefers-color-scheme" option was created for <a href="/wiki/Front-end_web_development" title="Front-end web development">front-end web developers</a>, being a <a href="/wiki/CSS" title="CSS">CSS</a> property that signals a user's choice for their system to use a light or dark color theme.<sup id="cite_ref-:0_13-0" class="reference"><a href="#cite_note-:0-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup> </p><p>In July 2024, <a href="/wiki/Wikipedia" title="Wikipedia">Wikipedia</a>'s mobile website received a dark mode.<sup id="cite_ref-14" class="reference"><a href="#cite_note-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup> The desktop website later received a dark mode as well.<sup id="cite_ref-15" class="reference"><a href="#cite_note-15"><span class="cite-bracket">[</span>15<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="Energy_usage">Energy usage</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Light-on-dark_color_scheme&action=edit&section=2" title="Edit section: Energy usage"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Light on dark color schemes require less energy to display on <a href="/wiki/OLED" title="OLED">OLED</a> displays. This positively impacts battery life and reduces energy consumption.<sup id="cite_ref-16" class="reference"><a href="#cite_note-16"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup> </p><p>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.<sup id="cite_ref-17" class="reference"><a href="#cite_note-17"><span class="cite-bracket">[</span>17<span class="cite-bracket">]</span></a></sup> 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. </p><p>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 <a href="/wiki/Subpixel" class="mw-redirect" title="Subpixel">subpixel</a> 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) <a href="/wiki/LED_backlight" class="mw-redirect" title="LED backlight">LED backlight</a> to pass through. </p><p>"<a href="/wiki/AMOLED" title="AMOLED">AMOLED</a> 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.<sup id="cite_ref-18" class="reference"><a href="#cite_note-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup> In November 2018, <a href="/wiki/Google" title="Google">Google</a> confirmed that dark mode on Android saved battery life.<sup id="cite_ref-19" class="reference"><a href="#cite_note-19"><span class="cite-bracket">[</span>19<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="Issues_with_the_web">Issues with the web</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Light-on-dark_color_scheme&action=edit&section=3" title="Edit section: Issues with the web"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Some argue that a <a href="/wiki/Color_scheme" title="Color scheme">color scheme</a> with light text on a dark background is easier to read on the screen, because the lower overall brightness causes less eyestrain. Others<sup id="cite_ref-20" class="reference"><a href="#cite_note-20"><span class="cite-bracket">[</span>20<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-21" class="reference"><a href="#cite_note-21"><span class="cite-bracket">[</span>21<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-22" class="reference"><a href="#cite_note-22"><span class="cite-bracket">[</span>22<span class="cite-bracket">]</span></a></sup> argue to the contrary. Some pages on the <a href="/wiki/World_Wide_Web" title="World Wide Web">web</a> are designed for white backgrounds; Image assets (<a href="/wiki/GIF" title="GIF">GIF</a>, <a href="/wiki/PNG" title="PNG">PNG</a>, <a href="/wiki/SVG" title="SVG">SVG</a>, <a href="/wiki/WOFF" class="mw-redirect" title="WOFF">WOFF</a>, etc) can be used improperly causing visual artifacts if dark mode is forced (instead of designed for) with a plugin like Dark Reader. </p><p>There is a <code>prefers-color-scheme</code> media feature on <a href="/wiki/CSS" title="CSS">CSS</a>, 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 <a href="/wiki/User_agent" title="User agent">user agent</a>.<sup id="cite_ref-:0_13-1" class="reference"><a href="#cite_note-:0-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-23" class="reference"><a href="#cite_note-23"><span class="cite-bracket">[</span>23<span class="cite-bracket">]</span></a></sup> </p><p>CSS example: </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">@</span><span class="k">media</span><span class="w"> </span><span class="o">(</span><span class="nt">prefers-color-scheme</span><span class="o">:</span><span class="w"> </span><span class="nt">dark</span><span class="o">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">body</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#ccc</span><span class="p">;</span> <span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#222</span><span class="p">;</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span> </pre></div> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="o"><</span><span class="nt">span</span><span class="w"> </span><span class="nt">style</span><span class="o">=</span><span class="s2">"background-color: light-dark(#fff, #333); color: light-dark(#333, #fff);"</span><span class="o">></</span><span class="nt">span</span><span class="o">></span> </pre></div> <p>JavaScript example:<sup id="cite_ref-24" class="reference"><a href="#cite_note-24"><span class="cite-bracket">[</span>24<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">'(prefers-color-scheme: dark)'</span><span class="p">).</span><span class="nx">matches</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">dark</span><span class="p">();</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Light-on-dark_color_scheme&action=edit&section=4" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="/wiki/AMOLED" title="AMOLED">AMOLED</a></li> <li><a href="/wiki/Blackle" title="Blackle">Blackle</a></li> <li><a href="/wiki/Night_Shift_(software)" title="Night Shift (software)">Night Shift (software)</a></li> <li><a href="/wiki/Night_light_(Windows)" class="mw-redirect" title="Night light (Windows)">Night light (Windows)</a></li> <li><a href="/wiki/OLED" title="OLED">OLED</a></li> <li><a href="/wiki/Solarized" title="Solarized">Solarised (color scheme)</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="References">References</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Light-on-dark_color_scheme&action=edit&section=5" title="Edit section: References"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1239543626">.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style><div class="reflist"> <div class="mw-references-wrap mw-references-columns"><ol class="references"> <li id="cite_note-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-1">^</a></b></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}</style><cite id="CITEREFCummins2018" class="citation web cs1">Cummins, Eleanor (November 21, 2018). <a rel="nofollow" class="external text" href="https://www.popsci.com/night-dark-mode-design">"Dark mode is easier on your eyes—and battery"</a>. <i>Popular Science</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20230121021129/https://www.popsci.com/night-dark-mode-design/">Archived</a> from the original on January 21, 2023.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Popular+Science&rft.atitle=Dark+mode+is+easier+on+your+eyes%E2%80%94and+battery&rft.date=2018-11-21&rft.aulast=Cummins&rft.aufirst=Eleanor&rft_id=https%3A%2F%2Fwww.popsci.com%2Fnight-dark-mode-design&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFEmily_Price2018" class="citation web cs1">Emily Price (November 11, 2018). <a rel="nofollow" class="external text" href="https://lifehacker.com/use-dark-mode-to-conserve-your-phones-battery-power-1830368436">"Use Dark Mode to Conserve Your Phone's Battery Power"</a>. <i><a href="/wiki/Lifehacker" title="Lifehacker">Lifehacker</a></i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20230127114202/https://lifehacker.com/use-dark-mode-to-conserve-your-phones-battery-power-1830368436">Archived</a> from the original on January 27, 2023<span class="reference-accessdate">. Retrieved <span class="nowrap">March 20,</span> 2021</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Lifehacker&rft.atitle=Use+Dark+Mode+to+Conserve+Your+Phone%27s+Battery+Power&rft.date=2018-11-11&rft.au=Emily+Price&rft_id=https%3A%2F%2Flifehacker.com%2Fuse-dark-mode-to-conserve-your-phones-battery-power-1830368436&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFEisfeldKristallovich2020" class="citation book cs1">Eisfeld, Henriette; Kristallovich, Felix (2020). <a rel="nofollow" class="external text" href="http://urn.kb.se/resolve?urn=urn:nbn:se:hj:diva-50563"><i>The Rise of Dark Mode : A qualitative study of an emerging user interface design trend</i></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=The+Rise+of+Dark+Mode+%3A+A+qualitative+study+of+an+emerging+user+interface+design+trend&rft.date=2020&rft.aulast=Eisfeld&rft.aufirst=Henriette&rft.au=Kristallovich%2C+Felix&rft_id=http%3A%2F%2Furn.kb.se%2Fresolve%3Furn%3Durn%3Anbn%3Ase%3Ahj%3Adiva-50563&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFMurphy2020" class="citation web cs1">Murphy, David (October 28, 2020). <a rel="nofollow" class="external text" href="https://lifehacker.com/embrace-evil-by-enabling-dark-mode-in-every-app-1845497287">"Embrace Evil by Enabling Dark Mode in Every App"</a>. <i><a href="/wiki/Lifehacker" title="Lifehacker">Lifehacker</a></i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20201116193004/https://lifehacker.com/embrace-evil-by-enabling-dark-mode-in-every-app-1845497287">Archived</a> from the original on November 16, 2020<span class="reference-accessdate">. Retrieved <span class="nowrap">November 15,</span> 2020</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Lifehacker&rft.atitle=Embrace+Evil+by+Enabling+Dark+Mode+in+Every+App&rft.date=2020-10-28&rft.aulast=Murphy&rft.aufirst=David&rft_id=https%3A%2F%2Flifehacker.com%2Fembrace-evil-by-enabling-dark-mode-in-every-app-1845497287&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFPetterson1985" class="citation web cs1">Petterson, Rune (March 1985). <a rel="nofollow" class="external text" href="https://www.researchgate.net/publication/281936183">"Use of colors in Teletext and Videotex"</a>. <i><a href="/wiki/ResearchGate" title="ResearchGate">ResearchGate</a></i>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=ResearchGate&rft.atitle=Use+of+colors+in+Teletext+and+Videotex&rft.date=1985-03&rft.aulast=Petterson&rft.aufirst=Rune&rft_id=https%3A%2F%2Fwww.researchgate.net%2Fpublication%2F281936183&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.pcworld.com/article/415733/the-anniversary-udates-most-exciting-features-windows-10-users-weigh-in.html">"The Anniversary Update's most exciting features: Windows 10 users weigh in"</a>. <i>PCWorld</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20240730012845/https://www.pcworld.com/article/415733/the-anniversary-udates-most-exciting-features-windows-10-users-weigh-in.html">Archived</a> from the original on July 30, 2024<span class="reference-accessdate">. Retrieved <span class="nowrap">August 7,</span> 2023</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=PCWorld&rft.atitle=The+Anniversary+Update%27s+most+exciting+features%3A+Windows+10+users+weigh+in&rft_id=https%3A%2F%2Fwww.pcworld.com%2Farticle%2F415733%2Fthe-anniversary-udates-most-exciting-features-windows-10-users-weigh-in.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-7"><span class="mw-cite-backlink"><b><a href="#cite_ref-7">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.macrumors.com/roundup/macos-10-14/">"macOS Mojave: Dark Mode, Stacks, & More"</a>. <i>MacRumors</i>. October 25, 2019. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20220808141343/https://www.macrumors.com/roundup/macos-10-14/">Archived</a> from the original on August 8, 2022<span class="reference-accessdate">. Retrieved <span class="nowrap">August 8,</span> 2022</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=MacRumors&rft.atitle=macOS+Mojave%3A+Dark+Mode%2C+Stacks%2C+%26+More&rft.date=2019-10-25&rft_id=https%3A%2F%2Fwww.macrumors.com%2Froundup%2Fmacos-10-14%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFHardwick2019" class="citation web cs1">Hardwick, Tim (June 6, 2019). <a rel="nofollow" class="external text" href="https://www.macrumors.com/how-to/enable-dark-mode-in-ios-13/">"How to Enable Dark Mode in iOS 13"</a>. <i>MacRumors</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20220808141343/https://www.macrumors.com/how-to/enable-dark-mode-in-ios-13/">Archived</a> from the original on August 8, 2022<span class="reference-accessdate">. Retrieved <span class="nowrap">August 8,</span> 2022</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=MacRumors&rft.atitle=How+to+Enable+Dark+Mode+in+iOS+13&rft.date=2019-06-06&rft.aulast=Hardwick&rft.aufirst=Tim&rft_id=https%3A%2F%2Fwww.macrumors.com%2Fhow-to%2Fenable-dark-mode-in-ios-13%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-9"><span class="mw-cite-backlink"><b><a href="#cite_ref-9">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFCallaham2019" class="citation web cs1">Callaham, John (September 3, 2019). <a rel="nofollow" class="external text" href="https://www.androidauthority.com/android-10-dark-theme-1025156/">"Here's how to enable the Android 10 dark theme mode"</a>. <i>Android Authority</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20220808141344/https://www.androidauthority.com/android-10-dark-theme-1025156/">Archived</a> from the original on August 8, 2022<span class="reference-accessdate">. Retrieved <span class="nowrap">August 8,</span> 2022</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Android+Authority&rft.atitle=Here%27s+how+to+enable+the+Android+10+dark+theme+mode&rft.date=2019-09-03&rft.aulast=Callaham&rft.aufirst=John&rft_id=https%3A%2F%2Fwww.androidauthority.com%2Fandroid-10-dark-theme-1025156%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-10">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.androidauthority.com/best-dark-mode-extensions-google-chrome-3295454/">"The best dark mode extensions for Google Chrome"</a>. <i>Android Authority</i>. September 16, 2024<span class="reference-accessdate">. Retrieved <span class="nowrap">December 3,</span> 2024</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Android+Authority&rft.atitle=The+best+dark+mode+extensions+for+Google+Chrome&rft.date=2024-09-16&rft_id=https%3A%2F%2Fwww.androidauthority.com%2Fbest-dark-mode-extensions-google-chrome-3295454%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-11">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFPorter2019" class="citation web cs1">Porter, Jon (June 3, 2019). <a rel="nofollow" class="external text" href="https://www.theverge.com/2019/6/3/18647199/ios-13-dark-mode-apple-features-battery-saving-release-date-wwdc-2019">"Dark mode is coming to iOS 13"</a>. <i>The Verge</i>. <a rel="nofollow" class="external text" href="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">Archived</a> from the original on August 7, 2019<span class="reference-accessdate">. Retrieved <span class="nowrap">June 5,</span> 2019</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=The+Verge&rft.atitle=Dark+mode+is+coming+to+iOS+13&rft.date=2019-06-03&rft.aulast=Porter&rft.aufirst=Jon&rft_id=https%3A%2F%2Fwww.theverge.com%2F2019%2F6%2F3%2F18647199%2Fios-13-dark-mode-apple-features-battery-saving-release-date-wwdc-2019&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-12"><span class="mw-cite-backlink"><b><a href="#cite_ref-12">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.androidauthority.com/best-dark-mode-extensions-google-chrome-3295454/">"The best dark mode extensions for Google Chrome"</a>. <i>Android Authority</i>. September 16, 2024<span class="reference-accessdate">. Retrieved <span class="nowrap">December 3,</span> 2024</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Android+Authority&rft.atitle=The+best+dark+mode+extensions+for+Google+Chrome&rft.date=2024-09-16&rft_id=https%3A%2F%2Fwww.androidauthority.com%2Fbest-dark-mode-extensions-google-chrome-3295454%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-:0-13"><span class="mw-cite-backlink">^ <a href="#cite_ref-:0_13-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-:0_13-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">"prefers-color-scheme - CSS: Cascading Style Sheets"</a>. <i><a href="/wiki/MDN_Web_Docs" title="MDN Web Docs">MDN Web Docs</a></i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20210318082819/https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">Archived</a> from the original on March 18, 2021<span class="reference-accessdate">. Retrieved <span class="nowrap">March 18,</span> 2021</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=MDN+Web+Docs&rft.atitle=prefers-color-scheme+-+CSS%3A+Cascading+Style+Sheets&rft_id=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2F%40media%2Fprefers-color-scheme&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-14"><span class="mw-cite-backlink"><b><a href="#cite_ref-14">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFMehta2024" class="citation web cs1">Mehta, Ivan (July 12, 2024). <a rel="nofollow" class="external text" href="https://techcrunch.com/2024/07/12/wikipedias-mobile-website-finally-gets-a-dark-mode-heres-how-to-turn-it-on/">"Wikipedia's mobile website finally gets a dark mode"</a>. <i><a href="/wiki/TechCrunch" title="TechCrunch">TechCrunch</a></i>. <a rel="nofollow" class="external text" href="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/">Archived</a> from the original on July 13, 2024<span class="reference-accessdate">. Retrieved <span class="nowrap">July 13,</span> 2024</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=TechCrunch&rft.atitle=Wikipedia%27s+mobile+website+finally+gets+a+dark+mode&rft.date=2024-07-12&rft.aulast=Mehta&rft.aufirst=Ivan&rft_id=https%3A%2F%2Ftechcrunch.com%2F2024%2F07%2F12%2Fwikipedias-mobile-website-finally-gets-a-dark-mode-heres-how-to-turn-it-on%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-15"><span class="mw-cite-backlink"><b><a href="#cite_ref-15">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFPurdy2024" class="citation web cs1">Purdy, Kevin (July 29, 2024). <a rel="nofollow" class="external text" href="https://arstechnica.com/gadgets/2024/07/wikipedia-finally-has-an-official-dark-mode-on-desktop-and-mobile/">"Darkness reigns over Wikipedia as official dark mode comes to pass"</a>. <i><a href="/wiki/Ars_Technica" title="Ars Technica">Ars Technica</a></i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20240729234627/https://arstechnica.com/gadgets/2024/07/wikipedia-finally-has-an-official-dark-mode-on-desktop-and-mobile/">Archived</a> from the original on July 29, 2024<span class="reference-accessdate">. Retrieved <span class="nowrap">July 29,</span> 2024</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Ars+Technica&rft.atitle=Darkness+reigns+over+Wikipedia+as+official+dark+mode+comes+to+pass&rft.date=2024-07-29&rft.aulast=Purdy&rft.aufirst=Kevin&rft_id=https%3A%2F%2Farstechnica.com%2Fgadgets%2F2024%2F07%2Fwikipedia-finally-has-an-official-dark-mode-on-desktop-and-mobile%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-16"><span class="mw-cite-backlink"><b><a href="#cite_ref-16">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFGottsegen2018" class="citation web cs1">Gottsegen, Gordon (November 10, 2018). <a rel="nofollow" class="external text" href="https://www.cnet.com/news/using-androids-dark-mode-improves-battery-life-google-confirms-p/">"Using Android's dark mode improves battery life, Google confirms"</a>. <i>CNET</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20221227222448/https://www.cnet.com/tech/mobile/using-androids-dark-mode-improves-battery-life-google-confirms-p/">Archived</a> from the original on December 27, 2022.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=CNET&rft.atitle=Using+Android%27s+dark+mode+improves+battery+life%2C+Google+confirms&rft.date=2018-11-10&rft.aulast=Gottsegen&rft.aufirst=Gordon&rft_id=https%3A%2F%2Fwww.cnet.com%2Fnews%2Fusing-androids-dark-mode-improves-battery-life-google-confirms-p%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-17"><span class="mw-cite-backlink"><b><a href="#cite_ref-17">^</a></b></span> <span class="reference-text">Stokes, Jon. (2009-08-11) <a rel="nofollow" class="external text" href="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"</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20120125223142/http://arstechnica.com/gadgets/news/2009/08/this-september-oled-no-longer-three-to-five-years-away.ars">Archived</a> 2012-01-25 at the <a href="/wiki/Wayback_Machine" title="Wayback Machine">Wayback Machine</a>. Arstechnica.com. Retrieved 2011-10-04.</span> </li> <li id="cite_note-18"><span class="mw-cite-backlink"><b><a href="#cite_ref-18">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFRaga2019" class="citation web cs1">Raga, Dylan (June 27, 2019). <a rel="nofollow" class="external text" href="https://www.xda-developers.com/amoled-black-vs-gray-dark-mode/">"No, "AMOLED Black" Does NOT Save More Battery Than Dark Gray"</a>. <i>XDA</i>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=XDA&rft.atitle=No%2C+%22AMOLED+Black%22+Does+NOT+Save+More+Battery+Than+Dark+Gray&rft.date=2019-06-27&rft.aulast=Raga&rft.aufirst=Dylan&rft_id=https%3A%2F%2Fwww.xda-developers.com%2Famoled-black-vs-gray-dark-mode%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-19"><span class="mw-cite-backlink"><b><a href="#cite_ref-19">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFWelch2018" class="citation web cs1">Welch, Chris (November 2, 2018). <a rel="nofollow" class="external text" href="https://www.theverge.com/2018/11/8/18076502/google-dark-mode-android-battery-life">"Google confirms dark mode is a huge help for battery life on Android"</a>. <i>The Verge</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20191208015626/https://www.theverge.com/2018/11/8/18076502/google-dark-mode-android-battery-life">Archived</a> from the original on December 8, 2019<span class="reference-accessdate">. Retrieved <span class="nowrap">January 30,</span> 2020</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=The+Verge&rft.atitle=Google+confirms+dark+mode+is+a+huge+help+for+battery+life+on+Android&rft.date=2018-11-02&rft.aulast=Welch&rft.aufirst=Chris&rft_id=https%3A%2F%2Fwww.theverge.com%2F2018%2F11%2F8%2F18076502%2Fgoogle-dark-mode-android-battery-life&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-20"><span class="mw-cite-backlink"><b><a href="#cite_ref-20">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFSharma2020" class="citation web cs1">Sharma, Adamya (June 29, 2020). <a rel="nofollow" class="external text" href="https://www.androidauthority.com/dark-mode-1046425/">"Love dark mode? Here's why you may still want to avoid it"</a>. <i>Android Authority</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20200924091033/https://www.androidauthority.com/dark-mode-1046425/">Archived</a> from the original on September 24, 2020<span class="reference-accessdate">. Retrieved <span class="nowrap">September 12,</span> 2020</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Android+Authority&rft.atitle=Love+dark+mode%3F+Here%27s+why+you+may+still+want+to+avoid+it&rft.date=2020-06-29&rft.aulast=Sharma&rft.aufirst=Adamya&rft_id=https%3A%2F%2Fwww.androidauthority.com%2Fdark-mode-1046425%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-21"><span class="mw-cite-backlink"><b><a href="#cite_ref-21">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFClarke2019" class="citation magazine cs1">Clarke, Laurie (July 30, 2019). <a rel="nofollow" class="external text" href="https://www.wired.co.uk/article/dark-mode-chrome-android-ios-science">"Dark mode isn't as good for your eyes as you believe"</a>. <i>Wired UK</i>. <a href="/wiki/ISSN_(identifier)" class="mw-redirect" title="ISSN (identifier)">ISSN</a> <a rel="nofollow" class="external text" href="https://search.worldcat.org/issn/1357-0978">1357-0978</a>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20230622175218/https://www.wired.co.uk/article/dark-mode-chrome-android-ios-science">Archived</a> from the original on June 22, 2023<span class="reference-accessdate">. Retrieved <span class="nowrap">September 12,</span> 2020</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Wired+UK&rft.atitle=Dark+mode+isn%27t+as+good+for+your+eyes+as+you+believe&rft.date=2019-07-30&rft.issn=1357-0978&rft.aulast=Clarke&rft.aufirst=Laurie&rft_id=https%3A%2F%2Fwww.wired.co.uk%2Farticle%2Fdark-mode-chrome-android-ios-science&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-22"><span class="mw-cite-backlink"><b><a href="#cite_ref-22">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFBudiu2020" class="citation web cs1">Budiu, Raluca (February 2, 2020). <a rel="nofollow" class="external text" href="https://www.nngroup.com/articles/dark-mode/">"Dark Mode vs. Light Mode: Which Is Better?"</a>. <i>Nielsen Norman Group</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20230214144737/https://www.nngroup.com/articles/dark-mode/">Archived</a> from the original on February 14, 2023.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Nielsen+Norman+Group&rft.atitle=Dark+Mode+vs.+Light+Mode%3A+Which+Is+Better%3F&rft.date=2020-02-02&rft.aulast=Budiu&rft.aufirst=Raluca&rft_id=https%3A%2F%2Fwww.nngroup.com%2Farticles%2Fdark-mode%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-23"><span class="mw-cite-backlink"><b><a href="#cite_ref-23">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite id="CITEREFWalsh2019" class="citation web cs1">Walsh, David (January 28, 2019). <a rel="nofollow" class="external text" href="https://davidwalsh.name/prefers-color-scheme">"prefers-color-scheme: CSS Media Query"</a>. <i>David Walsh Blog</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20210317162842/https://davidwalsh.name/prefers-color-scheme">Archived</a> from the original on March 17, 2021<span class="reference-accessdate">. Retrieved <span class="nowrap">March 18,</span> 2021</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=David+Walsh+Blog&rft.atitle=prefers-color-scheme%3A+CSS+Media+Query&rft.date=2019-01-28&rft.aulast=Walsh&rft.aufirst=David&rft_id=https%3A%2F%2Fdavidwalsh.name%2Fprefers-color-scheme&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> <li id="cite_note-24"><span class="mw-cite-backlink"><b><a href="#cite_ref-24">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222" /><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia">"Window.matchMedia() - Web APIs"</a>. <i>MDN Web Docs</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20210302135113/https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia">Archived</a> from the original on March 2, 2021<span class="reference-accessdate">. Retrieved <span class="nowrap">March 18,</span> 2021</span>. <q>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</q></cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=MDN+Web+Docs&rft.atitle=Window.matchMedia%28%29+-+Web+APIs&rft_id=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FWindow%2FmatchMedia&rfr_id=info%3Asid%2Fen.wikipedia.org%3ALight-on-dark+color+scheme" class="Z3988"></span></span> </li> </ol></div></div> <div class="navbox-styles"><style data-mw-deduplicate="TemplateStyles:r1129693374">.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}</style><style data-mw-deduplicate="TemplateStyles:r1236075235">.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}</style></div><div role="navigation" class="navbox" aria-labelledby="Color_topics419" style="padding:3px"><table class="nowraplinks hlist mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="3"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374" /><style data-mw-deduplicate="TemplateStyles:r1239400231">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}</style><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:Color_topics" title="Template:Color topics"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Color_topics" title="Template talk:Color topics"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Color_topics" title="Special:EditPage/Template:Color topics"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="Color_topics419" style="font-size:114%;margin:0 4em"><a href="/wiki/Color" title="Color">Color</a> topics</div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_science" title="Color science">Color science</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%">Color physics</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Electromagnetic_spectrum" title="Electromagnetic spectrum">Electromagnetic spectrum</a> <ul><li><a href="/wiki/Light" title="Light">Light</a></li> <li><a href="/wiki/Rainbow" title="Rainbow">Rainbow</a></li> <li><a href="/wiki/Visible_spectrum" title="Visible spectrum">Visible</a></li></ul></li> <li><a href="/wiki/Spectral_color" title="Spectral color">Spectral colors</a></li> <li><a href="/wiki/Chromophore" title="Chromophore">Chromophore</a> <ul><li><a href="/wiki/Structural_coloration" title="Structural coloration">Structural coloration</a></li> <li><a href="/wiki/Animal_coloration" title="Animal coloration">Animal coloration</a></li></ul></li> <li><a href="/wiki/Color_of_chemicals" title="Color of chemicals">Color of chemicals</a> <ul><li><a href="/wiki/Color_of_water" title="Color of water">Water</a></li></ul></li> <li><a href="/wiki/Spectral_power_distribution" title="Spectral power distribution">Spectral power distribution</a></li> <li><a href="/wiki/Colorimetry" title="Colorimetry">Colorimetry</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_vision" title="Color vision">Color perception</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Chromesthesia" title="Chromesthesia">Chromesthesia</a> <ul><li><a href="/wiki/Sonochromatism" title="Sonochromatism">Sonochromatism</a></li></ul></li> <li><a href="/wiki/Color_blindness" title="Color blindness">Color blindness</a> <ul><li><a href="/wiki/Achromatopsia" title="Achromatopsia">Achromatopsia</a></li> <li><a href="/wiki/Dichromacy" title="Dichromacy">Dichromacy</a></li></ul></li> <li><a href="/wiki/Color_calibration" title="Color calibration">Color calibration</a></li> <li><a href="/wiki/Color_constancy" title="Color constancy">Color constancy</a></li> <li><a href="/wiki/Color_task" title="Color task">Color task</a> <ul><li><a href="/wiki/Color_code" title="Color code">Color code</a></li></ul></li> <li><a href="/wiki/Color_temperature" title="Color temperature">Color temperature</a></li> <li><a href="/wiki/Color_vision_test" title="Color vision test">Color vision test</a></li> <li><a href="/wiki/Evolution_of_color_vision" title="Evolution of color vision">Evolution of color vision</a></li> <li><a href="/wiki/Impossible_color" title="Impossible color">Impossible colors</a></li> <li><a href="/wiki/Metamerism_(color)" title="Metamerism (color)">Metamerism</a></li> <li><a href="/wiki/Opponent_process" title="Opponent process">Opponent process</a> <ul><li><a href="/wiki/Afterimage" title="Afterimage">Afterimage</a></li> <li><a href="/wiki/Unique_hues" title="Unique hues">Unique hues</a></li></ul></li> <li><a href="/wiki/Tetrachromacy" title="Tetrachromacy">Tetrachromacy</a></li> <li><i><a href="/wiki/The_dress" title="The dress">The dress</a></i></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_psychology" title="Color psychology">Color psychology</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Color_symbolism" title="Color symbolism">Color symbolism</a></li> <li><a href="/wiki/Color_preferences" title="Color preferences">Color preferences</a></li> <li><a href="/wiki/L%C3%BCscher_color_test" title="Lüscher color test">Lüscher color test</a></li> <li><a href="/wiki/Kruithof_curve" title="Kruithof curve">Kruithof curve</a></li> <li><a href="/wiki/Political_colour" title="Political colour">Political color</a></li> <li><a href="/wiki/National_colours" title="National colours">National colors</a></li> <li><a href="/wiki/Chromophobia" title="Chromophobia">Chromophobia</a></li> <li><a href="/wiki/Chromotherapy" title="Chromotherapy">Chromotherapy</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_reproduction" title="Color reproduction">Color reproduction</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Color_photography" title="Color photography">Color photography</a> <ul><li><a href="/wiki/Color_balance" title="Color balance">Color balance</a></li> <li><a href="/wiki/Colour_cast" title="Colour cast">Color cast</a></li></ul></li> <li><a href="/wiki/Digital_image_processing" title="Digital image processing">Digital image processing</a></li> <li><a href="/wiki/Color_management" title="Color management">Color management</a></li> <li><a href="/wiki/Color_printing" title="Color printing">Color printing</a> <ul><li><a href="/wiki/Multi-primary_color_display" title="Multi-primary color display">Multi-primary color display</a></li> <li><a href="/wiki/Quattron" title="Quattron">Quattron</a></li></ul></li> <li><a href="/wiki/Color_model" title="Color model">Color model</a> <ul><li><a href="/wiki/Additive_color" title="Additive color">additive</a> <ul><li><a href="/wiki/RGB" class="mw-redirect" title="RGB">RGB</a></li></ul></li> <li><a href="/wiki/Subtractive_color" title="Subtractive color">subtractive</a> <ul><li><a href="/wiki/CMYK" class="mw-redirect" title="CMYK">CMYK</a></li></ul></li></ul></li> <li><a href="/wiki/Color_space" title="Color space">Color space</a></li> <li><a href="/wiki/Color_mapping" class="mw-redirect" title="Color mapping">Color mapping</a></li></ul> </div></td></tr></tbody></table><div></div></td><td class="noviewer navbox-image" rowspan="6" style="width:1px;padding:0 0 0 2px"><div><span typeof="mw:File"><a href="/wiki/File:RGB_color_wheel.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/5/56/RGB_color_wheel.svg/100px-RGB_color_wheel.svg.png" decoding="async" width="100" height="83" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/56/RGB_color_wheel.svg/150px-RGB_color_wheel.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/56/RGB_color_wheel.svg/200px-RGB_color_wheel.svg.png 2x" data-file-width="600" data-file-height="500" /></a></span></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Philosophy_of_color" title="Philosophy of color">Color<br />philosophy</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_scheme" title="Color scheme">Color scheme</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Color_picker" title="Color picker">Color tool</a> <ul><li><a href="/wiki/Monochromatic_colors" class="mw-redirect" title="Monochromatic colors">Monochromatic colors</a> <ul><li><a href="/wiki/Black-and-white" title="Black-and-white">Black-and-white</a></li> <li><a href="/wiki/Grisaille" title="Grisaille">Grisaille</a></li></ul></li> <li><a href="/wiki/Complementary_colors" title="Complementary colors">Complementary colors</a></li> <li><a href="/wiki/Analogous_colors" title="Analogous colors">Analogous colors</a></li> <li><a href="/wiki/Grey" title="Grey">Achromatic colors (Neutral)</a></li> <li><a href="/wiki/Polychrome" title="Polychrome">Polychromatic colors</a></li></ul></li> <li><a class="mw-selflink selflink">Light-on-dark</a></li> <li><a href="/wiki/Web_colors" title="Web colors">Web colors</a></li> <li><a href="/wiki/Tincture_(heraldry)" title="Tincture (heraldry)">Tinctures in heraldry</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_theory" title="Color theory">Color theory</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Color_mixing" title="Color mixing">Color mixing</a> <ul><li><a href="/wiki/Primary_color" title="Primary color">Primary color</a></li> <li><a href="/wiki/Secondary_color" title="Secondary color">Secondary color</a></li></ul></li> <li><a href="/wiki/Chromaticity" title="Chromaticity">Chromaticity</a></li> <li><a href="/wiki/Color_solid" title="Color solid">Color solid</a></li> <li><a href="/wiki/Color_wheel" title="Color wheel">Color wheel</a></li> <li><a href="/wiki/Color_triangle" title="Color triangle">Color triangle</a></li> <li><a href="/wiki/Color_analysis" title="Color analysis">Color analysis</a> (fashion)</li> <li><a href="/wiki/Color_realism_(art_style)" title="Color realism (art style)">Color realism (art style)</a></li> <li><i><a href="/wiki/On_Vision_and_Colours" title="On Vision and Colours">On Vision and Colours</a></i> (Schopenhauer)</li> <li><i><a href="/wiki/Theory_of_Colours" title="Theory of Colours">Theory of Colours</a></i> (Goethe)</li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_term" title="Color term">Color terms</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_term#Basic_color_terms" title="Color term">Basic terms</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Blue" title="Blue">Blue</a></li> <li><a href="/wiki/Green" title="Green">Green</a></li> <li><a href="/wiki/Red" title="Red">Red</a></li> <li><a href="/wiki/Yellow" title="Yellow">Yellow</a></li> <li><a href="/wiki/Pink" title="Pink">Pink</a></li> <li><a href="/wiki/Purple" title="Purple">Purple</a></li> <li><a href="/wiki/Orange_(colour)" title="Orange (colour)">Orange</a></li> <li><a href="/wiki/Black" title="Black">Black</a></li> <li><a href="/wiki/Grey" title="Grey">Gray</a></li> <li><a href="/wiki/White" title="White">White</a></li> <li><a href="/wiki/Brown" title="Brown">Brown</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Category:Color_in_culture" title="Category:Color in culture">Cultural differences</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Linguistic_relativity_and_the_color_naming_debate" title="Linguistic relativity and the color naming debate">Linguistic relativity and the color naming debate</a> <ul><li><a href="/wiki/Blue%E2%80%93green_distinction_in_language" title="Blue–green distinction in language">Blue–green distinction in language</a></li></ul></li> <li>Color history <ul><li><a href="/wiki/Black-and-white_dualism" title="Black-and-white dualism">Black-and-white dualism</a></li> <li><a href="/wiki/Blue_in_culture" title="Blue in culture">Blue in culture</a></li> <li><a href="/wiki/Color_in_Chinese_culture" title="Color in Chinese culture">Color in Chinese culture</a></li> <li><a href="/wiki/Traditional_colors_of_Japan" title="Traditional colors of Japan">Traditional colors of Japan</a></li> <li><a href="/wiki/Human_skin_color" title="Human skin color">Human skin color</a></li></ul></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Color dimensions</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Hue" title="Hue">Hue</a> <ul><li><a href="/wiki/Dichromatism" title="Dichromatism">Dichromatism</a></li></ul></li> <li><a href="/wiki/Colorfulness" title="Colorfulness">Colorfulness</a> <ul><li><a href="/wiki/Pastel_(color)" title="Pastel (color)">Pastel colors</a></li></ul></li> <li><a href="/wiki/Luminance" title="Luminance">Luminance</a> <ul><li><a href="/wiki/Lightness" title="Lightness">Lightness</a></li> <li><a href="/wiki/Darkness" title="Darkness">Darkness</a></li> <li><a href="/wiki/Brightness" title="Brightness">Brightness</a></li> <li><a href="/wiki/Iridescence" title="Iridescence">Iridescence</a></li> <li><a href="/wiki/Fluorescence" title="Fluorescence">Fluorescence</a></li></ul></li> <li><a href="/wiki/Grayscale" title="Grayscale">Grayscale</a></li> <li><a href="/wiki/Tint,_shade_and_tone" title="Tint, shade and tone">Tint, shade and tone</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Color<br />organizations</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Pantone" title="Pantone">Pantone</a></li> <li><a href="/wiki/Color_Marketing_Group" title="Color Marketing Group">Color Marketing Group</a></li> <li><a href="/wiki/Color_Association_of_the_United_States" title="Color Association of the United States">Color Association of the United States</a></li> <li><a href="/wiki/International_Colour_Authority" title="International Colour Authority">International Colour Authority</a></li> <li><a href="/wiki/International_Commission_on_Illumination" title="International Commission on Illumination">International Commission on Illumination</a> (CIE)</li> <li><a href="/wiki/International_Color_Consortium" title="International Color Consortium">International Color Consortium</a></li> <li><a href="/wiki/International_Colour_Association" title="International Colour Association">International Colour Association</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Names</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Lists_of_colors" title="Lists of colors">Lists</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/List_of_colors:_A%E2%80%93F" title="List of colors: A–F">List of colors: A–F</a></li> <li><a href="/wiki/List_of_colors:_G%E2%80%93M" title="List of colors: G–M">List of colors: G–M</a></li> <li><a href="/wiki/List_of_colors:_N%E2%80%93Z" title="List of colors: N–Z">List of colors: N–Z</a></li> <li><a href="/wiki/List_of_colors_(compact)" class="mw-redirect" title="List of colors (compact)">List of colors (compact)</a></li> <li><a href="/wiki/List_of_colors_by_shade" title="List of colors by shade">List of colors by shade</a></li> <li><a href="/wiki/List_of_color_palettes" title="List of color palettes">List of color palettes</a></li> <li><a href="/wiki/List_of_color_spaces_and_their_uses" title="List of color spaces and their uses">List of color spaces</a></li> <li><a href="/wiki/List_of_Crayola_crayon_colors" title="List of Crayola crayon colors">List of Crayola crayon colors</a> <ul><li><a href="/wiki/History_of_Crayola_crayons" title="History of Crayola crayons">history</a></li></ul></li> <li><a href="/wiki/Color_chart" title="Color chart">Color chart</a></li> <li><a href="/wiki/List_of_RAL_colors" class="mw-redirect" title="List of RAL colors">List of RAL colors</a></li> <li><a href="/wiki/Web_colors" title="Web colors">List of web colors</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/List_of_colors_by_shade" title="List of colors by shade">Shades of:</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Shades_of_red" title="Shades of red">Red</a></li> <li><a href="/wiki/Shades_of_orange" title="Shades of orange">Orange</a></li> <li><a href="/wiki/Shades_of_yellow" title="Shades of yellow">Yellow</a></li> <li><a href="/wiki/Shades_of_green" title="Shades of green">Green</a></li> <li><a href="/wiki/Shades_of_cyan" title="Shades of cyan">Cyan</a></li> <li><a href="/wiki/Shades_of_blue" title="Shades of blue">Blue</a></li> <li><a href="/wiki/Shades_of_violet" title="Shades of violet">Violet</a></li> <li><a href="/wiki/Shades_of_purple" title="Shades of purple">Purple</a></li> <li><a href="/wiki/Shades_of_magenta" title="Shades of magenta">Magenta</a></li> <li><a href="/wiki/Shades_of_pink" title="Shades of pink">Pink</a></li> <li><a href="/wiki/Shades_of_brown" title="Shades of brown">Brown</a></li> <li><a href="/wiki/Shades_of_white" title="Shades of white">White</a></li> <li><a href="/wiki/Shades_of_gray" title="Shades of gray">Gray</a></li> <li><a href="/wiki/Shades_of_black" title="Shades of black">Black</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Index_of_color-related_articles" title="Index of color-related articles">Related</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Visual_perception" title="Visual perception">Vision</a> <ul><li><a href="/wiki/Contrast_(vision)" title="Contrast (vision)">Contrast</a></li></ul></li> <li><a href="/wiki/Qualia" title="Qualia">Qualia</a></li> <li><a href="/wiki/Lighting" title="Lighting">Lighting</a></li></ul> </div></td></tr><tr><td class="navbox-abovebelow" colspan="3"><div> <ul><li><span class="noviewer" typeof="mw:File"><span title="Category"><img alt="" src="//upload.wikimedia.org/wikipedia/en/thumb/9/96/Symbol_category_class.svg/16px-Symbol_category_class.svg.png" decoding="async" width="16" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/96/Symbol_category_class.svg/23px-Symbol_category_class.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/96/Symbol_category_class.svg/31px-Symbol_category_class.svg.png 2x" data-file-width="180" data-file-height="185" /></span></span> <a href="/wiki/Category:Color" title="Category:Color">Category</a></li> <li><span class="noviewer" typeof="mw:File"><span title="List-Class article"><img alt="" src="//upload.wikimedia.org/wikipedia/en/thumb/d/db/Symbol_list_class.svg/16px-Symbol_list_class.svg.png" decoding="async" width="16" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/d/db/Symbol_list_class.svg/23px-Symbol_list_class.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/d/db/Symbol_list_class.svg/31px-Symbol_list_class.svg.png 2x" data-file-width="180" data-file-height="185" /></span></span> <a href="/wiki/Index_of_color-related_articles" title="Index of color-related articles">Index</a></li></ul> </div></td></tr></tbody></table></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?useformat=desktop&type=1x1&usesul3=0" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikipedia.org/w/index.php?title=Light-on-dark_color_scheme&oldid=1276511259">https://en.wikipedia.org/w/index.php?title=Light-on-dark_color_scheme&oldid=1276511259</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Help:Category" title="Help:Category">Categories</a>: <ul><li><a href="/wiki/Category:User_interfaces" title="Category:User interfaces">User interfaces</a></li><li><a href="/wiki/Category:Display_technology" title="Category:Display technology">Display technology</a></li><li><a href="/wiki/Category:Color_schemes" title="Category:Color schemes">Color schemes</a></li><li><a href="/wiki/Category:Computer_graphics" title="Category:Computer graphics">Computer graphics</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden categories: <ul><li><a href="/wiki/Category:Webarchive_template_wayback_links" title="Category:Webarchive template wayback links">Webarchive template wayback links</a></li><li><a href="/wiki/Category:Articles_with_short_description" title="Category:Articles with short description">Articles with short description</a></li><li><a href="/wiki/Category:Short_description_is_different_from_Wikidata" title="Category:Short description is different from Wikidata">Short description is different from Wikidata</a></li><li><a href="/wiki/Category:Use_American_English_from_March_2022" title="Category:Use American English from March 2022">Use American English from March 2022</a></li><li><a href="/wiki/Category:All_Wikipedia_articles_written_in_American_English" title="Category:All Wikipedia articles written in American English">All Wikipedia articles written in American English</a></li><li><a href="/wiki/Category:Use_mdy_dates_from_March_2022" title="Category:Use mdy dates from March 2022">Use mdy dates from March 2022</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 19 February 2025, at 07:56<span class="anonymous-show"> (UTC)</span>.</li> <li id="footer-info-copyright">Text is available under the <a href="/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License" title="Wikipedia:Text of the Creative Commons Attribution-ShareAlike 4.0 International License">Creative Commons Attribution-ShareAlike 4.0 License</a>; additional terms may apply. By using this site, you agree to the <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use" class="extiw" title="foundation:Special:MyLanguage/Policy:Terms of Use">Terms of Use</a> and <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy" class="extiw" title="foundation:Special:MyLanguage/Policy:Privacy policy">Privacy Policy</a>. Wikipedia® is a registered trademark of the <a rel="nofollow" class="external text" href="https://wikimediafoundation.org/">Wikimedia Foundation, Inc.</a>, a non-profit organization.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia:About">About Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:General_disclaimer">Disclaimers</a></li> <li id="footer-places-contact"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us">Contact Wikipedia</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikipedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikipedia.org/w/index.php?title=Light-on-dark_color_scheme&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://www.wikimedia.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><picture><source media="(min-width: 500px)" srcset="/static/images/footer/wikimedia-button.svg" width="84" height="29"><img src="/static/images/footer/wikimedia.svg" width="25" height="25" alt="Wikimedia Foundation" lang="en" loading="lazy"></picture></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><picture><source media="(min-width: 500px)" srcset="/w/resources/assets/poweredby_mediawiki.svg" width="88" height="31"><img src="/w/resources/assets/mediawiki_compact.svg" alt="Powered by MediaWiki" lang="en" width="25" height="25" loading="lazy"></picture></a></li> </ul> </footer> </div> </div> </div> <div class="vector-header-container vector-sticky-header-container"> <div id="vector-sticky-header" class="vector-sticky-header"> <div class="vector-sticky-header-start"> <div class="vector-sticky-header-icon-start vector-button-flush-left vector-button-flush-right" aria-hidden="true"> <button class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-sticky-header-search-toggle" tabindex="-1" data-event-name="ui.vector-sticky-search-form.icon"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </button> </div> <div role="search" class="vector-search-box-vue vector-search-box-show-thumbnail vector-search-box"> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail"> <form action="/w/index.php" id="vector-sticky-search-form" class="cdx-search-input cdx-search-input--has-end-button"> <div class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikipedia"> <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <div class="vector-sticky-header-context-bar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-sticky-header-toc" class="vector-dropdown mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc vector-button-flush-left" > <input type="checkbox" id="vector-sticky-header-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-sticky-header-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-sticky-header-toc-label" for="vector-sticky-header-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-sticky-header-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div class="vector-sticky-header-context-bar-primary" aria-hidden="true" ><span class="mw-page-title-main">Light-on-dark color scheme</span></div> </div> </div> <div class="vector-sticky-header-end" aria-hidden="true"> <div class="vector-sticky-header-icons"> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-talk-sticky-header" tabindex="-1" data-event-name="talk-sticky-header"><span class="vector-icon mw-ui-icon-speechBubbles mw-ui-icon-wikimedia-speechBubbles"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-subject-sticky-header" tabindex="-1" data-event-name="subject-sticky-header"><span class="vector-icon mw-ui-icon-article mw-ui-icon-wikimedia-article"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-history-sticky-header" tabindex="-1" data-event-name="history-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-history mw-ui-icon-wikimedia-wikimedia-history"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only mw-watchlink" id="ca-watchstar-sticky-header" tabindex="-1" data-event-name="watch-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-star mw-ui-icon-wikimedia-wikimedia-star"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-edit-sticky-header" tabindex="-1" data-event-name="wikitext-edit-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-wikiText mw-ui-icon-wikimedia-wikimedia-wikiText"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-ve-edit-sticky-header" tabindex="-1" data-event-name="ve-edit-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-edit mw-ui-icon-wikimedia-wikimedia-edit"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-viewsource-sticky-header" tabindex="-1" data-event-name="ve-edit-protected-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-editLock mw-ui-icon-wikimedia-wikimedia-editLock"></span> <span></span> </a> </div> <div class="vector-sticky-header-buttons"> <button class="cdx-button cdx-button--weight-quiet mw-interlanguage-selector" id="p-lang-btn-sticky-header" tabindex="-1" data-event-name="ui.dropdown-p-lang-btn-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>14 languages</span> </button> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive" id="ca-addsection-sticky-header" tabindex="-1" data-event-name="addsection-sticky-header"><span class="vector-icon mw-ui-icon-speechBubbleAdd-progressive mw-ui-icon-wikimedia-speechBubbleAdd-progressive"></span> <span>Add topic</span> </a> </div> <div class="vector-sticky-header-icon-end"> <div class="vector-user-links"> </div> </div> </div> </div> </div> <div class="mw-portlet mw-portlet-dock-bottom emptyPortlet" id="p-dock-bottom"> <ul> </ul> </div> <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-5c6f46dcf-t6hjg","wgBackendResponseTime":117,"wgPageParseReport":{"limitreport":{"cputime":"0.341","walltime":"0.418","ppvisitednodes":{"value":1890,"limit":1000000},"postexpandincludesize":{"value":86583,"limit":2097152},"templateargumentsize":{"value":883,"limit":2097152},"expansiondepth":{"value":12,"limit":100},"expensivefunctioncount":{"value":9,"limit":500},"unstrip-depth":{"value":1,"limit":20},"unstrip-size":{"value":94286,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 343.392 1 -total"," 48.73% 167.329 1 Template:Reflist"," 37.48% 128.718 21 Template:Cite_web"," 23.50% 80.694 5 Template:Navbox"," 22.37% 76.828 1 Template:Color_topics"," 14.92% 51.234 1 Template:Short_description"," 8.95% 30.732 2 Template:Pagetype"," 4.88% 16.765 1 Template:About"," 3.68% 12.641 4 Template:Main_other"," 3.30% 11.327 1 Template:Use_American_English"]},"scribunto":{"limitreport-timeusage":{"value":"0.211","limit":"10.000"},"limitreport-memusage":{"value":5724771,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-5c6f46dcf-9k9pp","timestamp":"20250331030327","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"Light-on-dark color scheme","url":"https:\/\/en.wikipedia.org\/wiki\/Light-on-dark_color_scheme","sameAs":"http:\/\/www.wikidata.org\/entity\/Q6545942","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q6545942","author":{"@type":"Organization","name":"Contributors to Wikimedia projects"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2003-01-27T04:29:29Z","dateModified":"2025-02-19T07:56:46Z","image":"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/97\/Mediawiki-skin-aether.png","headline":"color scheme that uses light-colored text and icons on a dark background"}</script> </body> </html>