Plugin for `light-dark()`

[TKDev7]

What would you want to propose?

A PostCSS plugin for light-dark() function added in css-color-5

Suggested solution

:root {
  —foo: light-dark(bar, baz);
}

becomes:

:root {
  —foo: bar;
}

@media (prefers-color-scheme: dark) {
  :root {
    —foo: baz;
  }
}

Additional context

No response

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[romainmenke]

Hi @MrHBS,

Thank you for requesting this feature.

If I recall correctly the light-dark() function is tied to the color-scheme property, not the prefers-color-scheme media query : https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

We might be able to do this with a space toggle.

[TKDev7]

@romainmenke i thought the second argument reflected the color used if color scheme was dark, no?

[romainmenke]

https://drafts.csswg.org/css-color-adjust-1/#used-color-scheme

To determine the used color scheme of an element:
If the user’s preferred color scheme, as indicated by the prefers-color-scheme media feature, is present among the listed color schemes, and is supported by the user agent, that’s the element’s used color scheme.

Otherwise, if the user has indicated an overriding preference for their chosen color scheme, and the only keyword is not present in color-scheme for the element, the user agent must override the color scheme with the user’s preferred color scheme. See § 2.3 Overriding the Color Scheme.

Otherwise, if the user agent supports at least one of the listed color schemes, the used color scheme is the first supported color scheme in the list.

Otherwise, the used color scheme is the browser default. (Same as normal.)

---

A codepen to illustrate : https://codepen.io/romainmenke/pen/RwEEPEe

• see how the background color changes for all div elements based only on @media (prefers-color-scheme)
• the border color however changes differently

I tested mainly in Chrome and I am hacking it a bit to illustrate the mechanics

The light-dark() function must work in the same way as the webkit specific -webkit-link color.

So it is dark only when the element indicates that it supports a dark color scheme and when the user choses a dark color scheme.

[TKDev7]

I see now. Thank you very much!

[romainmenke]

It's fine to leave this open :)

I wasn't trying to say that we can't or won't do this.
Only that the proposed implementation wasn't going to be correct.

[romainmenke]

See : parcel-bundler/lightningcss@808ce79

[romainmenke]

awaiting releases

[TKDev7]

Thank you very much!