Re: [csswg-drafts] [mediaqueries] Effect of <meta name=color-scheme> on the (prefers-color-scheme) MQ (#10249)

I published a new post today: [“Querying the Color Scheme”](https://blog.kizu.dev/querying-the-color-scheme/) about how we can use style queries, registered custom properties and `light-dark()` to query the value of the `color-scheme` on any element, including the root one. Here is a CodePen: https://codepen.io/kizu/pen/YzojgZP

The way `color-scheme` is defined in the specs is such:

> The [color-scheme](https://drafts.csswg.org/css-color-adjust/#propdef-color-scheme) property allows an element to indicate which [color schemes](https://drafts.csswg.org/css-color-adjust/#color-scheme) it is designed to be rendered with. These values are negotiated with the user’s preferences, resulting in a used color scheme that affects things such as the default colors of form controls and scrollbars. (See [§ 2.2 Effects of the Used Color Scheme](https://drafts.csswg.org/css-color-adjust/#color-scheme-effect).)

There is an important distinction between it and the user preferences. The `@media (prefers-color-scheme)` is _specifically_ about the user preference, and not about the _used_ color scheme.

Expecting the `<meta name=color-scheme content=dark>` to impact the `@media` is an author mistake, and if we had a built-in container query for querying the “used color scheme” (or just allow the `color-scheme` in the `@container style(color-scheme: light | dark)`), it would be trivial for the authors to specify the styles which would be based on the `<meta>`. The `meta` tag, in this case, just says that the page is designed with the corresponding schemes in mind, and it up to the authors to actually design it appropriately.


-- 
GitHub Notification of comment by kizu
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10249#issuecomment-2318359663 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 29 August 2024 16:51:05 UTC