Mushroom Chip Template for changing Colour and Icon

i got it working :slight_smile: i been wanting to see an example of someone adding it a template in chips. So thank you

type: template
entity: binary_sensor
icon: |
  {% set state=states('binary_sensor.garage_door_status') %}
  {% if state=='off' %}
  mdi:garage-variant-lock
  {% elif state=='on' %}
  mdi:garage-open-variant
  {% else %}
  mdi:garage-alert-variant
  {% endif %}
icon_color: |-
  {% set state=states('binary_sensor.garage_door_status') %}
  {% if state=='off' %}
  green
  {% elif state=='on' %}
  red
  {% else %}
  orange
  {% endif %}
content: |-
  {% set state=states('binary_sensor.garage_door_status') %}
  {% if state=='off' %}
  Closed
  {% elif state=='on' %}
  Open
  {% else %}
  Neither
  {% endif %}
tap_action:
  action: toggle
hold_action:
  action: call-service
  service: switch.toggle
  service_data: {}
  target:
    entity_id: switch.garage_door_opener
7 Likes

Wrong forum section, you’re not sharing anything.

crap, i thought i wasnt sending a message lol need to delete this

Moved.

2 Likes

Thanks, used your code and amended for my case, working great.

edit: chips now support pictures (including animated gifs) and this is how I set mine up:

entity: switch.pump_2_water_switch
type: template
picture: |
  {% set state=states('switch.pump_2_water_switch') %}
  {% if state=='off' %}
  /local/off_button_red.png
  {% elif state=='on' %}
  /local/water_arrow_down.gif
  {% else %}
  mdi:garage-alert-variant
  {% endif %}
content: |-
  {% set state=states('switch.pump_2_water_switch') %}
  {% if state=='off' %}
  Stopped
  {% elif state=='on' %}
  Running
  {% else %}
  Stopped
  {% endif %}
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
5 Likes

Hi all…saw this and thought that it would be perfect but I cannot get my icon to change based on the value of my sensor. Any help greatly appreciated

This is one part of a mushroom chip set

  - type: entity
    entity: sensor.bens_room_indoor_aqi
    icon: mdi:blur
    use_entity_picture: false
    name: AQI
    icon_color: >
        {% set aqi=states('sensor.bens_room_indoor_aqi') | float %}
        {% if aqi<=50 %} 
        green
        {% elif aqi >=150 %}
        red
        {% else %}
        orange
        {% endif %}

How can I change the text color along with the icon_color?

start here - Mushroom Cards Card Mod Styling/Config Guide

1 Like

I should be helpful and post the final code that I got working in case it is useful for someone else…

  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.bens_room_average_temperature
        icon: mdi:thermometer
        icon_color: red
        use_entity_picture: false
        content_info: state
        tap_action:
          action: more-info
      - type: entity
        entity: sensor.temp_sensor_1_humidity
        icon_color: blue
        tap_action:
          action: more-info
      - type: entity
        entity: sensor.bens_room_pm2_5
        icon_color: brown
        tap_action:
          action: more-info
      - type: template
        entity: sensor.bens_room_indoor_aqi
        icon: mdi:blur
        icon_color: |-
          {% set aqi=states('sensor.bens_room_indoor_aqi') | float %}
          {% if aqi<=50 %}
          green
          {% elif aqi>=150 %}
          red
          {% else %}
          orange
          {% endif %}
        content: AQI {{ states(entity) }}
        double_tap_action:
          action: none
        tap_action:
          action: more-info
        hold_action:
          action: none
      - type: template
        icon: pap:nanoprotect_filter
        icon_color: |-
          {% set filter=states('sensor.bens_room_nanoprotect_filter') | float %}
          {% if filter<=20 %}
          red
          {% else %}
          black
          {% endif %}
        content: Filter {{ states(entity) }}%
        entity: sensor.bens_room_nanoprotect_filter
        tap_action:
          action: more-info
      - type: entity
        entity: fan.bens_room
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
        content_info: name
        name: Purifier
        icon_color: purple

Appreciate you sharing your code, but you are going to get log errors using float without defining the default.