DarkReader is messing with the Tailwind styles on very important elements on my site #13106
Replies: 3 comments 1 reply
-
|
Did you figure this out, I am having the same thing? |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately, no. Hoping someone can come in and clear this up |
Beta Was this translation helpful? Give feedback.
-
|
Hi, when you use DarkReader on your site in your tag have this attributes -> My solution: Best Regards! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, I also did a workaround for this. I added a class to the main.css file using .title-gradient {
background: rgb(82, 129, 222);
background: -moz-linear-gradient(
90deg,
rgba(82, 129, 222, 1) 0%,
rgba(136, 191, 205, 1) 44%,
rgba(131, 180, 196, 1) 63%,
rgba(59, 92, 213, 1) 100%
);
background: -webkit-linear-gradient(
90deg,
rgba(82, 129, 222, 1) 0%,
rgba(136, 191, 205, 1) 44%,
rgba(131, 180, 196, 1) 63%,
rgba(59, 92, 213, 1) 100%
);
background: linear-gradient(
90deg,
rgba(82, 129, 222, 1) 0%,
rgba(136, 191, 205, 1) 44%,
rgba(131, 180, 196, 1) 63%,
rgba(59, 92, 213, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5281de",endColorstr="#3b5cd5",GradientType=1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}Then I use the class directly: <h1 className="title-gradient text-4xl font-bold text-balance sm:text-6xl">Gradient Lmaooo</h1>Then with dark reader on, It makes the gradient a bit darker like the rest of the site and is still visible. |
Beta Was this translation helpful? Give feedback.
-
Hello, first of all I would like to say thank you for creating DarkReader - I use it every day!
This has had me wracking my brain for a while.
I am using the following Tailwind styles on some
spantags for a pretty sweet text gradient effect (which is used pretty frequently on my site):The gradient normally looks like this:
The issue I have encountered is that the gradient is not rendered when DarkReader is enabled, meaning the text turns invisible (as it is set as transparent for the effect above):
I have managed to narrow it down to this class in the inspector:
If I uncheck that box, all of the text looks as it should.
Is there any solution you can think of for this? I would love it if there was some way to tell DarkReader to ignore that particular style and leave it be (as I've already programmed this site with dark mode in mind).
Thank you!
Beta Was this translation helpful? Give feedback.
All reactions