نام شما:

دسته

عنوان

محتوا

I'm trying to do something but I'm not sure if it's possible. Let's say I have a button inside a div with a background.

<div class="bg-trueGray-300 dark:bg-blueGray-700">
    <button class="btn-img-1 h-24 w-48">TEXT</button>
</div>
I want this image to "fade in the background" so to speak. To that end, I've done this:

.btn-img-1 {
    background-image:
        linear-gradient(to right, theme('colors.blueGray.700'), transparent),
        url('../../public/img/buttons/my-img.png');
}
It works... when the dark mode is toggled on. I'd like it to be dynamic. Instead of specifying theme('colors.blueGray.700'), I'd like something like inherit.

Is it possible?

My current "workaround" so to speak is just to specify the rule multiple times.

.btn-img-1 {
    ...
}

html.dark .btn-img-1 {
    ...
}
But my concern is that this is completely dependent on me using those background colors to begin with and the fact this will bloat up my stylesheet considerably if I add behavior for :hover and :focus states.

برچسب ها