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.

[RyanClementsHax]

So I finally got some time to look at this. I apologize for keeping you all waiting. Initially, this was supported by using tailwind's function syntax for creating color values, but since this ticket was opened, it is being removed in v4. I looked into trying to support this without using that syntax but it seems like tailwind has a hard requirement to want to configure its own alpha values.

I could attempt to contribute upstream for v4, but I won't be able to prioritize the time for that.

The closest I got to supporting it is found in this branch https://github.com/RyanClementsHax/tailwindcss-themer/tree/fix/alpha-values. I got the main case working, but the problem comes when tailwind wants to override that value in a class like bg-primary/75. Tailwind doesn't let us declare that there is a defined alpha value unless it tries to give us one.

I believe with v4 coming out, part of this may be moot or needs to be rethought anyway. I'll think about it a little more, but I will admit defeat in the meantime and formally request for help on this.