Change category background color for boxes

Don · September 12, 2022, 3:45pm

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.

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

Desktop CSS looks like this:

github.com

VaperinaDEV/discourse-category-background-color/blob/main/desktop/desktop.scss

.categories-list {

  // Category Lists
  .category-list {
    tbody {
      border-top: none;
      tr {
        position: relative;
        border-bottom: none;
        .category {
          &:before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: var(--category-color);
            opacity: 0.2;
            z-index: -1;

This file has been truncated. show original

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

github.com

VaperinaDEV/discourse-category-background-color/blob/22c37769cbf26dced77cba213ac7a17c90f78448/javascripts/discourse/templates/mobile/components/parent-category-row.hbs#L3


      
          {{#unless this.isHidden}}
            <PluginOutlet @name="category-list-above-each-category" @args={{hash category=this.category}} />
            <div data-category-id={{this.category.id}} data-notification-level={{this.category.notificationLevelString}} style={{unless noCategoryStyle (concat (border-color category.color) (category-color-variable category.color))}} class="category-list-item category {{if this.isMuted "muted"}}">
              <table class="topic-list">
                <tbody>
                  <tr>
                    <th class="main-link">
                      <CategoryTitleLink @category={{this.category}} />
                    </th>
                  </tr>
                  {{#if this.category.description_excerpt}}
                    <tr class="category-description">
                      <td colspan="3">

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

github.com

VaperinaDEV/discourse-category-background-color/blob/main/mobile/mobile.scss

.category-list {
  .category-list-item.category {
    position: relative;
    &:before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: var(--category-color);
      opacity: 0.2;
      z-index: -1;
    }
  }
}

Desktop

Mobile

Topic		Replies	Views
Inconsistent use of --category-color variable in Default Theme? Support	2	509	October 11, 2022
Change Color of Border Boxes on Categories UX	2	717	July 11, 2020
Customizing subcategory boxes in Discourse Site Management how-to , customization	1	960	August 24, 2023
Category badge can get lost in the background UX	1	721	February 23, 2018
Category background images do not scale good for mobile UX	7	1314	September 17, 2019

Change category background color for boxes

Related topics