CSS trick to change color of icons?

After we got single category style thingy colors of my category icons are now following background color of category settings and that is… not so nice.

Screenshot could explain a bit better my/theirs pain:

(Almost) sorry for strange language but hopefully you get my point.

I just refuse to setup different background colors per category. Partially because it breaks look of category banners, but mostly because those all different colors aren’t informative in any meaning, but gives very restless feel.

I understatn totally that some just loves very colorful environment but up here in noth we love minimalistic and colorless approach that maximize our depression :rofl:

Basically I need desperately help to use just black icons and otherwise using what ever color I like on category banners. White background works but then all icons are white too and on white background that is not so functional either…

1 Like

The category banner theme component has the option to override the icon color in banners (so it always matches the banner text color)… so you could enable this

and set the icon color in the category icons theme component:

I could see how setting the color for each icon would be unpleasant for many categories though, so if you want it all one color, you could use CSS instead:

.badge-category__icon .d-icon {
  color: var(--primary-high);
}
3 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.