{"id":376465,"date":"2023-01-27T06:06:20","date_gmt":"2023-01-27T14:06:20","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=376465"},"modified":"2023-01-27T06:06:21","modified_gmt":"2023-01-27T14:06:21","slug":"color-scheme","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/color-scheme\/","title":{"rendered":"color-scheme"},"content":{"rendered":"\n<p>You know how we have <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-dark-mode-on-the-web\/\">\u201cdark mode\u201d and \u201clight mode\u201d<\/a> these days? Browsers also have &#8220;dark&#8221; and &#8220;light&#8221; color schemes baked into their default styles. The CSS <code>color-scheme<\/code> property lets the browser use (or choose) to display certain elements with its dark or light default styling.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:root {\n  color-scheme: light dark;\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWBmbLb\" src=\"\/\/codepen.io\/anon\/embed\/MWBmbLb?height=450&amp;theme-id=1&amp;slug-hash=MWBmbLb&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWBmbLb\" title=\"CodePen Embed MWBmbLb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The <code>color-scheme<\/code> property is defined in the <a href=\"https:\/\/w3c.github.io\/csswg-drafts\/css-color-adjust\/#color-scheme-prop\" rel=\"noopener\">CSS Color Adjustment Module Level 1<\/a> specification, where it is called the \u201cOpting Into a Preferred Color Scheme\u201d property.<\/p>\n\n\n\n<p>That\u2019s a great name for it because setting it enables the browser\u2019s <code>light<\/code> and <code>dark<\/code> color schemes to take effect when it recognizes a user\u2019s system preferences. If the user prefers light, they get the browser\u2019s <code>light<\/code> color scheme. Prefer dark? They get the <code>dark<\/code> color scheme instead.<\/p>\n\n\n\n<p>Think of it like providing the browser with a hint about the primary color of a page. If the primary color is <code>light<\/code> \u2014 such as a white background \u2014 then it\u2019s best if an element\u2019s default color has a darker contrast. If the primary color is <code>dark<\/code>, then the elements are better off with a lighter appearance.<\/p>\n\n\n\n<p>And once the browser gets the hint, it applies its corresponding <code>color-scheme<\/code> from its stylesheet automatically without us having to write additional styles or media queries.<\/p>\n\n\n\n<p class=\"is-style-explanation\">The <strong>CSS Color Adjustment Module Level 1 specification<\/strong> is currently in Editor&#8217;s Draft status at the time of writing. That means the feature could change between now and when the specification becomes a Candidate Recommendation. Browsers may implement the feature between then and now, but the feature is still considered experimental.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">color-scheme: normal | [ light | dark | &lt;custom-ident> ]+ &amp;&amp; only?<\/code><\/pre>\n\n\n\n<ul class=\"is-style-almanac-list\">\n<li><strong>Initial value:<\/strong> <code>normal<\/code><\/li>\n\n\n\n<li><strong>Applies to:<\/strong> all elements and texts<\/li>\n\n\n\n<li><strong>Inherited:<\/strong> yes<\/li>\n\n\n\n<li><strong>Percentages:<\/strong> n\/a<\/li>\n\n\n\n<li><strong>Computed value:<\/strong> As specified<\/li>\n\n\n\n<li><strong>Animation type:<\/strong> discrete<\/li>\n<\/ul>\n\n\n\n<p>The <code>color-scheme<\/code> CSS property can be applied to the <code>:root<\/code> element so it is inherited globally, or it can be set on an individual element.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword values *\/\ncolor-scheme: normal;\ncolor-scheme: light;\ncolor-scheme: dark;\ncolor-scheme: light dark;\ncolor-scheme: dark light;\ncolor-scheme: only light;\ncolor-scheme: only dark;\n\n\/* Global values *\/\ncolor-scheme: inherit;\ncolor-scheme: initial;\ncolor-scheme: revert;\ncolor-scheme: revert-layer;\ncolor-scheme: unset;<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"normal\"><code>normal<\/code><\/h4>\n\n\n<p>This value prevents an element from opting elements into the operating system\u2019s light and dark color schemes. Instead, the browser\u2019s default color scheme is used.<\/p>\n\n\n\n<p>This can be used to reset an element\u2019s inherited color scheme. Say you set <code>color-scheme<\/code> on the <code>:root<\/code> element:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:root {\n  color-scheme: dark;\n}<\/code><\/pre>\n\n\n\n<p>All elements inherit that style. If we want a particular element to opt out of that style, that\u2019s where <code>normal<\/code> relegates things back to the browser defaults.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:root {\n  color-scheme: dark;\n}\n\n.some-element {\n  color-scheme: normal;\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"light\"><code>light<\/code><\/h4>\n\n\n<p>This value opts elements into the operating system\u2019s light color scheme.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"dark\"><code>dark<\/code><\/h4>\n\n\n<p>This value opts elements into the operating system\u2019s dark color scheme.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"only\"><code>only<\/code><\/h4>\n\n\n<p>This value is used alongside either the <code>light<\/code> or <code>dark<\/code> value:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:root {\n  color-scheme: only light;\n}<\/code><\/pre>\n\n\n\n<p>When we do that, we\u2019re telling the browser to opt an element into <em>only<\/em> the light color scheme, or <em>only<\/em> the dark. So, if we set <code>color-scheme: only light<\/code> on an element, that element can receive the operating system\u2019s light color scheme, but cannot use its dark color scheme\u2026 and vice versa.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"opting-into-light-and-dark-color-schemes-at-the-same-time\">Opting into light <em>and<\/em> dark color schemes at the same time<\/h3>\n\n\n<p>We can totally do that:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Light and dark color schemes are supported,\n   but `light` is my preferred option. *\/\n:root {\n  color-scheme: light dark;\n}<\/code><\/pre>\n\n\n\n<p>Notice that the order matters. So, even though an element is opted into both color schemes, the first is what gets first preference. Setting both values on the <code>:root<\/code> is a good way to make sure all of your elements support color schemes, while leaning into one over the other.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-exact-colors-are-up-to-the-browser\">The exact colors are up to the browser<\/h3>\n\n\n<p>Browsers include their own stylesheets. We call these User Agent (which is just a fancy word for \u201cbrowser\u201d) styles. Let\u2019s peek at one of the CSS in <a href=\"https:\/\/trac.webkit.org\/browser\/trunk\/Source\/WebCore\/css\/html.css\" rel=\"noopener\">WebKit\u2019s stylesheet<\/a>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a:any-link {\n  color: -webkit-link;\n  text-decoration: underline;\n  cursor: auto;\n}<\/code><\/pre>\n\n\n\n<p>See that <code>-webkit-link<\/code> color? That\u2019s a named color only WebKit recognizes and it applies that color to all links by default, unless we override it with our own CSS. So, when a rendering engine like WebKit sees that we\u2019ve set <code>color-scheme: light<\/code> or <code>color-scheme: dark<\/code> on an element, it decides which version of that color will work best for the situation.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/w3c.github.io\/csswg-drafts\/css-color-adjust\/#color-scheme-prop\" rel=\"noopener\">spec<\/a> elaborates on this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Light and dark color schemes are not specific color palettes. For example, a stark black-on-white scheme and a sepia dark-on-tan scheme would both be considered light color schemes. To ensure particular foreground or background colors, they need to be specified explicitly.<\/p>\n<\/blockquote>\n\n\n<h3 class=\"wp-block-heading\" id=\"but-sometimes-the-color-is-up-to-the-user\">But sometimes the color is up to the user<\/h3>\n\n\n<p>Operating systems often allow users to override its system colors with a preferred color scheme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1654\" height=\"1256\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-3.00.46-PM.png?resize=1654%2C1256&#038;ssl=1\" alt=\"macOS system preferences open to appearance settings.\" class=\"wp-image-376467\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-3.00.46-PM.png?w=1654&amp;ssl=1 1654w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-3.00.46-PM.png?resize=300%2C228&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-3.00.46-PM.png?resize=1024%2C778&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-3.00.46-PM.png?resize=768%2C583&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-3.00.46-PM.png?resize=1536%2C1166&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">macOS allows users to change the system\u2019s \u201cAccent color\u201d and \u201cHighlight color\u201d in addition to selecting a \u201cLight\u201d, \u201cDark\u201d, or \u201cAuto\u201d color scheme.<\/figcaption><\/figure>\n\n\n\n<p>These are the preferences a browser checks when it sees <code>color-scheme<\/code> declared on an element. If the user selects a color from these preferences, then the browser&#8217;s default styles will respect those operating system settings.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"theres-a-corresponding-ltmetagt-tag-too\">There\u2019s a corresponding <code>&lt;meta&gt;<\/code> tag, too<\/h3>\n\n\n<p>We can get the same benefits by adding the <code>&lt;meta name=\"color-scheme\"&gt;<\/code> tag to the <code>&lt;head&gt;<\/code> in the HTML of a webpage:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;head>\n  &lt;meta name=\"color-scheme\" content=\"dark light\">\n&lt;\/head><\/code><\/pre>\n\n\n\n<p>There\u2019s no need to specify the color scheme in both the HTML and CSS, but it could be handy in situations where your stylesheet fails to load for some reason. That way, the page is still opted into both color schemes, even if the CSS is unavailable.<\/p>\n\n\n\n<p>If you\u2019re trying to choose between the HTML meta tag and the CSS property, you might lean toward the HTML. HTML is instantly available. The CSS method, on the other hand, requires the stylesheet to download before it applies the property and the time it takes to do that could result in a slight <a href=\"https:\/\/css-tricks.com\/flash-of-inaccurate-color-theme-fart\/\">flash of incorrect color theme<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"colorscheme-is-all-about-default-appearances\"><code>color-scheme<\/code> is all about default appearances<\/h3>\n\n\n<p>So, elements on a page that have default colors from the User Agent stylesheet \u2014 like the <code>background-color<\/code> of form controls and the <code>color<\/code> of text \u2014 update according to the <code>color-scheme<\/code> value. Apple explains this nicely it\u2019s <a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2019\/511\/?time=157\" rel=\"noopener\">\u201cSupporting Dark Mode in Your Web Content\u201d video<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>[<code>color-scheme<\/code>] changes the default text and background colors of the page to match the current system appearance, standard form controls, scrollbars and other named system colors also change their look automatically.<\/p>\n<\/blockquote>\n\n\n\n<p>We can see this with a quick and dirty demo where we\u2019re only dealing with three elements:<\/p>\n\n\n\n<ul>\n<li>The document <code>:root<\/code>,<\/li>\n\n\n\n<li>a <code>&lt;h1&gt;<\/code>element, and<\/li>\n\n\n\n<li>a <code>&lt;button&gt;<\/code><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNMWeyL\" src=\"\/\/codepen.io\/anon\/embed\/oNMWeyL?height=450&amp;theme-id=1&amp;slug-hash=oNMWeyL&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNMWeyL\" title=\"CodePen Embed oNMWeyL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Notice that the demo does not set any color on the elements. I\u2019ve set the <code>:root<\/code> to a light color scheme so that is what renders by default. Clicking the button set <code>:root<\/code> to <code>dark<\/code>.<\/p>\n\n\n\n<p>See what changed when going from <code>light<\/code> to <code>dark<\/code>?<\/p>\n\n\n\n<ul>\n<li>The document&#8217;s <code>background-color<\/code> changes from white to black.<\/li>\n\n\n\n<li>The Heading 1 <code>color<\/code> changes from black to white.<\/li>\n\n\n\n<li>The button\u2019s <code>color<\/code> also changes from black to white.<\/li>\n\n\n\n<li>The button\u2019s <code>background-color<\/code> changes shades<\/li>\n<\/ul>\n\n\n\n<p>If we crack open DevTools, we can see that the Heading 1 <code>color<\/code> is coming from the User Agent stylesheet with a <code>text<\/code> value.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2368\" height=\"1478\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.30.19-PM.png?resize=2368%2C1478&#038;ssl=1\" alt=\"DevTools window with the Heading 1 element selected.\" class=\"wp-image-376468\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.30.19-PM.png?w=2368&amp;ssl=1 2368w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.30.19-PM.png?resize=300%2C187&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.30.19-PM.png?resize=1024%2C639&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.30.19-PM.png?resize=768%2C479&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.30.19-PM.png?resize=1536%2C959&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.30.19-PM.png?resize=2048%2C1278&amp;ssl=1 2048w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>I\u2019m honestly unsure what color <code>text<\/code> actually maps to. But if we move over to the Computed tab, we\u2019ll see that it\u2019s black (<code>rgb(0, 0, 0)<\/code>).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1278\" height=\"800\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.37.55-PM.png?resize=1278%2C800&#038;ssl=1\" alt=\"DevTools open showing the computed Heading 1 styles.\" class=\"wp-image-376469\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.37.55-PM.png?w=1278&amp;ssl=1 1278w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.37.55-PM.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.37.55-PM.png?resize=1024%2C641&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.37.55-PM.png?resize=768%2C481&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">The <code>text<\/code> value is mapped to a color of <code>rgb(0, 0, 0)<\/code> when <code>color-scheme<\/code> is set to <code>light<\/code>.<\/figcaption><\/figure>\n\n\n\n<p>When we toggle the <code>color-scheme<\/code> property from <code>light<\/code> to <code>dark<\/code>, that computed value changes to white (<code>rgb(255, 255, 255)<\/code>):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1256\" height=\"808\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.39.16-PM.png?resize=1256%2C808&#038;ssl=1\" alt=\"DevTools open showing the computed Heading 1 styles.\" class=\"wp-image-376470\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.39.16-PM.png?w=1256&amp;ssl=1 1256w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.39.16-PM.png?resize=300%2C193&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.39.16-PM.png?resize=1024%2C659&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-2.39.16-PM.png?resize=768%2C494&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">The <code>text<\/code> value is mapped to a color of <code>rgb(255, 255, 255)<\/code> when <code>color-scheme<\/code> is set to <code>dark<\/code>.<\/figcaption><\/figure>\n\n\n\n<p>Those colors were never set in the styles I wrote \u2014 they come from the browser&#8217;s stylesheet. And the <code>color-scheme<\/code> property is what controls them.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"colorscheme-is-different-than-preferscolorscheme\"><code>color-scheme<\/code> is different than <code>prefers-color-scheme<\/code><\/h3>\n\n\n<p>It\u2019s easy to confuse the two. They take the same <code>light<\/code> and <code>dark<\/code> values afterall!<\/p>\n\n\n\n<p>The difference? Again, <code>color-scheme<\/code> is all about <strong>default appearances<\/strong>. It tells the browser to update the colors in its stylesheet.<\/p>\n\n\n\n<p>Meanwhile, <code><a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-css-media-queries\/#aa-prefers-color-scheme\">prefers-color-scheme<\/a><\/code> is all about applying the styles we write in our own stylesheet, and only when that condition is met. In other words, any style rules we write inside the media query are applied \u2014 it has nothing to do with the browser\u2019s default styles.<\/p>\n\n\n\n<p>Let\u2019s revisit our last example where we changed the <code>color-scheme<\/code> of a page that contains the <code>:root<\/code> document, a heading, and a button. By default, I did not change any of the colors, but I did declare <code>color-scheme: light<\/code>. That means all of the colors are coming from the browser\u2019s stylesheet.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:root {\n  color-scheme: light;\n}<\/code><\/pre>\n\n\n\n<p>When we changed that to:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:root {\n  color-scheme: dark;\n}<\/code><\/pre>\n\n\n\n<p>\u2026all of those default colors from the browser\u2019s stylesheet changed. No media queries required!<\/p>\n\n\n\n<p>Now let\u2019s say we never declare <code>color-scheme<\/code>. We\u2019d use the <code>prefers-color-scheme<\/code> media query to change those colors ourselves. Here\u2019s an abbreviated example that changes the <code>:root<\/code> element\u2019s <code>background-color<\/code> and <code>color<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:root {\n  background-color: white;\n  color: black;\n}\n\n\/* If user prefers a dark appearance *\/\n@media (prefers-color-scheme: dark) {\n  :root {\n    background-color: black;\n    color: white;\n  }\n}<\/code><\/pre>\n\n\n\n<p>The media query is only applied if the user\u2019s operating system appearance is set to \u201cDark\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1654\" height=\"1256\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-1.21.38-PM.png?resize=1654%2C1256&#038;ssl=1\" alt=\"macOS system preferences open to appearance settings with Dark mode selected.\" class=\"wp-image-376471\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-1.21.38-PM.png?w=1654&amp;ssl=1 1654w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-1.21.38-PM.png?resize=300%2C228&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-1.21.38-PM.png?resize=1024%2C778&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-1.21.38-PM.png?resize=768%2C583&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-11-at-1.21.38-PM.png?resize=1536%2C1166&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBymVEK\" src=\"\/\/codepen.io\/anon\/embed\/qBymVEK?height=450&amp;theme-id=1&amp;slug-hash=qBymVEK&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBymVEK\" title=\"CodePen Embed qBymVEK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If that condition matches, <em>any<\/em> styles we put in there are applied \u2014 we\u2019re not limited only to the browser\u2019s default colors and styles. For example, let\u2019s change <code>background-color<\/code> and <code>color<\/code> to completely different colors when the <code>prefers-color-scheme: dark<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwBVjNd\" src=\"\/\/codepen.io\/anon\/embed\/RwBVjNd?height=450&amp;theme-id=1&amp;slug-hash=RwBVjNd&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwBVjNd\" title=\"CodePen Embed RwBVjNd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"using-colorscheme-and-preferscolorscheme-together\">Using <code>color-scheme<\/code> and <code>prefers-color-scheme<\/code> together<\/h3>\n\n\n<p>The truth is that it\u2019s better to use the two together. Why? They do different things but complement each other nicely. We could create the most beautiful dark mode interface in the world using <code>prefers-color-scheme<\/code>, but some elements \u2014 like form controls and scrollbars \u2014 are outside our control without <a href=\"https:\/\/css-tricks.com\/snippets\/css\/custom-checkboxes-and-radio-buttons\/\">overriding a bunch of default browser styles<\/a>. When we use the two together, we gain an easy way toi switch those defaults without the additional overhead.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<p>Support for the CSS <code>color-scheme<\/code> property is pretty solid, as long as you\u2019re using the <code>light<\/code> and <code>dark<\/code> values. Many browsers lack support for the <code>only<\/code> keyword at the time of writing, with Safari as the lone exception.<\/p>\n\n\n\n<figure class=\"wp-block-table ticss-edd1ab33\"><table><thead><tr><th><br>Desktop Browsers<\/th><th>IE<\/th><th>Edge<\/th><th>Chrome<\/th><th>Firefox<\/th><th>Safari<\/th><th>Opera<\/th><\/tr><\/thead><tbody><tr><td><code>color-scheme<\/code><\/td><td>No<\/td><td>81+<\/td><td>81+<\/td><td>96+<\/td><td>13+<\/td><td>68+<\/td><\/tr><tr><td>Keyword:&nbsp;<code>only dark<\/code><\/td><td>No<\/td><td>No<\/td><td>No<\/td><td>No<\/td><td>13+<\/td><td>No<\/td><\/tr><tr><td>Keyword:&nbsp;<code>only light<\/code><\/td><td>No<\/td><td>No<\/td><td>No<\/td><td>No<\/td><td>13+<\/td><td>No<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-d79a2541\"><table><thead><tr><th>Mobile Browsers<\/th><th>Safari iOS<\/th><th>Chrome Android<\/th><th>Firefox Android<\/th><th>Android Browser<\/th><th>Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td><code>color-scheme<\/code><\/td><td>13+<\/td><td>108+<\/td><td>107+<\/td><td>108+<\/td><td>72+<\/td><\/tr><tr><td>Keyword:&nbsp;<code>only light<\/code><\/td><td>13+<\/td><td>No<\/td><td>No<\/td><td>No<\/td><td>No<\/td><\/tr><tr><td>Keyword:&nbsp;<code>only dark<\/code><\/td><td>13+<\/td><td>No<\/td><td>No<\/td><td>No<\/td><td>No<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_color-scheme\" rel=\"noopener\">Caniuse<\/a><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul>\n<li><a href=\"https:\/\/w3c.github.io\/csswg-drafts\/css-color-adjust\/#color-scheme-prop\" rel=\"noopener\">CSS Color Adjustment Level Module 1<\/a> (W3C)<\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/a-quick-look-at-the-first-public-working-draft-for-color-adjust-module-1\/\">A Quick Look at the First Public Working Draft for Color Adjust Module&nbsp;1<\/a> (CSS-Tricks)<\/li>\n\n\n\n<li><a href=\"https:\/\/blog.jim-nielsen.com\/2020\/color-scheme-property\/\" rel=\"noopener\">Don\u2019t Forget the color-scheme Property<\/a> (Jim Nielsen)<\/li>\n\n\n\n<li><a href=\"https:\/\/web.dev\/color-scheme\/\" rel=\"noopener\">Improved dark mode default styling with the&nbsp;<code>color-scheme<\/code> CSS property<\/a> (web.dev)<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-tricks\">Related tricks!<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card 2021-end-of-year-thoughts\" id=\"mini-post-376465\">\n\n  <time datetime=\"2021-12-22\" title=\"Originally published Jan 27, 2023\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 22, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/personalize-it\/\">\n      Personalize it!    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/unakravets\/\" aria-label=\"Author page of Una Kravets\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/354bf07bc260006735563585f9e18d99?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/354bf07bc260006735563585f9e18d99?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/unakravets\/\">\n      Una Kravets    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-376465\">\n\n  <time datetime=\"2020-07-01\" title=\"Originally published Jan 27, 2023\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 24, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-dark-mode-on-the-web\/\">\n      A Complete Guide to Dark Mode on the Web    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/mohamedadhuham\/\" aria-label=\"Author page of Adhuham\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/32795085.png?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/mohamedadhuham\/\">\n      Adhuham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card 2021-end-of-year-thoughts\" id=\"mini-post-376465\">\n\n  <time datetime=\"2021-12-27\" title=\"Originally published Jan 27, 2023\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 27, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/honor-prefers-color-scheme-in-the-css-paint-api-with-custom-properties\/\">\n      Honor prefers-color-scheme in the CSS Paint API with Custom Properties    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/jeremywagner\/\" aria-label=\"Author page of Jeremy Wagner\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/jsJHCupM_400x400.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/jeremywagner\/\">\n      Jeremy Wagner    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-376465\">\n\n  <time datetime=\"2018-11-14\" title=\"Originally published Jan 27, 2023\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 28, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/dark-modes-with-css\/\">\n      Dark Mode in CSS    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-376465\">\n\n  <time datetime=\"2021-04-15\" title=\"Originally published Jan 27, 2023\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 14, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/flash-of-inaccurate-color-theme-fart\/\">\n      Flash of inAccurate coloR Theme (FART)    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>You know how we have \u201cdark mode\u201d and \u201clight mode\u201d these days? Browsers also have &#8220;dark&#8221; and &#8220;light&#8221; color schemes baked into their default styles. The CSS color-scheme property lets the browser use (or choose) to display certain elements with its dark or light default styling.<\/p>\n","protected":false},"author":2508,"featured_media":300990,"parent":13915,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":285700,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar-color\/","url_meta":{"origin":376465,"position":0},"title":"scrollbar-color","date":"April 2, 2019","format":false,"excerpt":"The scrollbar-color property controls the two colors of a scrollbar: the thumb color and the track color. scrollbar-color is part of the CSS Working Group's Scrollbars Module Level 1 draft, which is still a work in progress as of this writing. Prior to scrollbar-color, developers had no standard way to\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350365,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/accent-color\/","url_meta":{"origin":376465,"position":1},"title":"accent-color","date":"August 26, 2021","format":false,"excerpt":"The accent-color property in CSS is capable of re-tinting the accented color of form controls provided by the browser's default styles with a custom color value. .element { accent-color: #f8a100; } accent-color is defined in CSS Basic User Interface Module Level 4, which is currently in Working Draft. That means\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":200237,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mix-blend-mode\/","url_meta":{"origin":376465,"position":2},"title":"mix-blend-mode","date":"April 12, 2015","format":false,"excerpt":"The mix-blend-mode property defines how an element\u2019s content should blend with its background. For example, the text of a <h1> could blend with the background behind it in interesting ways. .blend { mix-blend-mode: exclusion; } CodePen Embed Fallback In the example above the content has been modified\u00a0by the mix-blend-mode so\u2026","rel":"","context":"In \"mix-blend-mode\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17426,"url":"https:\/\/css-tricks.com\/snippets\/css\/solarized-theme-for-codemirror-and-prettify\/","url_meta":{"origin":376465,"position":3},"title":"Solarized Theme for CodeMirror and Prettify","date":"July 9, 2012","format":false,"excerpt":"Here's for Google Code Prettify (found at this source). .prettyprint { color: #839496; background-color: #002b36; } .prettyprint .pln { color: inherit; } .prettyprint .str, .prettyprint .lit, .prettyprint .atv { color: #2aa198; } .prettyprint .kwd { color: #268bd2; } .prettyprint .com, .prettyprint .dec { color: #586e75; font-style: italic; } .prettyprint .typ\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":199429,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-blend-mode\/","url_meta":{"origin":376465,"position":4},"title":"background-blend-mode","date":"April 6, 2015","format":false,"excerpt":"The background-blend-mode property defines how an element's background-image should blend with its background-color: .container { background-image: url('image.jpg'); background-color: red; background-blend-mode: screen; } CodePen Embed Fallback In the demo above, the default background-image on the left has no blend mode set and so the image overlaps the background-color. On the right\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3272,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/clear-default-search-string-on-focus\/","url_meta":{"origin":376465,"position":5},"title":"Clear Default Search String on Focus","date":"August 7, 2009","format":false,"excerpt":"$(\"#s\") .val(\"Search...\") .css(\"color\", \"#ccc\") .focus(function(){ $(this).css(\"color\", \"black\"); if ($(this).val() == \"Search...\") { $(this).val(\"\"); } }) .blur(function(){ $(this).css(\"color\", \"#ccc\"); if ($(this).val() == \"\") { $(this).val(\"Search...\"); } }); Set value of field to \"Search...\" When field comes into focus, set color to black. If value is default, remove it. When field goes\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376465"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=376465"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376465\/revisions"}],"predecessor-version":[{"id":376507,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376465\/revisions\/376507"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13915"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=376465"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}