Using card-mod to change the background color

Configuration Frontend
1

I’m modifying an entity card with card-mod to change the background color based on an attribute value from a sensor.

This sensor shows the next garbage collection day, date and type of waste to be collected that day. The attribute from this sensor contains the type of waste that will be picked up next (organic - referred to as GFT in Dutch, paper or rest). I would like the card color to correspond to the color of the bin that needs to be put out that day.

I haven’t been able to get this to work at all. The code below, and all variations I have tried based on Google and HA forum posts, ignores the card-mod code.

Any help or push in the right direction would be highly appreciated.

image
image742×76 23.7 KB

type: entities
entities:
  - entity: sensor.first_upcoming
    name: Next collection
    icon: mdi:arrow-down-circle
    card_mod:
      style: |
        ha-card {
          background-color:
            {%- set sensor = state_attr(entity, 'Upcoming_waste_types') %}
            {%- if sensor == 'GFT' %}green
            {%- elif sensor == 'paper' %}blue
            {%- elif sensor == 'rest' %}grey
            {%- else %}grey
            {%- endif %}
          }
2

Go to main card mod thread - 1st post - link at the bottom - styles for Entities.
Suggest to ask any card-mod related questions in that thread instead of creating own ones.

3

I’ve got it to work using a different approach. I created a sensor (in configuration.yaml) with the value of the attribute that I need.

sensor:
  - platform: template
      sensors:
        pickup:
          entity_id: 
            - sensor.first_upcoming
          value_template: '{{ states.sensor.first_upcoming.attributes.Upcoming_waste_types }}'

The entity card is updated to look as follows:

type: entities
entities:
   - entity: sensor.first_upcoming
    name: Next collection
    icon: mdi:arrow-down-circle
    card_mod:
      style: |
        :host {
          {% if states['sensor.pickup'].state == 'GFT' %}
          --card-mod-icon-color: green;
          {% elif states['sensor.pickup'].state == 'paper' %}
           --card-mod-icon-color: blue;
          {% elif states['sensor.pickup'].state == 'rest' %} 
          --card-mod-icon-color: grey;
          {% endif %}
        }

This card-mod code changes the color of the icon based on the state of the sensor.

4

No, it was not about making a dedicated template sensor - it was about using “:host” instead of “ha-card”.

5

Besides using “:host” instead of “ha-card”, there were other syntax errors in the code.

type: entities
entities:
  - entity: sensor.first_upcoming
    name: Next collection
    icon: mdi:arrow-down-circle
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
            {%- set test = state_attr('sensor.first_upcoming', 'Upcoming_waste_types') %}
            {%- if test == 'GFT' %}green
            {%- elif test == 'paper' %}blue
            {%- elif test == 'rest' %}grey
            {%- endif %}
        }

Below doesn’t work. The entity needs to be specified.

{%- set sensor = state_attr(entity, 'Upcoming_waste_types') %}

This works

{%- set sensor = state_attr('sensor.first_upcoming', 'Upcoming_waste_types') %}

The only thing I haven’t been able to figure out is how to change the background color of the card.

replacing “–card-mod-icon-color” with “–ha-card-background” doesn’t work, nor do any other references to background that I tried.

6

Figured out how to change the background color. For this “ha-card” is needed again, but the indentation needs to be different. BTW, If you change “background” to “color” the text color is changed.

type: entities
entities:
  - entity: sensor.first_upcoming
    name: Next collection
    icon: mdi:arrow-down-circle
card_mod:
  style: |
    ha-card {
      background:
        {%- set sensor = state_attr('sensor.first_upcoming', 'Upcoming_waste_types') %}
        {%- if sensor == 'GFT' %}green;
        {%- elif sensor == 'paper' %}blue;
        {%- elif sensor == 'rest' %}grey;
        {%- else %}red;
        {%- endif %}
    }

Just thought I would update the topic with my findings in the hope that I can help somebody in the future who is looking to do something similar.

7

Posting your solutions is highly appreciated. Honestly.
Anyway, I would suggest you refer to the main card-mod thread - 1st post - link at the bottom, might be very useful for you.