The Tag Banners plugin has an issue with background color in dark mode, as it hardcodes primary-very-low instead of using a variable that adapts to the mode. jcayzac wants to change the rendered CSS to use background-color: var(--secondary).
cocococosti provided a solution, which involves adding custom CSS to the site’s theme editor. They suggested using attribute selectors to change the background color of all tag banners, or specifying a tag name to change the background for only that tag.
featheredtoast recommended fixing the issue in the theme itself, now that CSS variables are supported. jcayzac successfully created a local theme component and changed the CSS to resolve the issue.
Hello,
I’m using the tag banners plugin. It hardcodes primary-very-low as the background color for all banners, which is the same as text color, in dark mode. The stock material theme correctly uses var(--secondary), which switches to dark when in dark mode. Is there any easy way to fix the background of our tag banners?
Basically, I’d like the rendered CSS to use
.tag-title-header {
- background: #f8f8f8;
+ background-color: var(--secondary);
}
Thank you.
How to change the tag banner style is explained here: Tag Banners
You can change the background from the CSS editor on your site. Go to admin/customize/themes/1/common/scss/edit and add your CSS there:
For example, I used:
[class*="tag-title-header"][class*=" tag-banner-"] {
background-color: var(--secondary);
}
With attribute selectors, so the background is changed in all tags. But you could specify a tag name in the class so the background is changed for only that tag.
We should also get this fixed in the theme itself, now that we’re supporting css variables 
Thank you both, I created a local theme component and changed the css there!