Utilities for the light-dark() CSS function

[lukewarlow]

A new CSS function for choosing colors based on the used colour scheme has been made https://drafts.csswg.org/css-color-5/#light-dark.

See https://www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark/ for details.

Importantly this is NOT just a nicer way of doing @media(prefers-color-scheme: dark) because its based on used color scheme. So works hand in hand with the color-scheme CSS property See #11271 for PR to add that.

Firefox Coming in 120

Chrome coming in 123

WebKit Bug: https://webkit.org/b/262914

[wolfspyre]

this is interesting.... wonder how it's gonna get incorporated.

[olyckne]

I was hoping to just use the function on my colors, but it only replaces the first <alpha-value>.

For example

colors: {
  primary: "light-dark(rgb(0 0 255 / <alpha-value>), rgb(255 0 0 / <alpha-value>))",
}

will be converted into:

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: light-dark(rgb(0 0 255 / var(--tw-bg-opacity)), rgb(255 0 0 / <alpha-value>));
}

[olyckne]

Switching to replaceAll here and it would work. Not sure if that causes any other problems though.
https://github.com/tailwindlabs/tailwindcss/blob/3.4/src/util/pluginUtils.js#L127

We're just getting started implementing dark mode (I know, about time) and light-dark seems like a nice solution for us where we have a custom color palette and have some color we want to adjust in dark mode but still using the same names.
Even if converting all colors to css variables and overriding the one we need to adjust works as well.