Tag banners plugin and material theme in dark mode

[jcayzac (Julien Cayzac)]

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.

[cocococosti (Constanza Abarca)]

How to change the tag banner style is explained here: Discourse 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.

[featheredtoast (Jeff Wong)]

We should also get this fixed in the theme itself, now that we’re supporting css variables

[jcayzac (Julien Cayzac)]

Thank you both, I created a local theme component and changed the css there!