[csswg-drafts] CSS Color; light-dark() should be applicable on more properties. (#10577)

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

== CSS Color; light-dark() should be applicable on more properties. ==
Please forgive me if this one's a bit vague as I'm adding an issue here at Chris Lilley's request, and I'm not familiar with the process too much.

There are times when I need to swap the background-image as well as text colour, and it's 100% dependant on the same logic as light-dark() value. But, you can't do this:

```css
.thing {
  background-image: light-dark(
    url('/assets/light.svg'),
    url('/assets/dark.svg')
  );
}
```

I'd like to be able to do that instead of having to resort to media queries to do what in the end is the same thing, for the same reason, at the same time - but not working on a colour property. In my mind, `light-dark()` is a toggle to map key-value pairs based on a scheme - but does not need to be (and should not be) tied to outputting "colour" as a return value (or however this is currently implemented/specced).

In this specific case, I have a graphical decoration added to some link text, and need to change the decoration's colour to match the text colour. Because SVG images loaded in via CSS don't work the same as if they're embeded in HTML they will not inherit to text colour, and I have to specify an entirely different asset to load to match the text colour.

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark

https://mstdn.social/@mattwilcox/112792513614070547



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


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

Received on Monday, 15 July 2024 21:42:48 UTC