2048919 - Implement newly specced behaviour for prefers-color-scheme to be impacted by the page color-scheme

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, enhancement)

Description

[oliverwilliams345]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Safari/605.1.15

Steps to reproduce:

Currently, the color-scheme of the page impacts the prefers-color-scheme media query only in iframes and in SVG. The CSSWG has resolved that this behaviour should be changed to that the color-scheme impacts the media query in all contexts.

See: https://drafts.csswg.org/css-color-adjust-1/#page-color-scheme:~:text=The%20user%E2%80%99s%20preferred%20color%20scheme%20is%20then%20combined%20with%20the%20page%E2%80%99s%20supported%20color%20schemes%20to%20produce%20a%20page%20color%20scheme.%20The%20page%20color%20scheme%20also%20records%20whether%20it%E2%80%99s%20default%20or%20not.%20The%20page%20color%20scheme%20is%20queryable%20with%20the%20prefers%2Dcolor%2Dscheme%20media%20query

https://github.com/w3c/csswg-drafts/pull/13857#:~:text=(prefers%2Dcolor%2Dscheme)%20reflect%20the%20effects%20of%20%3Cmeta%20name%3Dcolor%2Dscheme%3E%20and%20adding%20a%20(name%20TBD)%20(ua%2Dcolor%2Dscheme)%20MQ%20to%20actually%20reflect%20the%20user%27s%20preference

This change brings consistency between how the media query works, so is easier to understand for developers. Currently, for any website with an in-page dark mode toggle, the media query is unusable. This change makes the media query usable on websites that allow end-users to override the OS-level color scheme setting. The CSS light-dark() function can only be used to set colors, gradients and background-images. Having the full power of the media query to conditionally apply any CSS property is highly useful e.g to apply a shadow only in light mode, for example.

Comment 1

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.