# Access category color in SCSS

**URL:** <https://meta.discourse.org/t/access-category-color-in-scss/203501>\
**Category:** Support\
**Tags:** pr-welcome\
**Created:** [September 14, 2021, 11:00am UTC](https://meta.discourse.org/t/access-category-color-in-scss/203501 "2021-09-14T11:00:03Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![tjot](https://avatars.discourse-cdn.com/v4/letter/t/6a8cbe/32.png) [@tjot](https://meta.discourse.org/u/tjot)\
**Post date:** [September 14, 2021, 11:00am UTC](https://meta.discourse.org/t/access-category-color-in-scss/203501/1 "2021-09-14T11:00:03Z")

</div>

Hi there,

this is my first try at creating a custom theme, so please be understanding.

I’m trying to customize the category list page, so it should look like this:

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/e/2edc1fabc07e22813dd2d73a649ffbbb6b70a4d1.png)

The idea is to remove the left border and to add “pills”.  
SCSS for adding pills is quite easy:

```plaintext
.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    &::after {
        content: "";
        width: 20px;
        height: 80%;
        position: absolute;
        background-color: red;
        border-radius: 20px;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
    }
}

```

but I’m unable to access the category color that is available here: [discourse/app/views/categories/index.html.erb at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/1472e47aae5bfdfb6fd9abfe89beb186c751f514/app/views/categories/index.html.erb#L13)

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/e/ae53b1adfd5323ea1966e9912c5c2078a3dc53cc.png)

is there an easy way to access that color from CSS?

---

_[View the full topic](https://meta.discourse.org/t/access-category-color-in-scss/203501)._