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: [Screenshot 2023-06-07 at 13.03.12] Not sure why it’s injecting both the color and the var (?) Would appreciate any help or idea.

[image] Kris: 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.

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

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.

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.

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

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

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

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

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: [Screenshot 2023-06-07 at 12.59.26 PM] 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); } [image] Kris: 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.

this is awesome! thank you for doing this. :slight_smile:

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

Categories boxes border-color broken after update

Product Support

MarcP (MarcP) June 12, 2023, 4:32pm 18

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

Topic		Replies	Views
Colorful Categories Theme component official , colorful-categories	12	4504	October 19, 2023
Change Color of Border Boxes on Categories UX	2	794	July 11, 2020
Access category color in SCSS Product Support pr-welcome	4	888	January 7, 2022
Inconsistent use of --category-color variable in Default Theme? Product Support	2	611	October 11, 2022
Change category background color for boxes UX	4	1061	September 12, 2022

Categories boxes border-color broken after update

Related topics