Allow theming of template card icon and shape colour

[gadgetchnnel]

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

[chrisb86]

I want to support this. I have the same situation where the colors of entitie cards and light cards dont mathc with my template cards. I would like to have an documented way to define these colors in my theme. The explanations in the mushroom theme's readme are somewhat confusing for me.

I don't know if these styles are hard coded in the cards or can be changed by a theme. Please document it one time for everyone. I can't get it by my self.

[piitaya]

Can you provide more information with screenshots?
I just noticed this difference. Is this your problem? Or is there something else ?


Right : Entity card
Left : Template card

Here are the rules for the icon colors :

Default style

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

Disabled style

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

Colored style

--icon-color: rgb(var( [[ custom color ]] ));
 --shape-color: rgba(var( [[ custom color ]] , 0.2);

For template card :

• If color is defined => Colored style with the custom color
• else => Default style

For entity card :

• If entity is active ("on" state for example)
  • If color is defined => Colored style with the custom color
  • else => Colored style with default default for entity (it's blue)
• else ("off" state for example) => Disabled style

Maybe we can provide some improvements :

• if no color is provided for entity card => Default style instead of Colored blue style
• add a template option to add disable style to icon

Is that more clear to you?

[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!

[piitaya]

Thanks for the screenshots. I see the problem too.
This should be fixed by introducing theme variables 🙂
The variables you used are HA ones. We need mushroom variables to allow theming without side effects 🙂

[chrisb86]

Thanks. That's what I wanted to say. I am looking forward to it.

[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. ;-)

[piitaya]

Changing icon size is now possible with theme : https://github.com/piitaya/lovelace-mushroom/releases/tag/v1.8.1