Bug 262974

Summary: System colors in gradients does not update with changes in `color-scheme` property
Product: WebKit Reporter: Niklas Ljunglöf <slipped-gazette.0w>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: a_protyasha, bfulgham, karlcow, m_dubet, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Test for changing `color-scheme` value using `has()` on checked radio buttons
none
rendering in safari, firefox, chrome none

Niklas Ljunglöf
Reported 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.
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 attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-10-10 13:17:30 PDT
<rdar://problem/116755091>
Karl Dubost
Comment 2 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.
Karl Dubost
Comment 3 2024-02-20 22:47:38 PST
The rule is: .parent { &:has(input#dark:checked) { color-scheme: dark; } }
Note You need to log in before you can comment on or make changes to this bug.