Hi @hawbringer ,
Thanks for the detailed explanation — that really helps. This is a known behavior when Darkify applies background and color transformations on certain SVG/icons and button states, especially with the Blocksy theme.
To address the issues you’re seeing (dropdown arrows, search icon appearing as solid blocks, and button hover effects), please try adding the following CSS:
button.ct-header-search.ct-toggle{
background:transparent;
}
.ct-toggle-dropdown-desktop-ghost{
background:transparent;
color: var(--darkify_dark_mode_link_color);
}
.tnp-submit:hover{
background-color: var(--darkify_dark_mode_btn_bg);
}
👉 You can add this here: Darkify → Advanced → Custom CSS → Dark Mode CSS
This should resolve:
- The “solid block” issue on dropdown arrows and search icons
- The unwanted overlay effect on button hover states
About your P.P.S. (alpha channels for images/GIFs)
You’re absolutely right — in some cases, alpha transparency (especially in GIFs/SVGs) isn’t fully preserved under Dark Mode transformations.
💡 In the Pro version of Darkify, there’s an Image Replacement feature that lets you define alternate images specifically for Dark Mode, which is the most reliable way to handle those cases cleanly.If the issue persists
If this doesn’t fully resolve things on your site, please go ahead and open a support ticket here: 👉 https://themeatelier.net/create-support-ticket/
We’ll take a closer look and help you fine-tune it for your specific setup.
Appreciate you flagging this — especially the alpha channel observation. That’s exactly the kind of edge case we’re continuously improving.
Best regards,
— Team Darkify
The CSS worked perfect for the menu, thank you!
As for the alpha channels, I’m afraid it would be too tedious to replace every image with an alpha background in the Pro version. Would there be any other solution? That’s the only complaint I have left, really.
Hi @hawbringer,
Thanks for the update — glad to hear the menu issue is fully resolved.
Regarding the image/alpha transparency behavior, you don’t actually need to replace images one by one.
Instead, please try adjusting the global Dark Mode media settings:
Go to Darkify → Media, then disable the following options:
- Low Brightness Images
- Grayscale Images
- Darken Background Images
Once these are turned off, Darkify will stop applying automatic visual filters to images, which should preserve transparency (alpha channels) and keep your GIFs/PNG/SVG visuals rendering as intended.
This should resolve the issue across the site without needing any manual image replacements.
Let me know if you still notice any specific cases after this — we can fine-tune it further if needed.
Best regards,
— Team Darkify
One last thing: I noticed that button blocks (using bBlocks Gutenberg plugin) lose their primary color and respective hover color after going into dark mode. The color is sometimes present, but mostly it is missing. Here is an example page: https://insitze.com/music/ (see social buttons in dark mode)
Hi @hawbringer,
Thanks again for your detailed feedback — really appreciate you sticking with us through this 🙌
Good news: the button color issue you mentioned has now been fixed in our latest release.
👉 Please update Darkify to version 1.4.26
After updating, the issue should be fully resolved on your site.
If you notice anything still off after the update, feel free to let us know — we’re happy to take another look.
Also, if you’re happy with the support and the fixes, we’d truly appreciate it if you could consider leaving a review on WordPress.org. It helps us continue improving the plugin and supporting users like you 🙏
https://wordpress.org/support/plugin/darkify/reviews/
Thanks again for your support!
Best regards,
Team Darkify
Hi,
Yes, the 1.4.26 fixed the buttons! There is still one thing remaining, which is with the “highlight” function on paragraph blocks: highlights don’t appear in dark mode. Here is a page to give you an example: https://insitze.com/livestreams/
If you can fix the highlights, I will go ahead and give the plugin a positive rating/review on WordPress.org. Thanks!
-
This reply was modified 5 months, 4 weeks ago by
hawbringer.
-
This reply was modified 5 months, 4 weeks ago by hawbringer.
-
This reply was modified 5 months, 4 weeks ago by hawbringer.
Hello @hawbringer
For fixing the heightlight issue, please add this code to the Dark Mode CSS Field
mark {
background: var(--theme-palette-color-3, #3A4F66)!important;
}
mark strong {
background: var(--theme-palette-color-3, #3A4F66)!important;
}
I hope the issue will be solve after adding these code.
Best Regards;
Foysal.
That worked! I left a review for the responsive & effective support.
I did find one other bug that has been bothering me: any Separator Block lines are being all the way hidden. You can see the effects from the same page I sent beforehand. Would there be another CSS fix so that the Separators show up in dark mode? Thanks.
-
This reply was modified 5 months, 4 weeks ago by hawbringer.
Hi there,
Really appreciate you taking the time to leave a review — that means a lot to us! 🙌
Good catch on the Separator Block issue. In dark mode, those lines can sometimes inherit styles that make them effectively invisible.
Could you please try adding the following CSS in Dark Mode CSS :
hr {
background-color: var(--wp--preset--color--palette-color-8);
}
This should restore visibility for the separator lines in dark mode.
Thanks again!
That worked, thanks!
One other thing I noticed is that the background filler colors for HTML blocks (especially if they’re gradients) are being erased when Dark Mode is on.
An example appears on this page: https://insitze.com/music/ under the “Live Shows” block. Is there another CSS patch you could send to fix this?
-
This reply was modified 5 months, 3 weeks ago by hawbringer.
Hi,
Thanks for pointing this out — really appreciate the detailed example.
This happens because Darkify overrides background properties in dark mode, which can remove custom backgrounds like gradients from HTML blocks.
To fix this, you can try adding the following CSS in the Dark Mode CSS field:
.wp-elements-e7b3ddeddb531ff0b0878ab55274c12a .bit-widget-container {
background: inherit !important;
background-image: inherit !important;
}
This should preserve the original background (including gradients) instead of overriding it in dark mode.
Thanks again!
