Issue with font colour in category badges

[RFL]

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

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

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

[chapoi]

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.

[RFL]

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

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

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?

[Lilly (Lillian)]

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);
}

[RFL]

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

[chapoi]

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

[derek (Derek Rushforth)]

Looks like some styles from our foundation modernization are overriding the text color here.

I’ve got a PR here that should properly set the expected color on the Category badge theme component. Once it’s merged you can give it a go.

FIX: Category badge name color (#34)

[RFL]

Thanks Derek, much appreciated.

[derek (Derek Rushforth)]

It’s merged now! Let me know if you run into anymore issues.