-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
dark variant not respecting bg-opacity #2966
Comments
Yeah this is currently by design for better or for worse, and is the same with media queries too like:
That won't preserve the opacity either. I can see arguments for both behaviors but unfortunately we likely can't change this as it would be a breaking change. We should probably enable |
Couldn't the: .dark .dark\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
} Be like this, instead? .dark .dark\:bg-gray-900 {
background-color: rgba(17, 24, 39, var(--tw-bg-opacity, 1));
} I'm not seeing any downside, but I don't have a big picture to think off right now. |
Ps: this is a bit related to this one I opened couple of days ago: #2946 |
@marceloadsj I think the problem would be the cascade. If An alternative way to implement dark mode that doesn't have this issue is to use CSS variables for your color palette. I have a demo of this: https://github.com/DylanVann/tailwind-css-variable-colors-demo The downside I see of this is that the color palette is a bit verbose to define and is not purged. |
You are right @DylanVann. Since the variable would not be directly into the color class, it could be at any place above the tree, and affect the color. I didn't think about it! |
Looking into this further this is actually a little more annoying than it looks — it turns out This means that currently the behaviors are different depending on which dark mode you use, and that really sucks but I can't think of a way to avoid it. One approach would be to change the color plugins to work the way box shadow does where we add a universal selector to set the initial opacity, to avoid the cascade problems @DylanVann explained:
But this would be a breaking change, because this code would behave differently: <div class="bg-red-500 bg-opacity-50 md:bg-blue-500"> Currently that code would have a 100% opacity blue 500 background on I've merged the PR to enable dark variants for for color opacity utilities regardless since that will help in this situation but I don't think we can do anything about the consistency between media and class modes for at least a year or two I'm afraid :/ |
Describe the problem:
I have
darkMode: 'class'
in my config.When using these classes:
bg-gray-100 bg-opacity-50 dark:bg-gray-900
, thebg-opacity
is only applied in light mode, but in dark modebg-opacity
is ignored.I had to add the
dark
variant to:backgroundOpacity: ['dark']
, then also adddark:bg-opacity-50
to the element to get it to work in dark mode.Expected behaviour: dark mode should also respect the
bg-opacity
class (unless overriden for dark).Link to a minimal reproduction:
https://play.tailwindcss.com/GHoILXz6cp
The text was updated successfully, but these errors were encountered: