Support light-dark() in tailwind.config with opacity modifiers

[simchev]

As far as I'm aware, this isn't currently possible.

I'm trying to handle multiple dynamic themes in my app, as well as light/dark modes. My approach is to define my theme palettes in css variables and add them to tailwind.config, that way I can make them change based on both color-scheme and some custom attributes. The issue arises when I try to use the recent light-dark() function, to avoid defining them twice with media queries. Tailwind expects variables to be simply color channels for them to work with the opacity modifier.

I see two options right now, which is to either define all my themes "twice" (in size, for the media query), or I can just use light-dark() directly and lose the ability to use opacity modifiers. I'll probably go with the first option, but it's a very minor annoyance.

Thanks for looking at this 😀.

[wongjn]

You could consider using color-mix() like:

module.exports = {
  theme: {
    extend: {
      colors: {
        foo: 'color-mix(in oklch, light-dark(#fff, #000) calc(<alpha-value> * 100%), transparent)',

[simchev]

I didn't know I had access to <alpha-value> there, it does the trick perfectly:

// my-theme.css
:root {
  --my-color: light-dark(red, orange);
}

[theme="my-theme"] {
  --my-color: light-dark(blue, purple);
}

// tailwind.config
extend: {
  colors: {
    foo: 'color-mix(in srgb, var(--my-color) calc(<alpha-value> * 100%), transparent)'
  }
}

Thanks a lot!