The Alpha channel cannot be change between different themes

[hihahihahoho]

Describe the bug

When i set a token like this, at Light Theme:
backgroundHover: 'rgba(0,0,0,0.9)',
and switch change it in Dark Theme:
backgroundHover: 'rgba(255,255,255,0.5)',
The color does change, but the alpha channel stuck at 0.9 between themes

Your minimal, reproducible example

none

Steps to reproduce

None

Expected behavior

The alpha change actually change base on theme

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

window

tailwindcss-themer version

4.0.0

Additional context

No response

[RyanClementsHax]

Hiya! Thanks for opening the issue. Let me look into it.

[RyanClementsHax]

This is a legitimate issue and here is a reproduction example https://codesandbox.io/p/devbox/117-repro-7yqchp

My wife says I've been working too much today, so I'll start looking into potential solutions later, but for your amusement, here was my "maintainers' 5 stages of grief" in response to seeing this issue.

1. 😏 Denial: This should work just fine; I have a e2e test written that covers this, but let's just be sure
2. 🤬 Anger: Crap. I was able to reproduce it https://codesandbox.io/p/devbox/117-repro-7yqchp and the snapshot output of that test is messed up
3. 😅 Bargaining: Oh well, this is probably an easy fix
4. 😰 Depression: Oh darn, this isn't straightforward
5. 😌 Acceptance: Oh well, I'll look into it soon

[RyanClementsHax]

This hasn't left my mind!

The fix for this will be tricky and I'm currently evaluating options.

[RyanClementsHax]

I have a proof of concept made using an approach that parameterizes the alpha value using css vars. This won't support the old opacity approach (e.g. classes like bg-opacity-50), but those are deprecated anyway.

For example a class like bg-primary that outputs the following css before the change...

:root {
  --colors-primary: ...
}

.darkTheme {
  --colors-primary: ...
}

.bg-primary {
    background-color: rgb(var(--colors-primary) / 0.5); /* 0.5 hardcoded because of this bug */
}

...would now output a class like...

:root {
  --colors-primary: ...
  --colors-primary-alpha: ...
}

.darkTheme {
  --colors-primary: ...
  --colors-primary-alpha: ...
}

.bg-primary {
    background-color: rgb(var(--colors-primary) / var(--colors-primary-alpha));
}

Reference discussion for background on alpha support: #95

[RyanClementsHax]

I haven't forgotten about this. I plan on working on it soon.

[Franjoo]

Hi @RyanClementsHax, first of all thank you for your great work! I have to ask if we can expect a solution to this problem here? If not, we will have to consider discontinuing the use of your near-perfect library. We would really appreciate a positive response :)

[Matozinho]

Hi @RyanClementsHax,

We've been encountering the same issue, not only with opacity but also with the theme function. To help illustrate the problem, I created this CodeSandbox. When we define a color with opacity at default extend theme (using hsla in my case), it correctly applies to the div, which does not happen in the tailwindcss-themer.

A similar issue occurs with the with-theme: theme("colors.destructive") function - it applies the definition from example_1 but fails to update when switching to defaultTheme.

If you have any insights on why this happens and whether the issue could be split into smaller tasks, I'd be happy to assist. Thanks for your awesome work!

Here's the sandbox for reference: https://codesandbox.io/p/github/Matozinho/tailwindcss-themer-example/main

[Matozinho]

Hey @Franjoo, I found a way to replace the plugin, by using this approach. This solution is close to how we used the plugin, so it was easy to replace and very functional. I hope it helps you too.