# Tag banners plugin and material theme in dark mode

**URL:** https://meta.discourse.org/t/tag-banners-plugin-and-material-theme-in-dark-mode/191767
**Category:** Support
**Created:** [May 27, 2021, 4:31am UTC](https://meta.discourse.org/t/tag-banners-plugin-and-material-theme-in-dark-mode/191767 "2021-05-27T04:31:35Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![jcayzac](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jcayzac/32/73266_2.png) [@jcayzac](https://meta.discourse.org/u/jcayzac)
#### Post date: [May 27, 2021, 4:31am UTC](https://meta.discourse.org/t/tag-banners-plugin-and-material-theme-in-dark-mode/191767/1 "2021-05-27T04:31:35Z")

</div>

Hello,

I’m using the tag banners plugin. It [hardcodes `primary-very-low` as the background color for all banners](https://github.com/discourse/discourse-tag-banners/blob/main/common/common.scss#L7), 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

```diff
 .tag-title-header {
- background: #f8f8f8;
+ background-color: var(--secondary);
 }

```

Thank you.

---

<div class="post-metadata">

### Author: ![cocococosti](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cocococosti/32/231474_2.png) [@cocococosti](https://meta.discourse.org/u/cocococosti)
#### Post date: [May 27, 2021, 10:54pm UTC](https://meta.discourse.org/t/tag-banners-plugin-and-material-theme-in-dark-mode/191767/2 "2021-05-27T22:54:58Z")

</div>

How to change the tag banner style is explained here: [Tag Banners](https://meta.discourse.org/t/discourse-tag-banners/124240)

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:

 ![Screenshot_2021-05-27 Admin - Constanza Is Testing Hosted Discourse(1)](https://global.discourse-cdn.com/meta/original/3X/6/f/6fbb20dc6a4f3d54a2d47a1ee87125cb134bf8d6.png)

For example, I used:

```plaintext
[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.

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [May 27, 2021, 11:13pm UTC](https://meta.discourse.org/t/tag-banners-plugin-and-material-theme-in-dark-mode/191767/3 "2021-05-27T23:13:14Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jcayzac](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jcayzac/32/73266_2.png) [@jcayzac](https://meta.discourse.org/u/jcayzac)
#### Post date: [May 28, 2021, 5:07am UTC](https://meta.discourse.org/t/tag-banners-plugin-and-material-theme-in-dark-mode/191767/4 "2021-05-28T05:07:08Z")

</div>

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

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [June 27, 2021, 5:07am UTC](https://meta.discourse.org/t/tag-banners-plugin-and-material-theme-in-dark-mode/191767/5 "2021-06-27T05:07:49Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.