Allow theming of template card icon and shape colour

Is your feature request related to a problem? Please describe. I have Mushroom Entity and Template cards in the same view, and want the icon colours to match and also have different colours in light or dark mode in my theme.

However, the default template icon colour appears to be based on the --primary-text-color

--icon-color: var(--primary-text-color);
--shape-color: rgba(var(--rgb-primary-text-color), 0.05);

while the default icon colour for the entity card is based on --mush-rgb-state-entity

--rgb-state-entity: var(--mush-rgb-state-entity, var(--rgb-blue));
--icon-color: rgb(var(--rgb-state-entity));
--shape-color: rgba(var(--rgb-state-entity), 0.2);

Describe the solution you’d like I’d like a theme variable to define the icon colour for the template and preferably the shape.

Describe alternatives you’ve considered By making mush-rgb-state-entity the same as primary-text-color in my theme, I can get the main icon colours to match, but the shape colours are different due to the different opacity being used.

Additional context

[sotima]

While you are working at this, would it be possible to also make the size of the icon adjustable via a theme variable? Right now they seem to be fixed at 20 px which is a bit small for my eyes on my phone. 😉

[chrisb86]

Okay, now I see my problem.

This is what my theme looks at the moment. The text looks like I want it but the icon colors don’t match. I would like to have blue-grey and amber as icon colors for entities.

When I change the primary text-color and disabled-text-color for the theme, the icons match but the text has too little contrast.

It would be nice when we had the possibility to style every aspect in a theme.

• mush-default-icon-color
• mush-default-shape-color
• mush-disabled-icon-color
• mush-disabled-shape-color
• and so on…

These can default to the primary colors of a theme but can be overloaded when one wants to. So you can set the colors to your like, keep the mushroom style consistent but can define other values for e.g. icons and text.

I don’t know if this is possible with the HA theming engine and I don’t know python or typescript. But I did some web development in the last 25 years and think the seperation of style and content is important to keep a consistent look and keep things manageable.

I like the idea that the cards can be used without any themeing. But I would like to be able to theme them properly to build a lovely dashboard.

Thanks for this great work so far!