Bug 262974 – System colors in gradients does not update with changes in `color-scheme` property

• Status: NEW
• Component: Layout and Rendering

[Niklas Ljunglöf]

Created attachment 468158 [details]
Test for changing `color-scheme` value using `has()` on checked radio buttons

System colors in gradients does not respond to changes in `color-scheme` property. I have only tested this using `:has()` on checked radio buttons (see attached test file), so I don’t know whether or not this bug affects other ways of updating the property value. (I suspect it does however, since the same issue occurs when changing color scheme system wide when `color-scheme` is set to `light dark`.)

This bug does not seem to occur in Firefox Nightly or Chrome.

[Radar WebKit Bug Importer]

<rdar://problem/116755091>

[Karl Dubost]

Created attachment 469998 [details]
rendering in safari, firefox, chrome

Rendering in 

Safari Technology Preview  188           19619.1.2.1.1
Firefox Nightly            125.0a1       12524.2.20
Google Chrome Canary       123.0.6312.2  6312.2

On Firefox and Chrome the two parts are black
On Safari only the top part is black.

[Karl Dubost]

The rule is:

 .parent {
    &:has(input#dark:checked) {
        color-scheme: dark;
    }
}