Bug 220367 – WKWebView in a fullscreen Quick Look preview fail the CSS media query prefers-color-scheme for root var

• Component: WebKit2
• Status: NEW

I have a WKWebView inside a Quick Look preview appex on Big Sur.
I customize the html with a CSS that define the colors with :root vars. A media query for dark color scheme is used to override the var defined for the light appearance:


<style type="text/css">
:root {
  --backgroundColor: #eeeeee;
  --textColor: #333333;
}
.myclass {
    color: blue;
}
@media (prefers-color-scheme: dark) {
    :root {
        /* BUG: in light mode and fullscreen preview these vars are used overriding the light theme. */
        --backgroundColor: #333333;
        --textColor: #eeeeee;
        --linkColor: #3366ff;
    }
    
    .myclass {
        /* In in light mode and fullscreen preview these class is not overrided by dark scheme. */
        color: yellow;
    }
}


body {
  color: var(--textColor);
  background-color: var(--backgroundColor);
}

</style>

The style works well on the Quick Look preview. But if macOS is in light mode and I maximize the QL Preview to fullscreen, the webview uses the vars defined for the dark appearance.

This bug occurs only for properties defined with vars. The other css classes is not affected.

I have created a demo code here:
https://github.com/sbarex/QLTest

[Radar WebKit Bug Importer]

<rdar://problem/73154418>