Issue with font colour in category badges

Support
1

Hello all,

Hoping someone might have a solution for this problem that has only started happening since last night when we updated Discourse to 2026.4.0-latest (e4ab7a2cc9)

We use white font for all of our category badges and they display correctly when you’re at the top of a topic

image
image880×126 4.24 KB

However once you start scrolling down the topic, the font colour in the category automatically changes

image

I’ve looked through the theme settings and there’s nothing I can see that it causing this to happen.

2

Hello @RFL

First thing to do is always test in safe-mode.

Second tip is to mention what theme you are using. I think the issue will be specific to that theme, since the screenshot isn’t showing the default tag look.

Third tip is to check via the inspector what is happening and post a screenshot of it here.

3

Hi chapoi,

Thank you for the prompt and helpful reply.

I did the safe-mode test (one option at a time) and the disabling the following made no difference

  • unofficial client-side plugin customizations
  • all client-side plugin customizations

We’re using the Category Badge Styles component with ‘box’ as the selected style

So disabling themes and theme components did get rid of the problem, as it changed the category badge back to the default appearance

image

We’re using the light mode theme with the following colour palette

image
image924×948 23.1 KB

Our custom CSS is

/* table */

.cooked table thead, .d-editor-preview table thead {
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    background-color: #ddd;
}

.cooked table tr, .d-editor-preview table tr {
    border-bottom: 1px solid #ddd;
}

.cooked table td, .cooked table th, .d-editor-preview table td, .d-editor-preview table th {
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.fa-heart:before {
    content: "\f164";
}

.category-name {
    font-weight: bold;
    text-transform: uppercase;
    padding: 1px;
}

Using the inspector, this seems to be causing the problem, because when I untick the top line, the font colour then reverts to the correct colour (white).

Any idea on how I would fix this?

image
image485×245 10 KB

5

if your forum is just using the one theme and color palette, then you can add this in your custom css:

.badge-category__wrapper .badge-category__name {
  color: var(--secondary);
}
6

Thank you Lilly. That works and seems to be the quickest way to fix the problem.

7

We’ll investigate where the issue is originating, and update here