PSA: Transparent Act/Chapter Reka UI dropdowns are caused by Dark Reader extension
L
Lemon chiffon Blackbird
The styles for the theme-based utility classes on the menu groups (i.e. <div role="group" class="group/menu bg-white dark:bg-gray-900 ...">) weren't getting applied for me.
After investigating, I realized that I hadn't disabled the Dark Reader for the novelcrafter.com domain. Easy fix, if others run into this.
spaceemotion
Ouch. Yeah we kind of recommend not using Dark Reader as we have a native Dark theme already. I wonder what they're doing that turns the dropdowns transparent?
L
Lemon chiffon Blackbird
spaceemotion, I’m not sure it’s worth the time to support Dark Reader, but your question got me curious.
Here’s what happens: when the app’s in light mode, Dark Reader adds these styles to bg-white:
.bg-white {
--darkreader-bg--tw-bg-opacity: 1;
background-color: var(--darkreader-background-ffffff40, rgba(24, 26, 27, 0.25));
}
Note the 0.25 alpha. Dark Reader messes with opacity to try to preserve the existing contrast. (Seems like there might be a better way to do it, lol.)
Anyway, I see that you already have this header:
<meta name="theme-color" content="#131516">
But you might be able to get Dark Reader to chill out by also adding:
<meta name="color-scheme" content="light dark">
That tag tells browsers that your app handles both themes itself, and since 2023, apparently, Dark Reader will reduce (or disable :/ ) its own recoloring if the themes are listed in the tag. If it reduces its recoloring, that might be ideal.
Alternatively, you could force opacity with something like:
opacity: 1 !important;
But that might mess with transitions or other needs to control opacity.
Anyway, fun question, but admittedly, probably not a high priority. Thanks for the app! I love Novelcrafter.