[csswg-drafts] [css-color] Allow light-dark() to be used for any property, not just color (#10152)

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

== [css-color] Allow light-dark() to be used for any property, not just color ==
I am excited to see that [`light-dark()`](https://drafts.csswg.org/css-color-5/#light-dark) is landing in more browsers, as I believe it is a great way to prevent repetition when creating a light/dark theme override toggle, which by default looks at user preferences.

The spec only allows it for colour-based properties at this point, which is fair given this is new. I would, however, like to see this expanded to be available for any property. In some cases, light and dark themes are not simply a colour change, but a different look and feel altogether. As such, things like typography (which, at a basic level, could also benefit weight adjustment on light vs dark background!) and other effects could leverage `light-dark()` to make theming easier.

A simple example would be the following: in a "light" context, a card component might have a drop shadow, like layers of paper, whereas in a dark context, you might want to have more of a neon glow effect.

Currently, you would need to do something like this: (you can simplify this, but I'm being verbose just to drive the point home)
```css
:root {
 color-scheme: light dark;
 --light-fx: 0 4px 3px #3218;
 --dark-fx 0 1px 8px #0ff;
}
/* Defaults */
@media (prefers-color-scheme: light) {
 html:not([data-theme]) {
  --fx: var(--light-fx);
 }
}
@media (prefers-color-scheme: dark) {
 html:not([data-theme]) {
  --fx: var(--dark-fx);
 }
}
/* Overrides */
html[data-theme=light] { --fx: var(--light-fx); }
html[data-theme=dark] { --fx: var(--dark-fx); }

.card {
 box-shadow: var(--fx);
}
```

This would be very easy to implement using `light-dark()`:

```css
:root {
 color-scheme: light dark;
 --light-fx: 0 4px 3px #3218;
 --dark-fx 0 1px 8px #0ff;
}
html[data-theme=light] { color-scheme: light; }
html[data-theme=dark] { color-scheme: dark; }

.card {
 box-shadow: light-dark(var(--light-fx), var(--dark-fx));
}
```

If this were possible, it would considerably reduce the amount of code I need to write for theming, as I still need to write some things as either inside a user-preference media query and repeat that in a data-attribute-based selector on the root.

If this is already planned, I did not find a reference in the spec or by having a look at recent issues on here.

Thank you!

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


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

Received on Thursday, 28 March 2024 01:43:13 UTC