Bug 262974 - System colors in gradients does not update with changes in `color-scheme` property
Summary: System colors in gradients does not update with changes in `color-scheme` pro...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-10-10 13:14 PDT by Niklas Ljunglöf
Modified: 2024-02-20 22:47 PST (History)
7 users (show)

See Also:

Attachments
Test for changing `color-scheme` value using `has()` on checked radio buttons (1.78 KB, text/html)
2023-10-10 13:14 PDT, Niklas Ljunglöf 		no flags Details
rendering in safari, firefox, chrome (289.16 KB, image/png)
2024-02-20 22:45 PST, Karl Dubost 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Niklas Ljunglöf 2023-10-10 13:14:59 PDT 
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.
Comment 1 Radar WebKit Bug Importer 2023-10-10 13:17:30 PDT 
<rdar://problem/116755091>
Comment 2 Karl Dubost 2024-02-20 22:45:17 PST 
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.
Comment 3 Karl Dubost 2024-02-20 22:47:38 PST 
The rule is:

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