Categories boxes border-color broken after update

[sok777 (sok)]

Hi- couldn’t find anyone else reporting this, but I checked with multiple themes and the categories box border-color inline CSS seems to be broken after updating to 3.1.0.beta4.

This is why:

Not sure why it’s injecting both the color and the var (?)

Would appreciate any help or idea.

[JammyDodger]

I think @MarcP mentioned something similar on the Colorful Categories - #7 by MarcP theme component topic. Are you using that component as well?

[sok777 (sok)]

Thanks! No, I’ve tried using Material theme, but also several others just in case. Unfortunately the behavior was the same. Happened right after the update. Everything else seems okay though so far.

[MarcP]

Good points. Now that I think about it borders need to have a border color in core. It’s not related to the component since even with the component disables the borders are all grey.

[sok777 (sok)]

Oops. I misread the question @JammyDodger but no I do not have this component installed.

[sok777 (sok)]

I wonder if there’s a clever fix for this? Only thing I can think of is remove some of the characters in JS?

[awesomerobot (Kris)]

This was a Discourse regression and doesn’t have anything to do with themes or plugins, we’ll have a fix in soon!

[sok777 (sok)]

Thanks! For future reference, I assume there’s no easy access to categories colors via CSS, is that right?
Perhaps via JS?

[awesomerobot (Kris)]

We’ve recently made some changes to make category colors easier to access in CSS by adding them as custom properties (css variables).

You can see these in your browser inspector:

So as long as you know the category’s ID, you can access its color in CSS. The easiest way to find the ID (number) is to look at the category URL, Support for example: https://meta.discourse.org/c/support/6 — to use the support category’s color you can do something like this:

.your-class-name {
  background: var(--category-6-color); 
}

@awesomerobot

This was a Discourse regression and doesn’t have anything to do with themes or plugins, we’ll have a fix in soon!

This fix has been merged (FIX: add category colors back to categories pages (#21977) · discourse/discourse@e43ac00 · GitHub), so after updating Discourse the colors should return.

[Lilly (Lillian)]

this is awesome! thank you for doing this.

[sok777 (sok)]

That’s awesome. Though I guess for this issue the only way to solve it would be to check the id of the category, then apply the correct CSS var using JS.
Unless you have another workaround in mind? Happy to try code this and share here

[awesomerobot (Kris)]

@awesomerobot

This was a Discourse regression and doesn’t have anything to do with themes or plugins, we’ll have a fix in soon!

This fix has been merged (FIX: add category colors back to categories pages (#21977) · discourse/discourse@e43ac00 · GitHub), so after updating Discourse the colors should return.

[sok777 (sok)]

That was quick!

In the meantime I just finished a workaround
Leaving the code below just in case.

var categoryBoxes = document.getElementsByClassName('category-box');

for (var i = 0; i < categoryBoxes.length; i++) {
  var categoryBox = categoryBoxes[i];
var dataCategoryId = categoryBox.getAttribute('data-category-id');
categoryBox.style.border = '2px solid var(--category-' + dataCategoryId + '-color)';
}

[sok777 (sok)]

Just to double check →

Is there a way to update from the front-end UI? I think my updates are on test-passed.
Or would I need to wait for 3.1.0.beta5 ?

[awesomerobot (Kris)]

Most sites are on tests-passed by default, you should be able to update at any time from /admin/upgrade

[sok777 (sok)]

I can’t believe I didn’t know this. LOL

Thanks as always!

[MarcP]

On my instance this is still an issue on the mobile version, desktop is fine