Change icon style and text color in mushroom template card

Configuration Frontend
21

Hi @LiQuid_cOOled ,

thank you for the update. I checked it out, an it is working so far, but there are two thinks, I do not understand:

      - type: custom:mushroom-template-card
        primary: '{{ ''Online'' if states(config.entity) == ''on'' else ''Offline'' }}'
        icon: '{{"mdi:wifi" if states(config.entity)=="on" else "mdi:wifi-off"}}'
        entity: binary_sensor.cupra_born_car_is_online
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''green'' if states(config.entity) == ''on'' else ''red'' }}'
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                 
                 --icon-symbol-size: 20px;
                   --icon-size: 40px;
                     {% set light_state = states(config.entity) %}
                    {% if light_state == 'on' %}
                    --shape-animation: ping 2s infinite; 
                   }
                   @keyframes ping {
                   0% {box-shadow: 0 0 0 0 green }

                    70% {box-shadow: 0 0 0 5px transparent;}
                    100% {box-shadow: 0 0 0 0 transparent;}
                         }
                      {% else %} 
                      {% endif %}
            mushroom-state-info$: |
              .container {
                --card-primary-font-size: 12px;
                      }
            .: |
              ha-card  {
              margin-left: -2px;
              border: none !important;
              {% if is_state(config.entity,'on') %} 
               --card-primary-color: white;
              {%else%}
               --card-primary-color:#7E7E7E;
              {% endif %}
               }

The line “set light_state…” is different to the other lines "… {% if is_state(config.entity,‘charging’) %} " and I do not really understand is?

I do also not understand the difference between “states(config.entity)” and “states(entity)”. I never saw config.entity before.

Can you please explain it to me?
Many thanks for your excellent work
Spartacus

22

This is just another way to write an IF ELSE statement. It works well if there are multiple states. For example:

icon_color: |
   {% set light_state = states('light.pc_lights') %}
   {% if light_state == 'on' %}  green 
   {% elif light_state == 'off' %}  yellow
   {% elif light_state == 'unknown' %}  red                        
   {% endif %}

As for config.entity, it’s just the method I use. I found that entity doesn’t always work for me. Someone may know the difference.