Re: [csswg-drafts] [css-images-4] Add `light-dark-image()`, or generalize `light-dark()` for images too? (#12513)

I have been going through the `light-dark()` specification draft and wondering why it is limited to `<color>` values only if the styling preferences in light/dark color schemes go beyond colors. This curiosity led me to this issue, especially the following:

> I've often run into cases where I needed it for dimensions.

The dark color scheme (light text on a dark background) gives a more contrasting content-to-background feel, so one might want to decrease the `font-weight` or increase `letter-spacing` in the dark scheme. When done so, it feels unnatural to use `light-dark()` value for the `color` property, but reach for a `@media (prefers-color-scheme: dark)` (or suggested `if()`) for other properties.

The `light-dark()` function seems to be closer to the `var()` (and `calc()`) than to a color function. It feels natural to pass to the function any two CSS values and expect it to work. This is well demonstrated in [@myfonj code snippets](https://github.com/w3c/csswg-drafts/issues/12513#issuecomment-3407562681).

---

> Being a `<color>` vs being something else can definitely affect parsing - for example, when parsing the `background` shorthand, if the final value is a `light-dark()`, knowing that it's a `<color>` means it'll get expanded into the `background-color` longhand; if it was an image it would instead need to be the final value in the `background-image` longhand. If it could be _either_, we wouldn't know how to parse it! We'd have to make an arbitrary decision, or look into its arguments and guess.

@tabatkins expressed a valid concern: knowing type in shorthand is important; but is it possible when `var()` can substitute any number of value components? I wonder how the following three snippets are different:

```css
.pane {
  background: light-dark(url('light-image') white, url('dark-image') black);
}
```

```css
.pane {
  --image: url('light-image');
  @media (prefers-color-scheme: dark) {
    --image: url('dark-image');
    /* --image: black; if so, background receives two colors */
  }
  background: var(--image) light-dark(white, black);
}
```

```css
.pane {
  --background: url('light-image') white;
  @media (prefers-color-scheme: dark) {
    --background: url('dark-image') black;
  }
  background: var(--background);
}
```

```css
.pane {
  --light: url('light-image') white;
  --dark: url('dark-image') black;
  background: light-dark(var(--light), var(--dark));

  /* what if one conditionally becomes valid?
  @media (prefers-color-scheme: dark) { --dark: black } */
}
```

---

Overall, the **option 1** from the [table](https://github.com/w3c/csswg-drafts/issues/12513#issuecomment-3429403253) seem to be the (most) CSS way to me: it preserves the feeling of the language and is (more) consistent with other constructs.

-- 
GitHub Notification of comment by viktor-yakubiv
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12513#issuecomment-3711614880 using your GitHub account


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

Received on Monday, 5 January 2026 18:27:58 UTC