Can you change icon to a new icon in mushroom-chip-cards?

[ppastur (Paul)]

Hello, I am building my room cards and have them largely planned out. I am stuck with figuring out how to change a mushroom chip icon from lightbulb-outline to lightbulb-on-outline. I have read a ton of articles both for mushroom cards and CSS but I’m missing something. Here is what I have so far;

You will see a lightbulb that changes colour and that’s about as far as I’ve got.

this is the code

...
      - type: conditional
        conditions:
          - entity: switch.test
            state: 'on'
        chip:
          type: template
          icon: mdi:lightbulb-outline
          card_mod:
            style: |
              @keyframes glow { 
              0%   {color: red;}
              100% {color: yellow;}
              }
              ha-card {
               animation: glow linear alternate infinite;
               animation-duration: 2s;
              }
...

I have tried

 - type: conditional
        conditions:
          - entity: switch.test
            state: 'on'
        chip:
          type: template
          icon: mdi:lightbulb-outline
          card_mod:
            style: |
              @keyframes glow { 
              0%   {icon: mdi:lightbulb-outline;}
              100% {icon: mdi:lightbulb-on-outline;}
              }
              ha-card {
               animation: glow linear alternate infinite;
               animation-duration: 2s;
              }

If this is even possible and I imagine it is as you can do something similar in CSS (only changing a PNG not MDI icon) then I suspect I have the syntax wrong but I think I’ve reached the edges of my knowledge thus far and cant seem to find more information to help me progress. I would appreciate anyone either helping with a code correction or pointing me in the right direction in terms of knowledge.

Thanks in advance

[ppastur (Paul)]

I’ve just found this link which does 95% of what I would like only its not a chip

type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
card_mod:
  style: |
    mushroom-shape-icon {
      {{ '--card-mod-icon: mdi:lightbulb;' if is_state(config.entity, 'on') else '--card-mod-icon: mdi:lightbulb-off;' }}
      --icon-color-disabled: rgb(var(--rgb-green));
      --shape-color-disabled: rgba(var(--rgb-green), 0.2);
    }

Ive tried various adaptations and the following works only once (when you edit the code and save)

      - type: conditional
        conditions:
          - entity: switch.wi_fi_power_strip_socket_5
            state_not: not-used
        chip:
          type: template
          icon: mdi:chat-question-outline
          card_mod:
            style: |
              ha-card {
                {{ '--card-mod-icon: mdi:lightbulb-on-outline;' 
                if is_state('switch.wi_fi_power_strip_socket_5', 'on') 
                else '--card-mod-icon: mdi:knife;' }}
                --icon-color-disabled: rgb(var(--rgb-green));
                --shape-color-disabled: rgba(var(--rgb-green), 0.2);
              }

[ppastur (Paul)]

Thanks to some help from the Discord channel who pointed me to some awesome documentation I had missed. Here is the working code if anyone is interested;

  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: switch.wi_fi_power_strip_socket_5
        layout: vertical
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:lightbulb-on
          {% else %}
            mdi:lightbulb-outline
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %}
            green
          {% else %}
            #6f6f6f
          {% endif %}
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                {% if is_state(config.entity, 'on') %}
                  --icon-animation: scan 5s ease-in-out infinite;
                {% endif %}
                transform-origin: 90% 80%
              }
              @keyframes scan {
                0%, 100% { transform: rotate(20deg); }
                50% { transform: rotate(-15deg); }
              }

[flaviodivx]

@ppastur

Would you mind sharing the code for the card? Just awesome, the card you designed.

[akcapak]

Would you like to share your card’s code? It looks really nice.

[abplus (Andrew Brown)]

Thank you very much for sharing this, I’d been trying to work out how to change the icon for ages! I’m in the middle of making new room cards using the custom button card, I was kind of happy with my design but then I saw how clean yours is! Would you mind, please, sharing the code, I’m intrigued by the shading behind the room name. Nice work Thanks.

[ppastur (Paul)]

Thanks for your feedback. Happy to share my code but please be aware that I am not a developer and some of this code might not be the best it can be. I am happy (and would be grateful) to take suggestions - that’s how I learn. I have taken a few screenshots to explain the structure of the YAML so that you can understand and make it your own.

To start with - this is what my top level page looks like

Day mode

Night mode

Here is a view of the Lounge Card

I use Mushroom Shadow theme

I have extracted my code and tried to simplify so you can see how it repeats creating 2 rooms in 1 row and repeating that code gives you another row with two rooms so essentially the code structure is as follows

Here is the code for 4 rooms 2X2. I hope this is helpful

square: false
type: grid
columns: 1
cards:
  - type: horizontal-stack #repeat this whole section to create a new row
    cards:
      - type: custom:stack-in-card # repeat this section to create a new room card
        cards:
          - type: custom:mushroom-template-card
            primary: Lounge
            secondary: "{{ states('sensor.main_home_temperature_2') | round(0) }}°C" #change to your room temperature sensor
            icon: mdi:sofa
            entity: switch.zigbeepowerstrip_l4 #change to your main room light entity
            tap_action:
              action: navigate
              navigation_path: lounge #this navigates to another view with all the room sensors, switches and devices
            hold_action:
              action: navigate
              navigation_path: /mushroom-dashboard/#tv_remote #this fires up a bubble card with my lounge room TV remote
            icon_color: "{{ '#264e70' if is_state(entity, 'on') else 'disabled' }}" #if your main room light is on the whole icon background changes color
            fill_container: true
            layout: horizontal
            multiline_secondary: false
            card_mod: #these are some styling injections via card-mod
              style: |
                :host([dark-mode]) {
                  background: rgba(var(--rgb-primary-background-color), 0);
                } 
                :host {
                  background: rgba(var(--rgb-primary-text-color), 0.0);
                  --mush-icon-size: 96px;
                }
                ha-card {
                  margin-left: -25px !important;
                  margin-top: -25px !important;
                  height: 102px;
                }
          - type: custom:mushroom-chips-card #this section deals with the chips along the bottom of the room card Add or remove as you see fit
            chips:
              - type: template # this is for a room lamp
                entity: switch.zigbeepowerstrip_l4
                tap_action:
                  action: more-info
                icon: |-
                  {% if is_state(entity, 'on') %}
                    mdi:lightbulb-on
                  {% else %}
                    mdi:lightbulb-off-outline
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'on') %}
                    #5ee0d0
                  {% else %}
                    #6f6f6f
                  {% endif %}
              - type: template # this tells me if the TV is on 
                entity: media_player.lg_webos_smart_tv
                icon: |-
                  {% if is_state(entity, 'on') %}
                    mdi:television-classic
                  {% else %}
                    mdi:television-classic-off
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'on') %}
                    #2a88dd
                  {% else %}
                    #6f6f6f
                  {% endif %}
              - type: template #this is a magnetic switch to tell me the back door is open or closed 
                entity: sensor.main_home_magnet_2
                icon: |-
                  {% if is_state(entity, 'off') %}
                    mdi:door-closed
                  {% else %}
                    mdi:door-open
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'off') %}
                    #6f6f6f
                  {% else %}
                    red
                  {% endif %}
              - type: template # is sonos playing ? if so control music, volume or turn off etc
                entity: media_player.sonos_move
                tap_action:
                  action: more-info
                icon: |-
                  {% if is_state(entity, 'paused') %}
                    mdi:speaker-pause
                  {% elif is_state(entity, 'playing') %}
                    mdi:speaker-play
                  {% else %}
                    mdi:speaker-stop
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'playing') %}
                    #5ee0d0
                  {% else %}
                    #6f6f6f
                  {% endif %}
                card_mod: #This animates the chip if the sonos is playing music
                  style: |
                    ha-card {
                      {{ 'animation: beat 1.3s ease-out infinite both;' if is_state('media_player.sonos_move', 'playing') }}
                      transform-origin: 50% 60%; 
                    }
                    @keyframes beat {
                      0% { transform: scale(1); }
                      10% { transform: scale(1.1); }
                      17% { transform: scale(1.05); }
                      33% { transform: scale(1.25); }
                      60% { transform: scale(1); }
                    }
              - type: conditional #if door or windows open then show in red otherwise disappear
                conditions:
                  - entity: binary_sensor.sonoff_door_sensor_contact
                    state: "on"
                chip:
                  type: template
                  icon_color: red
                  icon: mdi:window-open-variant
            alignment: end
            card_mod:
              style: |
                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-spacing: 0;
                  margin-top: -30px !important;
                }
        card_mod: #stack in card styling
          style: |
            ha-card {
              {% if is_state('switch.zigbeepowerstrip_l4', 'on') %}
                background: rgba(232,232,232,0.1);
              {% endif %}
            }            
      - type: custom:stack-in-card # repeat this section to create a new room card
        cards:
          - type: custom:mushroom-template-card
            primary: Lounge
            secondary: "{{ states('sensor.main_home_temperature_2') | round(0) }}°C" #change to your room temperature sensor
            icon: mdi:sofa
            entity: switch.zigbeepowerstrip_l4 #change to your main room light entity
            tap_action:
              action: navigate
              navigation_path: lounge #this navigates to another view with all the room sensors, switches and devices
            hold_action:
              action: navigate
              navigation_path: /mushroom-dashboard/#tv_remote #this fires up a bubble card with my lounge room TV remote
            icon_color: "{{ '#264e70' if is_state(entity, 'on') else 'disabled' }}" #if your main room light is on the whole icon background changes color
            fill_container: true
            layout: horizontal
            multiline_secondary: false
            card_mod: #these are some styling injections via card-mod
              style: |
                :host([dark-mode]) {
                  background: rgba(var(--rgb-primary-background-color), 0);
                } 
                :host {
                  background: rgba(var(--rgb-primary-text-color), 0.0);
                  --mush-icon-size: 96px;
                }
                ha-card {
                  margin-left: -25px !important;
                  margin-top: -25px !important;
                  height: 102px;
                }
          - type: custom:mushroom-chips-card #this section deals with the chips along the bottom of the room card Add or remove as you see fit
            chips:
              - type: template # this is for a room lamp
                entity: switch.zigbeepowerstrip_l4
                tap_action:
                  action: more-info
                icon: |-
                  {% if is_state(entity, 'on') %}
                    mdi:lightbulb-on
                  {% else %}
                    mdi:lightbulb-off-outline
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'on') %}
                    #5ee0d0
                  {% else %}
                    #6f6f6f
                  {% endif %}
              - type: template # this tells me if the TV is on 
                entity: media_player.lg_webos_smart_tv
                icon: |-
                  {% if is_state(entity, 'on') %}
                    mdi:television-classic
                  {% else %}
                    mdi:television-classic-off
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'on') %}
                    #2a88dd
                  {% else %}
                    #6f6f6f
                  {% endif %}
              - type: template #this is a magnetic switch to tell me the back door is open or closed 
                entity: sensor.main_home_magnet_2
                icon: |-
                  {% if is_state(entity, 'off') %}
                    mdi:door-closed
                  {% else %}
                    mdi:door-open
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'off') %}
                    #6f6f6f
                  {% else %}
                    red
                  {% endif %}
              - type: template # is sonos playing ? if so control music, volume or turn off etc
                entity: media_player.sonos_move
                tap_action:
                  action: more-info
                icon: |-
                  {% if is_state(entity, 'paused') %}
                    mdi:speaker-pause
                  {% elif is_state(entity, 'playing') %}
                    mdi:speaker-play
                  {% else %}
                    mdi:speaker-stop
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'playing') %}
                    #5ee0d0
                  {% else %}
                    #6f6f6f
                  {% endif %}
                card_mod: #This animates the chip if the sonos is playing music
                  style: |
                    ha-card {
                      {{ 'animation: beat 1.3s ease-out infinite both;' if is_state('media_player.sonos_move', 'playing') }}
                      transform-origin: 50% 60%; 
                    }
                    @keyframes beat {
                      0% { transform: scale(1); }
                      10% { transform: scale(1.1); }
                      17% { transform: scale(1.05); }
                      33% { transform: scale(1.25); }
                      60% { transform: scale(1); }
                    }
              - type: conditional #if door or windows open then show in red otherwise disappear
                conditions:
                  - entity: binary_sensor.sonoff_door_sensor_contact
                    state: "on"
                chip:
                  type: template
                  icon_color: red
                  icon: mdi:window-open-variant
            alignment: end
            card_mod:
              style: |
                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-spacing: 0;
                  margin-top: -30px !important;
                }
        card_mod: #stack in card styling
          style: |
            ha-card {
              {% if is_state('switch.zigbeepowerstrip_l4', 'on') %}
                background: rgba(232,232,232,0.1);
              {% endif %}
            }            

  - type: horizontal-stack #repeat this whole section to create a new row
    cards:
      - type: custom:stack-in-card # repeat this section to create a new room card
        cards:
          - type: custom:mushroom-template-card
            primary: Lounge
            secondary: "{{ states('sensor.main_home_temperature_2') | round(0) }}°C" #change to your room temperature sensor
            icon: mdi:sofa
            entity: switch.zigbeepowerstrip_l4 #change to your main room light entity
            tap_action:
              action: navigate
              navigation_path: lounge #this navigates to another view with all the room sensors, switches and devices
            hold_action:
              action: navigate
              navigation_path: /mushroom-dashboard/#tv_remote #this fires up a bubble card with my lounge room TV remote
            icon_color: "{{ '#264e70' if is_state(entity, 'on') else 'disabled' }}" #if your main room light is on the whole icon background changes color
            fill_container: true
            layout: horizontal
            multiline_secondary: false
            card_mod: #these are some styling injections via card-mod
              style: |
                :host([dark-mode]) {
                  background: rgba(var(--rgb-primary-background-color), 0);
                } 
                :host {
                  background: rgba(var(--rgb-primary-text-color), 0.0);
                  --mush-icon-size: 96px;
                }
                ha-card {
                  margin-left: -25px !important;
                  margin-top: -25px !important;
                  height: 102px;
                }
          - type: custom:mushroom-chips-card #this section deals with the chips along the bottom of the room card Add or remove as you see fit
            chips:
              - type: template # this is for a room lamp
                entity: switch.zigbeepowerstrip_l4
                tap_action:
                  action: more-info
                icon: |-
                  {% if is_state(entity, 'on') %}
                    mdi:lightbulb-on
                  {% else %}
                    mdi:lightbulb-off-outline
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'on') %}
                    #5ee0d0
                  {% else %}
                    #6f6f6f
                  {% endif %}
              - type: template # this tells me if the TV is on 
                entity: media_player.lg_webos_smart_tv
                icon: |-
                  {% if is_state(entity, 'on') %}
                    mdi:television-classic
                  {% else %}
                    mdi:television-classic-off
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'on') %}
                    #2a88dd
                  {% else %}
                    #6f6f6f
                  {% endif %}
              - type: template #this is a magnetic switch to tell me the back door is open or closed 
                entity: sensor.main_home_magnet_2
                icon: |-
                  {% if is_state(entity, 'off') %}
                    mdi:door-closed
                  {% else %}
                    mdi:door-open
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'off') %}
                    #6f6f6f
                  {% else %}
                    red
                  {% endif %}
              - type: template # is sonos playing ? if so control music, volume or turn off etc
                entity: media_player.sonos_move
                tap_action:
                  action: more-info
                icon: |-
                  {% if is_state(entity, 'paused') %}
                    mdi:speaker-pause
                  {% elif is_state(entity, 'playing') %}
                    mdi:speaker-play
                  {% else %}
                    mdi:speaker-stop
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'playing') %}
                    #5ee0d0
                  {% else %}
                    #6f6f6f
                  {% endif %}
                card_mod: #This animates the chip if the sonos is playing music
                  style: |
                    ha-card {
                      {{ 'animation: beat 1.3s ease-out infinite both;' if is_state('media_player.sonos_move', 'playing') }}
                      transform-origin: 50% 60%; 
                    }
                    @keyframes beat {
                      0% { transform: scale(1); }
                      10% { transform: scale(1.1); }
                      17% { transform: scale(1.05); }
                      33% { transform: scale(1.25); }
                      60% { transform: scale(1); }
                    }
              - type: conditional #if door or windows open then show in red otherwise disappear
                conditions:
                  - entity: binary_sensor.sonoff_door_sensor_contact
                    state: "on"
                chip:
                  type: template
                  icon_color: red
                  icon: mdi:window-open-variant
            alignment: end
            card_mod:
              style: |
                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-spacing: 0;
                  margin-top: -30px !important;
                }
        card_mod: #stack in card styling
          style: |
            ha-card {
              {% if is_state('switch.zigbeepowerstrip_l4', 'on') %}
                background: rgba(232,232,232,0.1);
              {% endif %}
            }            
      - type: custom:stack-in-card # repeat this section to create a new room card
        cards:
          - type: custom:mushroom-template-card
            primary: Lounge
            secondary: "{{ states('sensor.main_home_temperature_2') | round(0) }}°C" #change to your room temperature sensor
            icon: mdi:sofa
            entity: switch.zigbeepowerstrip_l4 #change to your main room light entity
            tap_action:
              action: navigate
              navigation_path: lounge #this navigates to another view with all the room sensors, switches and devices
            hold_action:
              action: navigate
              navigation_path: /mushroom-dashboard/#tv_remote #this fires up a bubble card with my lounge room TV remote
            icon_color: "{{ '#264e70' if is_state(entity, 'on') else 'disabled' }}" #if your main room light is on the whole icon background changes color
            fill_container: true
            layout: horizontal
            multiline_secondary: false
            card_mod: #these are some styling injections via card-mod
              style: |
                :host([dark-mode]) {
                  background: rgba(var(--rgb-primary-background-color), 0);
                } 
                :host {
                  background: rgba(var(--rgb-primary-text-color), 0.0);
                  --mush-icon-size: 96px;
                }
                ha-card {
                  margin-left: -25px !important;
                  margin-top: -25px !important;
                  height: 102px;
                }
          - type: custom:mushroom-chips-card #this section deals with the chips along the bottom of the room card Add or remove as you see fit
            chips:
              - type: template # this is for a room lamp
                entity: switch.zigbeepowerstrip_l4
                tap_action:
                  action: more-info
                icon: |-
                  {% if is_state(entity, 'on') %}
                    mdi:lightbulb-on
                  {% else %}
                    mdi:lightbulb-off-outline
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'on') %}
                    #5ee0d0
                  {% else %}
                    #6f6f6f
                  {% endif %}
              - type: template # this tells me if the TV is on 
                entity: media_player.lg_webos_smart_tv
                icon: |-
                  {% if is_state(entity, 'on') %}
                    mdi:television-classic
                  {% else %}
                    mdi:television-classic-off
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'on') %}
                    #2a88dd
                  {% else %}
                    #6f6f6f
                  {% endif %}
              - type: template #this is a magnetic switch to tell me the back door is open or closed 
                entity: sensor.main_home_magnet_2
                icon: |-
                  {% if is_state(entity, 'off') %}
                    mdi:door-closed
                  {% else %}
                    mdi:door-open
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'off') %}
                    #6f6f6f
                  {% else %}
                    red
                  {% endif %}
              - type: template # is sonos playing ? if so control music, volume or turn off etc
                entity: media_player.sonos_move
                tap_action:
                  action: more-info
                icon: |-
                  {% if is_state(entity, 'paused') %}
                    mdi:speaker-pause
                  {% elif is_state(entity, 'playing') %}
                    mdi:speaker-play
                  {% else %}
                    mdi:speaker-stop
                  {% endif %}
                icon_color: |-
                  {% if is_state(entity, 'playing') %}
                    #5ee0d0
                  {% else %}
                    #6f6f6f
                  {% endif %}
                card_mod: #This animates the chip if the sonos is playing music
                  style: |
                    ha-card {
                      {{ 'animation: beat 1.3s ease-out infinite both;' if is_state('media_player.sonos_move', 'playing') }}
                      transform-origin: 50% 60%; 
                    }
                    @keyframes beat {
                      0% { transform: scale(1); }
                      10% { transform: scale(1.1); }
                      17% { transform: scale(1.05); }
                      33% { transform: scale(1.25); }
                      60% { transform: scale(1); }
                    }
              - type: conditional #if door or windows open then show in red otherwise disappear
                conditions:
                  - entity: binary_sensor.sonoff_door_sensor_contact
                    state: "on"
                chip:
                  type: template
                  icon_color: red
                  icon: mdi:window-open-variant
            alignment: end
            card_mod:
              style: |
                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-spacing: 0;
                  margin-top: -30px !important;
                }
        card_mod: #stack in card styling
          style: |
            ha-card {
              {% if is_state('switch.zigbeepowerstrip_l4', 'on') %}
                background: rgba(232,232,232,0.1);
              {% endif %}
            }            

[chazmills]

question to Pastur paul entry for 2023 saying thanks; So i copy this and paste into my mushroom button card editor box. i get nothing, the only thing i changed was the entity. is there anything else i should do. is it YAML?
70 years old and not getting it!

[LiQuid_cOOled]

Select add card on your dashboard and select Manual all the way at the bottom (red X)

Add the code there…

I’d also suggest moving your future Mushroom questions to here or here

This thread has a Solved status.

[abplus (Andrew Brown)]

Hi Paul,

Thank you very much for taking the time and trouble to send me this, I really appreciate it. I’m looking forward to going through it tonight and seeing what I can understand, I’m still very much a learner. I have shied away from css and grid stuff in the past as it looked too complicated but now I realise the power of it so I’ve started to dabble.

Below is my room card design. Each card changes colour according to the room temperature and can have 2 or 3 chips to toggle stuff or just display warnings. I’ve attached the yaml for the first card just in case you are interested. I’m sure there must be easier ways to accomplish this, but as long as it works I don’t mind the cumbersome code!

Here’s my code for the first card:

type: custom:button-card
entity: sensor.kitchen_temperature
icon: mdi:shoe-print
aspect_ratio: 1/1.3
name: Boot Room
styles:
  card:
    - background-color: var(--yellow)
    - border-radius: 10%
    - padding: 10%
    - color: black
    - font-size: 14px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
  grid:
    - grid-template-areas: "\"i spare\" \"n n\" \"temp temp\" \"hum hum\" \"co2 co2\""
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  name:
    - font-weight: bold
    - font-size: 18px
    - color: Black
    - align-self: middle
    - justify-self: start
    - padding-bottom: 4px
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  icon:
    - color: |
        [[[
          if (entity.state < 15) return 'blue';
          if (entity.state >= 15 && entity.state < 25) return 'green';
          else return 'black';
        ]]]
    - width: 70%
    - margin-top: "-10%"
  custom_fields:
    spare:
      - align-self: start
      - justify-self: end
    temp:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - "--text-color-sensor": >-
          [[[ if
          (states["sensor.aerq_temperature_and_humidity_sensor_v2_0_air_temperature"].state
          > 25) return "red"; ]]]
    hum:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - "--text-color-sensor": >-
          [[[ if
          (states["sensor.aerq_temperature_and_humidity_sensor_v2_0_humidity"].state
          > 99) return "red"; ]]]
    co2:
      - align-self: middle
      - justify-self: start
      - "--text-color-sensor": >-
          [[[ if
          (states["sensor.aerq_temperature_and_humidity_sensor_v2_0_humidity"].state
          > 1000) return "red"; ]]]
custom_fields:
  spare:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: toggle
          entity: lock.boot_room_door_lock
          icon: mdi:lock
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(166, 207, 152, 1)' if is_state('lock.boot_room_door_lock', 'locked') else 'rgba(255, 0, 0)' }};
                padding: 5px!important;
                border-radius: 100px!important;
                animation: {% if is_state('lock.boot_room_door_lock', 'unlocked') %} blink 1.5s ease infinite
                {% else %} none
                {% endif %}
                
                }
                @keyframes blink {
                    50% {opacity: 0;}
  temp: |
    [[[
      return `<ha-icon
        icon="mdi:thermometer"
        style="width: 14px; height: 14px; color: black;">
        </ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.aerq_temperature_and_humidity_sensor_v2_0_air_temperature'].state}°C</span></span>`
    ]]]
  hum: |
    [[[
      return `<ha-icon
        icon="mdi:water-percent"
        style="width: 14px; height: 14px; color: black;">
        </ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.aerq_temperature_and_humidity_sensor_v2_0_humidity'].state}</span>%</span>`
    ]]] 
  co2: |
    [[[
     return `<ha-icon
         icon="mdi:molecule-co2"
         style="width: 14px; height: 14px; color: black;">
         </ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.aerq_temperature_and_humidity_sensor_v2_0_humidity'].state}%</span></span>`
     ]]]
state:
  - value: 35
    operator: ">"
    styles:
      card:
        - background-color: "#ff9d82"
  - value: 34
    operator: ">"
    styles:
      card:
        - background-color: "#ffa285"
  - value: 33
    operator: ">"
    styles:
      card:
        - background-color: "#ffa688"
  - value: 32
    operator: ">"
    styles:
      card:
        - background-color: "#ffaa8b"
  - value: 31
    operator: ">"
    styles:
      card:
        - background-color: "#ffae8e"
  - value: 30
    operator: ">"
    styles:
      card:
        - background-color: "#ffb390"
  - value: 29
    operator: ">"
    styles:
      card:
        - background-color: "#ffb793"
  - value: 28
    operator: ">"
    styles:
      card:
        - background-color: "#ffbb96"
  - value: 27
    operator: ">"
    styles:
      card:
        - background-color: "#ffbf99"
  - value: 26
    operator: ">"
    styles:
      card:
        - background-color: "#ffc49c"
  - value: 25
    operator: ">"
    styles:
      card:
        - background-color: "#ffc89f"
  - value: 24
    operator: ">"
    styles:
      card:
        - background-color: "#ffcca2"
  - value: 23
    operator: ">"
    styles:
      card:
        - background-color: "#ffd0a4"
  - value: 22
    operator: ">"
    styles:
      card:
        - background-color: "#ffd4a7"
  - value: 21
    operator: ">"
    styles:
      card:
        - background-color: "#ffd9aa"
  - value: 20
    operator: ">"
    styles:
      card:
        - background-color: "#ffddad"
  - value: 19
    operator: ">"
    styles:
      card:
        - background-color: "#ffe1b0"
  - value: 18
    operator: ">"
    styles:
      card:
        - background-color: "#ffe6b2"
  - value: 17
    operator: ">"
    styles:
      card:
        - background-color: "#c9e4ff"
  - value: 16
    operator: ">"
    styles:
      card:
        - background-color: "#c6e3ff"
  - value: 15
    operator: ">"
    styles:
      card:
        - background-color: "#c3e1ff"
  - value: 14
    operator: ">"
    styles:
      card:
        - background-color: "#c1e0ff"
  - value: 13
    operator: ">"
    styles:
      card:
        - background-color: "#bedeff"
  - value: 12
    operator: ">"
    styles:
      card:
        - background-color: "#ffac83"
  - value: 11
    operator: ">"
    styles:
      card:
        - background-color: "#b8dcff"
  - value: 10
    operator: ">"
    styles:
      card:
        - background-color: "#b5daff"
  - value: 9
    operator: ">"
    styles:
      card:
        - background-color: "#b2d9ff"
  - value: 8
    operator: ">"
    styles:
      card:
        - background-color: "#b0d7ff"
  - value: 7
    operator: ">"
    styles:
      card:
        - background-color: "#add6ff"
  - value: 6
    operator: ">"
    styles:
      card:
        - background-color: "#aad4ff"
  - value: 5
    operator: ">"
    styles:
      card:
        - background-color: "#a7d3ff"
  - value: 4
    operator: ">"
    styles:
      card:
        - background-color: "#a4d2ff"
  - value: 3
    operator: ">"
    styles:
      card:
        - background-color: "#a2d0ff"
  - value: 2
    operator: ">"
    styles:
      card:
        - background-color: "#9fcfff"
  - value: 1
    operator: ">"
    styles:
      card:
        - background-color: "#9ccdff"
  - value: -8
    operator: ">"
    styles:
      card:
        - background-color: "#99ccff"
  - value: "off"
    styles:
      state:
        - color: white
      name:
        - color: white
      icon:
        - color: white
      temp:
        - color: white
      card:
        - color: white
        - filter: opacity(50%)
        - background: black

Thanks again for your help! - Andrew.