Inconsistent use of --category-color variable in Default Theme?

[carbonrich (Richard Hawkins)]

I may be wrong here, but I think there are some problems with the --category-color declarations in the Default theme…

On the desktop version of the Categories page --category-color gets declared for each category at td.category level.

Problem 1: If anyone wants to use the variable to give a background category colour or border to the category (table) row they can’t because it’s only declared at the cell level. So should that variable be moved up a level <tr>?

Problem 2. There is no such declaration for the mobile version of the page. So if you view community.radhr.org on desktop you can see the category icons with their --category-color backgrounds, but on mobile… nada. Should the variable be added in to allow for consistency, and if so where?

Should --category-colors all just be declared at the :root level to avoid any of these issues? As a newb, maybe I’m missing some drawbacks/difficulties in that approach.

[Don]

Hello Richard,

You may find this one useful.

Change category background color for boxes

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. [Screenshot 2022-09-12 at 17.25.56] 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 a…

[carbonrich (Richard Hawkins)]

Thanks Don, I had seen this but hadn’t fully understood you’d edited the markup as you have, thanks!

Do you think it should be something that gets changed in core? Can anyone make GitHub PRs [update: yes they can obvs]! If so, I might dust off some old knowledge and have a go, using some of ehat you’ve done already…