Entities card - entity state color

Configuration Frontend
1

Hi everyone. Getting into HA more and really loving it. But it has been challenging. I’d like to change the “state color” of an entity inside an entities card. Here’s a snip of what it currently looks like and the associated code. I’d like to change the color the the word “Idle” (or rather the High, Very High when active). The entire entity text color (for only that entity) would also be ok. Is this possible?

image

type: entities
state_color: true
entities:
  - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_7aa6e401_on_off
    name: Freezer Door
    secondary_info: last-updated
    icon: 'mdi:door'
  - entity: sensor.freezer_watts_range
    name: Freezer Power
    secondary_info: last-updated
    icon: 'hass:lightning-bolt'
1 Like
2

Welcome to HA! :slightly_smiling_face:
Should be possible with:

3

Thanks VDRainer. I did try this earlier today, but without any luck. Here’s my module loaded and source file in place. I tried with a basic change of color to red. Can you advise what I may be doing wrong?

card-mod-saved

card-mod-loaded
card-mod-loaded1465×254 6.92 KB

type: entities
entities:
  - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_7aa6e401_on_off
    name: Freezer Door
    secondary_info: last-updated
    icon: 'mdi:door'
  - entity: sensor.freezer_watts_range
    style: |
      :host {
        color: red;
      }
    name: Freezer Power
    secondary_info: last-updated
    icon: 'hass:lightning-bolt'
1 Like
4

Sorry, but i’m also a complete noob in these styling things.
Here’s an example that works for me with condition.

          - type: entities
            title: HACS
            show_header_toggle: false
            state_color: true
            entities:
              - entity: sensor.hacs
                name: Updates
                style: |
                  :host {
                    {% if states(config.entity)|int > 0 %}
                      --paper-item-icon-color: green;
                      color: yellow;
                    {% endif %};
                  }

Auswahl_441
Your basic color change should work.
Take a look in your browser console (F12 in Firefox, reload page) if card-mod is installed.
Auswahl_442
Clean browser cache.

3 Likes
5

I was not able to see that specific text, but I did see another error related to that card-mod.js. I re-downloaded it and moved the (correct) file into the config/www directory. I tried a couple times to re-add it in resources, but still the same. Tried adding it in the UI yaml, but got scolded and no change so I removed that. Re-added it in resources as /local/card-mod.js?v=2 and voila! So I guess it was a combination of me putting the wrong file into the correct directory, then I think HA didn’t update the file for whatever reason why it’s suggested to ‘add ?v=#’ to it.

Thanks so much for your help!!

Here’s my working code:

type: entities
show_header_toggle: false
entities:
  - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_7aa6e401_on_off
    name: Freezer Door
    secondary_info: last-updated
    icon: 'mdi:door'
    style: |
      :host {
        {% if states('binary_sensor.lumi_lumi_sensor_magnet_aq2_7aa6e401_on_off') == 'on' %}
          --paper-item-icon-color: red;
          color: red;
        {% endif %}
      }
  - entity: sensor.freezer_watts_range
    name: Freezer Power
    secondary_info: last-updated
    icon: 'hass:lightning-bolt'
    style: |
      :host {
        {% if states('sensor.freezer_watts_range') == 'Low' %}
          --paper-item-icon-color: #FF7738;
          color: #FF7738;
        {% elif states('sensor.freezer_watts_range') == 'High' %}
          --paper-item-icon-color: #FF8F41;
          color: #FF8F41;
        {% elif states('sensor.freezer_watts_range') == 'Very High' %}
          --paper-item-icon-color: red;
          color: red;
        {% endif %}
      }
  - entity: binary_sensor.lumi_lumi_sensor_wleak_aq1_ad7d5106_ias_zone
    name: Laundry Room
    secondary_info: last-updated
    icon: 'mdi:home-flood'
    style: |
      :host {
        {% if states('binary_sensor.lumi_lumi_sensor_wleak_aq1_ad7d5106_ias_zone') == 'on' %}
          --paper-item-icon-color: red;
          color: red;
        {% endif %}
      }
  - entity: binary_sensor.lumi_lumi_sensor_wleak_aq1_ias_zone
    name: Sump Area
    secondary_info: last-updated
    icon: 'mdi:home-flood'
    style: |
      :host {
        {% if states('binary_sensor.lumi_lumi_sensor_wleak_aq1_ias_zone') == 'on' %}
          --paper-item-icon-color: yelow;
          color: red;
        {% endif %}
      }

image

1 Like
6

I wanted to add that my file size was wrong because I wrongly downloaded:

https://github.com/thomasloven/lovelace-card-mod/blob/644cacfc195d697d9c1691d50ae5bb535dd01d25/src/card-mod.js

Instead of the correct file here:

https://github.com/thomasloven/lovelace-card-mod/blob/644cacfc195d697d9c1691d50ae5bb535dd01d25/card-mod.js

So instead of 50+ KB, it was only 5KB as pictured a few posts up.

image

7

Hi,
this code was working the last few months but now it stopped working

      type: custom:digital-clock
      dateFormat:
        weekday: long
        day: 2-digit
        month: short
      timeFormat:
        hour: 2-digit
        minute: 2-digit
      style: |
        .first-line {
          font-size: 52px !important;
          color: red;    
        }
        .second-line {
          color: {% if is_state('calendar.haus', 'on') %} green !important {% else %} white !important {% endif %};
          font-size: 25px !important;
        }

grafik

grafik

Does someone can see an error ? Thanks!

8

I’m with you - I was using this fine and now its stopped - anyone found a resolution?

9

Read carefully release notes for card-mod 3.4.0.