Using color-scheme to trigger a specific "prefers-color-scheme" media query

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

What specific section or headline is this issue about?

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#color_scheme_inheritance

What information was incorrect, unhelpful, or incomplete?

In the provided demonstration, a default light color scheme style is applied, and completed with a dark color scheme style using the prefers-color-scheme: dark media query. It shows that the color-scheme: dark attribute can be used to trigger the dark media query.

The problem is that it works as expected only if there is no prefers-color-scheme: light media query. If you add a "light" media query, it will still be preferred even if color-scheme: dark is set (supposing that the user prefers a light color scheme in their browser/OS settings).

What did you expect to see?

More information about the scenario where both a prefers-color-scheme: dark and a prefers-color-scheme: light media query are set. In this scenario, it seems that user preferences will take the priority over the color-scheme attribute.

Also matchMedia could be mentioned: since it's a global function, it is not affected by color-scheme either, it will always reflect the user's preferences.

Do you have any supporting links, references, or citations?

I've crafted a codepen demo. I've explored this issue in the context of forcing a webcontainer dark or light mode using a toggle, for tutorialkit.

Do you have anything more you want to share?

I initially suspected a bug but the behaviour seems similar in Chrome and Firefox. There has been some discussions around forcing a specific color-scheme but I don't think they covered this case.

MDN metadata

Page report details

* Folder: `en-us/web/css/@media/prefers-color-scheme` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/@media/prefers-color-scheme/index.md * Last commit: https://github.com/mdn/content/commit/4ecbac9e89961a132c1e7f5493ec94f60dcb1ee4 * Document last modified: 2024-08-08T16:03:20.000Z

Though used together, the color-scheme and prefers-color-scheme are not precisely hand-in-glove.

The prefers-color-scheme is simply a media query that reflects only the users' color preference. It doesn't consult color-scheme set on elements or document root. With one exception, in the case of embedded elements(SVG, iframe), they pick color scheme from their parent element.

The color-scheme tries to apply dark/light system colors to the limited set of elements, the elements that are styled by browsers, like form inputs, scrollbars etc.

Open this demo and change browser dark/light mode.

https://github.com/user-attachments/assets/1e266bd9-d9aa-4f83-81f3-c150f4698839

Now consider the following code snippet with explanation:

body {
  /* Allow the browser to color browser-styled
      elements, under the body element, as per user preference.
      Browser-styled elements are like form elements, scrollbars, etc.
     Note, other elements like labels, h1 etc. wont change according to browser dark/light mode.
  */
    color-scheme: light dark;
 }

@media (prefers-color-scheme: light) {
  /* We don't like the default coloring, set above, done by the OS/browser
     So we are overriding it using the @media query.
  */
  .custom {
    color: red;
    background-color: wheat;
   }

  * {
    /*  Note, here we can style all the elements using the prefers-color-scheme media query.  */
  }
}

@media (prefers-color-scheme: dark) {
  /* Same as above. We are overriding system dark mode colors here. */
  .custom {
    color: skyblue;
    background-color: purple;
  }
}

mdn / content