# Change category background color for boxes

**URL:** <https://meta.discourse.org/t/change-category-background-color-for-boxes/238748>\
**Category:** UX\
**Created:** [September 12, 2022, 8:49am UTC](https://meta.discourse.org/t/change-category-background-color-for-boxes/238748 "2022-09-12T08:49:02Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [September 12, 2022, 3:45pm UTC](https://meta.discourse.org/t/change-category-background-color-for-boxes/238748/2 "2022-09-12T15:45:41Z")

</div>

Hello,

This is possible with css and little bit template modification. 🙂

On desktop, categories border has a color variable which you can use for background too.

This is the `--category-color` variable which is the border-color.  
 ![Screenshot 2022-09-12 at 17.25.56](https://global.discourse-cdn.com/meta/optimized/4X/c/e/f/ceface350d899dc2bf332b8ffeb4a8669b1e8a93_2_690x53.png)

But because this variable is a hex value you can’t make it transparency. However you can add this to a `::before` pseudo where you can set opacity too.

I made this as a component so you can install it or fork and modify what you want. 🙂

Component: [GitHub - VaperinaDEV/discourse-category-background-color · GitHub](https://github.com/VaperinaDEV/discourse-category-background-color)

* * *

Desktop CSS looks like this:

> <https://github.com/VaperinaDEV/discourse-category-background-color/blob/main/desktop/desktop.scss>

* * *

On mobile this color variable is missing from the template so you have to add this style here:

> <https://github.com/VaperinaDEV/discourse-category-background-color/blob/22c37769cbf26dced77cba213ac7a17c90f78448/javascripts/discourse/templates/mobile/components/parent-category-row.hbs#L3>

* * *

After this you can use the `--category-color` variable and do the similar like on desktop:

> <https://github.com/VaperinaDEV/discourse-category-background-color/blob/main/mobile/mobile.scss>

**Desktop**

 ![Screenshot 2022-09-12 at 17.42.23](https://global.discourse-cdn.com/meta/original/4X/e/b/b/ebbb931b3c1f10bda12c044a0df542862e4a4c47.png)  
 ![Screenshot 2022-09-12 at 17.44.09](https://global.discourse-cdn.com/meta/original/4X/8/a/6/8a64df46f4a22c90dbbf7d3d8e090bb08eddb782.png)

**Mobile**

 ![Screenshot 2022-09-12 at 17.43.11](https://global.discourse-cdn.com/meta/original/4X/b/0/9/b091c4eea8bbc1e685e336477055165d4605e2a8.png)

---

_[View the full topic](https://meta.discourse.org/t/change-category-background-color-for-boxes/238748)._