Mushroom-template-chips: How to change Text Color?

muellthos · April 11, 2023, 7:01pm

Hello,
I want to place mushroom template chips on a picture elements card. I know how to change the icon color and also how to change or remove the chip background (with card-mod). But I need also to change the color of the label/text of the chip. Here is what I have so far:

type: picture-elements
elements:
 - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.buero_strom_heute
    style:
      top: 72%
      left: 45%

    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(255,0,255,0.25);
        }
  image: /local/images/kleinesWZ.webp

I want the text color to be white or yellow. How to accomplish this? Maybe this is a stupif questiom, but I found no answer yet

pedolsky · April 12, 2023, 5:03am


--primary-text-color: white;

arielo61 · July 29, 2023, 8:11pm

Hi, can you explain the syntax??? Thanks!

muellthos · July 30, 2023, 12:18pm

?? Don’t understand yout question. It’ sufficiently explained in the solution. Put the line in the Style, e.g.:

 card_mod:
      style: |
        ha-card {
          --chip-background: rgba(255,0,255,0.25);
          --primary-text-color: white;
        }

GertVanderstukken · August 17, 2023, 10:14pm

Any idea on how to increase the fontsize?

Diegocampy · February 4, 2024, 5:28pm

It’s possible change the color of the text whit different color?
I Want grey color for 0W and different color for example. Like this:

{% set power = states(entity) | float%} {% if power < 5 %} grey {% elif power < 50 %} light-green {% elif power <100 %} lime {% elif power < 200 %} green {% elif temp < 500 %} yellow {% elif power < 800 %} amber {% elif power < 1000 %} orange {% elif power < 1500 %} deep-orange {% else %} red {% endif %}

LiQuid_cOOled · February 5, 2024, 3:59am

Yes, you’ll have to use the following entries. I provided an example card which is slightly different than your IF statement approach. Let me know if you nee help getting it to work on your card.

--card-primary-color: yellow;
--card-secondary-color: blue;

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
entity: sensor.blind_tilt_fca7_battery
icon: mdi:home
card_mod:
  style: |
    ha-card {
     {% set power = states(config.entity) | float%} {% if power < 5 %} --card-primary-color:grey;--card-secondary-color:blue;
     {% elif power < 50 %} --card-primary-color:blue;--card-secondary-color:lime;
     {% elif power <100 %} --card-primary-color:grey;--card-secondary-color:lime;
     {% elif power < 200 %} --card-primary-color:pink;--card-secondary-color:lime;
     {% elif temp < 500 %} --card-primary-color:yellow;--card-secondary-color:lime;
     {% elif power < 800 %} --card-primary-color:amber;--card-secondary-color:lime;
     {% elif power < 1000 %} --card-primary-color:orange;--card-secondary-color:lime;
     {% elif power < 1500 %} --card-primary-color:deep-orange;--card-secondary-color:lime;
     {% else %} --card-primary-color:red;--card-secondary-color:lime;
     {% endif %}

Diegocampy · February 5, 2024, 1:50pm

thanks for your help, I managed to make the example card like the one you indicated:

But I’m having trouble with what I need.

I think the problem is related to entities.
I am using template, with a switch entity to be able to act on On/off but then the information comes from a different entity, the power sensor, so the code written as you suggested does not work, because it does not find numbers, but only ON-OFF

I tried to replace your suggestion:

 {% set power = states(config.entity)

whit my entity:

     {% set power = states(config.sensor.presa_multimediale_cucina_power) | float%} {% if power < 5 %} --card-primary-color:grey;--card-secondary-color:blue;

But I think something is still not working because nothing happens in the colors of the two lines

Definitely due to my inexperience.

this s the complete code:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Presa Multimediale Cucina
        secondary: '{{states.sensor.presa_multimediale_cucina_power.state}} W'
        icon: >-
          {% if is_state(entity, 'off') %} mdi:power-plug-off-outline {%- else
          -%} mdi:power-plug-outline {% endif %}
        icon_color: '{% if is_state(entity, ''off'') %} disabled {% else %} green {% endif %}'
        fill_container: true
        layout: vertical
        tap_action:
          action: more-info
        entity: switch.presa_multimediale_cucina
        multiline_secondary: truee;
        card_mod:
        style: |
          ha-card {
           {% set power = states(sensor.presa_multimediale_cucina_power) | float%} {% if power < 5 %} --card-primary-color:grey;--card-secondary-color:blue;
           {% elif power < 50 %} --card-primary-color:blue;--card-secondary-color:lime;
           {% elif power <100 %} --card-primary-color:grey;--card-secondary-color:lime;
           {% elif power < 200 %} --card-primary-color:pink;--card-secondary-color:lime;
           {% elif temp < 500 %} --card-primary-color:yellow;--card-secondary-color:lime;
           {% elif power < 800 %} --card-primary-color:amber;--card-secondary-color:lime;
           {% elif power < 1000 %} --card-primary-color:orange;--card-secondary-color:lime;
           {% elif power < 1500 %} --card-primary-color:deep-orange;--card-secondary-color:lime;
           {% else %} --card-primary-color:red;--card-secondary-color:lime;
           {% endif %}

If there are other possibilities I would be happy to use it, I would just like a card with:

an icon that changes icon and color based on the on and off status
the indication of the power on a line below (therefore different entity) which changes color based on the power

LiQuid_cOOled · February 6, 2024, 8:50am

Let’s start here, then go to the mod.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
       
        primary: Presa Multimediale Cucina
        
        secondary: |
         {{ states('sensor.presa_multimediale_cucina_power') }} W
        icon: |
          {% if is_state(entity, 'off') %}
          mdi:power-plug-off-outline
          {% else %} 
          mdi:power-plug-outline
          {% endif %}
        icon_color: |
           {% if is_state('sensor.presa_multimediale_cucina_power', 'off') %} disabled {% else %} green {% endif %}
        fill_container: true
        layout: vertical
        tap_action:
          action: more-info
        entity: light.bed_lights
        multiline_secondary: true

Diegocampy · February 7, 2024, 9:59am

Thank you, by dint of trying and trying I succeeded!

type: custom:stack-in-card
cards:
      - type: custom:mushroom-template-card
        primary: Presa Multimediale Cucina
        secondary: '{{states.sensor.presa_multimediale_cucina_power.state}} W'
        icon: >-
          {% if is_state(entity, 'off') %} mdi:power-plug-off-outline {%- else
          -%} mdi:power-plug-outline {% endif %}
        icon_color: '{% if is_state(entity, ''off'') %} disabled {% else %} green {% endif %}'
        fill_container: true
        layout: vertical
        tap_action:
          action: more-info
        entity: switch.presa_multimediale_cucina
        multiline_secondary: truee;
        card_mod:
          style: >
            ha-card { {% set power =
            states('sensor.presa_multimediale_cucina_power') | float%} {% if
            power <= 0 %} --card-primary-color:grey;--card-secondary-color:grey;
            {% elif power < 100 %}
            --card-primary-color:white;--card-secondary-color:green; {% elif
            power < 200 %}
            --card-primary-color:white;--card-secondary-color:lime; {% elif
            power < 500 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 800 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 1000 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 1500 %}
            --card-primary-color:white;--card-secondary-color:orange; {% else %}
            --card-primary-color:white;--card-secondary-color:red; {% endif %}

Diegocampy · February 7, 2024, 10:49am

Since you were so kind, I have an even more difficult question for me, before banging my head I ask if it’s possible.

Now I have this well-made card that changes its icon and color:
green if on
red if off
(the icon in this case does not change, but I use it as a standard for other future cards where the icon can also change).
This card currently has the name written underneath and the consumption which may vary with consumption (primary and secondary info)
I would like to understand if it is possible to have the gray icon if the socket is on but there is no consumption detected by the socket so as now it indicates 0 watts.
This is my actual code:

type: custom:stack-in-card
mode: vertical
cards:
      - type: custom:mushroom-template-card
        primary: Presa Forno
        secondary: '{{states.sensor.presa_forno_power.state}} W'
        icon: >-
          {% if is_state(entity, 'off') %} mdi:toaster-oven {%- else -%}
          mdi:toaster-oven {% endif %}
        icon_color: '{% if is_state(entity, ''off'') %} red {% else %} green {% endif %}'
        fill_container: true
        layout: vertical
        tap_action:
          action: more-info
        entity: sensor.presa_forno_power
        multiline_secondary: truee;
        card_mod:
          style: >
            ha-card { {% set power =
            states('sensor.presa_forno_power') | float%} {% if
            power <= 0 %} --card-primary-color:grey;--card-secondary-color:grey;
            {% elif power < 100 %}  
            --card-primary-color:white;--card-secondary-color:green; {% elif
            power < 200 %}  
            --card-primary-color:white;--card-secondary-color:lime; {% elif
            power < 500 %}  
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 800 %}  
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 1000 %} 
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 1500 %} 
            --card-primary-color:white;--card-secondary-color:orange; {% else %}
            --card-primary-color:white;--card-secondary-color:red;
            {% endif %}

LiQuid_cOOled · February 7, 2024, 10:56am

Definitely, I’ll put together the code. We can match the logic for the text colors or do what ever colors you’d like. I’ll reach out tomorrow.

Diegocampy · February 7, 2024, 11:08am

You are certainly the most helpful person I have found in the entire community so far. I really thank you

LiQuid_cOOled · February 8, 2024, 4:54am

Try this adjustment and you have a typo here

multiline_secondary: truee;

icon_color: | 
     {% if states('sensor.presa_multimediale_salotto_power') | int (0) <= 0  and states('sensor.presa_forno_power') ==
     'on'  %}
       grey
     {% else %}
       red
     {% endif %}

Diegocampy · February 8, 2024, 8:42am

Thanks, I’m trying to think through why the example I gave you wasn’t the best. The oven icon should be red if the socket is off, gray if on but without consumption, and green in other cases.
However, the oven socket is not the best example, because it does not have a switch, it is just an energy meter, therefore always on. I’ll try to think about another case in point and if I succeed I will write it with great happiness

LiQuid_cOOled · February 8, 2024, 8:50am

We will get it! We need an elif statement added and what you described helps.

Give me a few…

LiQuid_cOOled · February 8, 2024, 8:58am

This should work

icon_color: >
       {% if states('switch.presa_multimediale_cucina')  == 'off'  %}
         red
       {% elif states('sensor.presa_multimediale_cucina_power') | int (0) <= 0 and
       states('switch.presa_multimediale_cucina') == 'on'  %}
         grey
       {% else %}
        green
       {% endif %}

Diegocampy · February 8, 2024, 8:58am

now I’ve arrived here, everything is ok, I just need to be able to add the green icon status when there are consumptions greater than 20 for example (the basic consumption being around 10W when only some things are active, but not the TV for example)

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Presa Multimediale Cucina
        secondary: '{{states.sensor.presa_multimediale_cucina_power.state}} W'
        icon: >-
          {% if is_state(entity, 'off') %} mdi:power-plug-off-outline {%- else
          -%} mdi:power-plug-outline {% endif %}
        icon_color: >
          {% if states('sensor.presa_multimediale_cucina_power') | int (0) <=
          20  and states('switch.presa_multimediale_cucina') == 'on'  %}
           grey
          {% else %}
           red
          {% endif %}
        fill_container: true
        layout: vertical
        tap_action:
          action: more-info
        entity: switch.presa_multimediale_cucina
        multiline_secondary: truee;
        card_mod:
          style: >
            ha-card { {% set power =
            states('sensor.presa_multimediale_cucina_power') | float%} {% if
            power <= 0 %} --card-primary-color:grey;--card-secondary-color:grey;
            {% elif power < 100 %}
            --card-primary-color:white;--card-secondary-color:green; {% elif
            power < 200 %}
            --card-primary-color:white;--card-secondary-color:lime; {% elif
            power < 500 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 800 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 1000 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 1500 %}
            --card-primary-color:white;--card-secondary-color:orange; {% else %}
            --card-primary-color:white;--card-secondary-color:red; {% endif %}

Diegocampy · February 8, 2024, 9:08am

You were faster than me, but there’s a strange problem.
By doing this, everything is fine when the switch is off:

All fine when the switch is on, but with consumption below 20W:

I don’t understand why the icon turns red instead if consumption is greater than 20W, instead it should turn green

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Presa Multimediale Cucina
        secondary: '{{states.sensor.presa_multimediale_cucina_power.state}} W'
        icon: >-
          {% if is_state(entity, 'off') %} mdi:power-plug-off-outline {%- else
          -%} mdi:power-plug-outline {% endif %}
        icon_color: >
         {% if states('switch.presa_multimediale_cucina')  == 'off'  %}
         red
         {% elif states('sensor.presa_multimediale_cucina_power') | int (0) <= 20 and
         states('switch.presa_multimediale_cucina') == 'on'  %}
         grey
         {% else %}
         green
       {% endif %}
        fill_container: true
        layout: vertical
        tap_action:
          action: more-info
        entity: switch.presa_multimediale_cucina
        multiline_secondary: truee;
        card_mod:
          style: >
            ha-card { {% set power =
            states('sensor.presa_multimediale_cucina_power') | float%} {% if
            power <= 0 %} --card-primary-color:grey;--card-secondary-color:grey;
            {% elif power < 100 %}
            --card-primary-color:white;--card-secondary-color:green; {% elif
            power < 200 %}
            --card-primary-color:white;--card-secondary-color:lime; {% elif
            power < 500 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 800 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 1000 %}
            --card-primary-color:white;--card-secondary-color:yellow; {% elif
            power < 1500 %}
            --card-primary-color:white;--card-secondary-color:orange; {% else %}
            --card-primary-color:white;--card-secondary-color:red; {% endif %}

LiQuid_cOOled · February 8, 2024, 9:16am

You are correct, need adjusted