The Alpha channel cannot be change between different themes
hihahihahoho opened this issue · comments
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
Hiya! Thanks for opening the issue. Let me look into it.
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.
- 😏 Denial: This should work just fine; I have a e2e test written that covers this, but let's just be sure
- 🤬 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
- 😅 Bargaining: Oh well, this is probably an easy fix
- 😰 Depression: Oh darn, this isn't straightforward
- 😌 Acceptance: Oh well, I'll look into it soon
This hasn't left my mind!
The fix for this will be tricky and I'm currently evaluating options.
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
I haven't forgotten about this. I plan on working on it soon.