Can I reference variable css in Mushroom Template Card 'icon_color'?

Configuration Frontend
,
1

in my theme yaml, I have some calls to some variable colors.

  # General Colors Light
  wa-teal: var(--wa-primary)
  wa-green: '#25d366'

and in Mushroom Template card the color for the icon is set at icon_color: blue. Is there a way to reference the variable in the theme yaml in that icon_color attribute? I don’t want a hard coded color, but the primary color of my theme if I switch themes.

2 Likes
2

I’m interested as well, i used this template:

{% if is_state('climate.airco', 'heat') %}
  color: var(--state-climate-heat-color)
{% endif %}

But it did not work

3

Did you found any solution?

4

I’m interested too

5

Same issue here, would love to know if anyone ever finds out!

6

I’d love an answer to this as well

7

not sure if anyone is still looking for an answer. But it terms being able to use the var(--primary-color) etc CSS variables, I just found that you could do it like this:

  {% if states(entity) == "on" %}
  primary
  {% else %}
  grey
  {% endif %}
8

I doubt this will work since there is no such a color.

1 Like
9

One method…

type: custom:mushroom-template-card
primary: Example
secondary: "{{states(config.entity)}}"
icon: mdi:mushroom
entity: light.your_light
card_mod:
  style: |
    ha-state-icon {
      color: {{ 'var(--primary-color)' if is_state(config.entity, 'on') else 'red' }}
       }

You are seeing the default primary color because as @Ildar_Gabdullin pointed out, that color doesn’t exist. It is simply reverting to the standard primary color upon the fault.

1 Like
10

Oh no it works. I’m using it right now. I have Material Design Theme installed though so perhaps this aids in exposing the primary colour variable in this way. Try it yourself and tell me what you find.

Here’s my example. So far I have found it works for the primary variable and the accent variable. Again, before saying “I doubt this will work”, try it yourself and report back

image
image1018×884 43.5 KB

11

To further explain how and why this works, I did some reading and here’s what I found:

The Mushroom Cards use a predefined internal mapping between friendly color names (like "primary", "accent", "disabled", etc.) and actual CSS variables defined in a theme.

So, when you set icon_color: primary, the card internally resolves that to:

var(--primary-color)

Similarly:

  • accent → var(--accent-color)
  • disabled → var(--disabled-text-color)
  • grey or gray → typically mapped to var(--secondary-text-color) or var(--divider-color) depending on context.

This is handled by the Mushroom card’s frontend code and it looks for known keyword colors and resolves them to corresponding CSS variables.

2 Likes
12

Check with Code inspector instead. If card mod injects a css style with “color: primary” and this is not causing an error - then may be you are right.
First you said that translation “primary → var(…)” is performed by a custom theme, then you said that this translation is performed by mushrooms. I am not using that particular custom theme and mushrooms, so asking.

13

I’ve already explained how and why it works. There’s no need to question if it does :joy:

14

Ok, glad that you sorted things out for yourself). Can you point a place in mushroom docs where it is described?

15

I’m not the original poster. Just someone offering help and solutions. Couldn’t find any documentation, but if you check the source code for mushroom, here’s where the mapping explicitly occurs

16

I see, thanks for the info!
Does it have any conflicts with card-mod? Card-mod simply injects “color:primary” into css, it does not process a value of “primary”. Or your proposal was not based on card-mod at all?

17

That’s correct! My solution does not need card-mod at all. If you read the mushroom docs they actually explicitly state that they don’t support the use of card-mod because their design philosophy was to move away from that complexity and make it easier to implement simple templating.

My example above already shows how this works. But for completeness, here’s the full yaml of an example card using the variable primary and the variable accent. Other css variables like disabled also appear to work

image
image783×832 45.8 KB

image
image766×832 44.2 KB

yaml

type: custom:mushroom-template-card
icon: |-
  {% if states(entity) == "on" %}
  mdi:garage-open
  {% else %}
  mdi:garage
  {% endif %}
entity: input_boolean.hold_the_garage_door_open
primary: |-
  {% if states(entity) == "on" %}
  Garage Door is being held open
  {% else %}
  Tap to hold door open
  {% endif %}
fill_container: true
icon_color: |-
  {% if states(entity) == "on" %}
  accent
  {% else %}
  grey
  {% endif %}
secondary: ""
layout: vertical
18

Exactly.
Well, my doubts about using “primary” were about plain css in card-mod.