[csswg-drafts] [css-mediaqueries] Edge cases of `prefers-color-scheme` and iframe color-scheme (#13796)

tuankiet65 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-mediaqueries] Edge cases of `prefers-color-scheme` and iframe color-scheme ==
#7213 resolved that `prefers-color-scheme` reflects `color-scheme` of the embedding element (for SVG only)

> RESOLVED: Have prefered-color-scheme reflect 'color-scheme' on the embedding element in the embedding document, to the extent acceptable from security standpoint (pending security review)

This was edited into the spec as:

> If evaluated in an embedded SVG document using the "Secure Animated" embedding mode, the preferred color scheme must reflect the value of the [used color scheme](https://www.w3.org/TR/css-color-adjust-1/#used-color-scheme) on the embedding node in the embedding document.

#7493 additionally extended this behavior to iframes:

> RESOLVED: Context-dependent color scheme propagation works for iframes (including cross-origin) unless specifically restricted

While implementing this behavior for WebKit, I found two edge cases not mentioned in the spec.

## When `color-scheme` is not specified

From my reading of the spec, the embedded document's `prefers-color-scheme` should only look at the embedding element's `color-scheme`. What if the embedding element doesn't specify `color-scheme` at all?

The spec doesn't mention this, but from my testing, Chrome and Firefox defaults to the system's appearance (i.e if the system is dark, then `prefers-color-scheme` is `dark`.) Personally, I prefer this behavior and would like this to be added to the spec.

## Nested iframes and `color-scheme` propagation

Consider a document of nested iframes and some of them have `color-scheme` specified:

```html
<iframe style=color-scheme:dark srcdoc="
  <iframe style=color-scheme:light srcdoc=&quot;
    <iframe srcdoc='
      <style>
        div { width: 100px; height: 100px; }

        @media (prefers-color-scheme: dark) {
          div { background-color: darkblue; }
        }

        @media (prefers-color-scheme: light) {
          div { background-color: lightblue; }
        }
      </style>
      <div></div>
    '></iframe>
  &quot;></iframe>
"></iframe>
```

My understanding is that `prefers-color-scheme` only looks at the `color-scheme` of the `<iframe>` containing it, and not its ancestor `<iframe>s`. However, Chroma and Firefox considers the middle iframe's `color-scheme` and resolves `prefers-color-scheme` to `light`. So effectively, they go up the `<iframe>` chain and stops at the first `<iframe>` that explicitly defines a `color-scheme` I also think this behavior is reasonable and should be added to the spec.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13796 using your GitHub account


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

Received on Monday, 13 April 2026 07:30:15 UTC