Card-Mod: Icon Farbe anhand von Zustands-Wert ändern

Dashboard/Cards/Frontend
1

Hallo zusammen,

ich habe mir eine kleine Übersicht der Raumklimadaten gebastelt

klima

type: entities
title: Raumklima OG
entities:
  - entity: sensor.temperatur_ist_terrasse
    type: custom:multiple-entity-row
    name: Aussen
    icon: mdi:cloud
    show_state: false
    secondary_info: last-updated
    entities:
      - entity: sensor.temperatur_ist_terrasse
        name: Ist
        icon: false
      - entity: sensor.relative_luftfeuchte_terrasse
        name: rF
        icon: false
      - entity: sensor.absolute_luftfeuchte_terrasse
        name: aF
        icon: false
        format: precision1
  - type: section
  - entity: sensor.temperatur_ist_schlafzimmer
    type: custom:multiple-entity-row
    name: Schlafzimmer
    icon: mdi:bed
    show_state: false
    secondary_info: last-updated
    entities:
      - entity: sensor.temperatur_ist_schlafzimmer
        name: Ist
        icon: false
      - entity: sensor.relative_luftfeuchte_schlafzimmer
        name: rF
        icon: false
      - entity: sensor.absolute_luftfeuchte_schlafzimmer
        name: aF
        icon: false
        format: precision1
  - entity: sensor.temperatur_ist_ankleide
    type: custom:multiple-entity-row
    name: Ankleide
    icon: mdi:wardrobe
    show_state: false
    secondary_info: last-updated
    entities:
      - entity: sensor.temperatur_ist_ankleide
        name: Ist
        icon: false
      - entity: sensor.relative_luftfeuchte_ankleide
        name: rF
        icon: false
        format: precision0
      - entity: sensor.absolute_luftfeuchte_ankleide
        name: aF
        icon: false
        format: precision1
  - entity: sensor.temperatur_ist_elternbad
    type: custom:multiple-entity-row
    name: Elternbad
    icon: mdi:shower-head
    show_state: false
    secondary_info: last-updated
    entities:
      - entity: sensor.temperatur_ist_elternbad
        name: Ist
        icon: false
      - entity: sensor.relative_luftfeuchte_elternbad
        name: rF
        icon: false
        format: precision0
      - entity: sensor.absolute_luftfeuchte_elternbad
        name: aF
        icon: false
        format: precision1
  - entity: sensor.temperatur_ist_kinderbad
    type: custom:multiple-entity-row
    name: Kinderbad
    icon: mdi:shower-head
    show_state: false
    secondary_info: last-updated
    entities:
      - entity: sensor.temperatur_ist_kinderbad
        name: Ist
        icon: false
      - entity: sensor.relative_luftfeuchte_kinderbad
        name: rF
        icon: false
      - entity: sensor.absolute_luftfeuchte_kinderbad
        name: aF
        icon: false
        format: precision1

Ich würde nun gerne die Icon Farbe ändern, wenn der Wert der Entität sensor.absolute_luftfeuchte_unterschied_ankleide beispielsweise größer als 2 ist. Das ganze dann dediziert für jeden Raum. Sprich wenn der Unterschied der absoluten Luftfeuchte Innen und Außen in einem Raum differenziert soll das Icon z.B. rot oder orange werden.

Hat jemand von Euch ein Card-Mod Code Snippet verfügbar was so etwas realisiert? Oder sollte ich das ganz anders realisieren?

Danke vorab

2

Hast du es mal mit state_color: true versucht? Ach Sorry, hatte dich falsch verstanden. Mein Vorschlag wird dabei nicht helfen.

Ich habe mir dafür eine Gauge-Card angelegt

cards:
  - type: gauge
    entity: sensor.absolute_luftfeuchtigkeit_difference
    name: Differenz
    max: 13
    severity:
      green: -10
      yellow: 4
      red: 5.5
    needle: true
    min: -3
1 „Gefällt mir“
3

Danke für den Hinweis. Aber ja - ich würde gerne die vorhandene Karte nutzen und nur das Icon unter genannten Bedingungen färben. Ich vermute mal das ganze wird mit der card-mod schon funktionieren … allerdings übersteigt das meine Fähigkeiten :wink:

4

ich mach das zb. für den status on oder off vielleicht hilft dir das

{% if is_state('input_boolean.test', 'on') %}
  green
{% else %}
  red
{% endif %}

oder dies hab ich für Benzin

{% set benzinpreis = states('sensor.aral_zur_oschutz_1_super') | float %}
{% if benzinpreis is not none %}
  {% if benzinpreis <= 1.85 %}
    #00ff00
  {% elif benzinpreis <= 1.90 %}
    #FFA500
  {% else %}
    #ff0000
  {% endif %}
{% else %}
  #000000
{% endif %}

ok musste mir nur schnell ein Sensor bauen für die Heizung aber so geht es

  {% set warmwasser = states('sensor.warm_wasser') | float %}
  {% if warmwasser <= 40 %}
    #00ff00
  {% elif warmwasser <= 60 %}
    #FFA500
  {% else %}
    #ff0000
  {% endif %}
1 „Gefällt mir“
5

Moin
ich habe auch so eine Karte mit mehreren Daten nebeneinander. Z.B. Das Icon wechselt die Farbe wenn

    card_mod:
      style: |
        :host {
          {% if ( states.sensor.tasmota_1_power.state | float > 0 ) %}
          --card-mod-icon-color: red;
          {% else %}
          --card-mod-icon-color: green;
          {% endif %}
          }

Schalttet von Grün (Aus) auf Rot wenn der Sensor Strom zieht.
Mußt du für deinen Fall anpassen

1 „Gefällt mir“
6

Danke Euch! Genau das ist was ich suche :+1: Allerdings vermute ich hier noch einen Synatx-Fehler? Oder andere Ideen warum die Card das vollkommen ignoriert? :woozy_face:

Card
Card1014×633 58.8 KB

7

Versuche es so

type: entities
title: Raumklima OG
card_mod:
  style: |
    :host {
      --card-mod-icon-color: red;
      }  
entities:
...
...

Wenn das funktioniert, kannst du die if else testen.

1 „Gefällt mir“
8

Ich habe es … es lang an der Syntax - ich hatte das *.state nicht drin gehabt :woozy_face:

{% if ( states.sensor.tasmota_1_power.state | float > 0 ) %}

9

Hallo,
ich möchte mich hier mal dem Thread anschließen und meine Frage loswerden.
Änderung der Farbe vom Icon mittels “card_mod” habe ich bei “multiple-entity-row” hinbekommen.
Das Icon wird rot, wenn geöffnet … und grün, wenn geschlossen.

ohne Tabbed

type: entities
title: Fenster/Türkontakte
entities:
  - entity: binary_sensor.kuche_contact
    type: custom:multiple-entity-row
    name: Fenster Küche
    card_mod: null
    style: |
      :host {
      {% if is_state('binary_sensor.kuche_contact', 'on') %}
      --card-mod-icon-color: red;
      {% else %}
      --card-mod-icon-color: green;
      {% endif %}
      }  
    show_state: false
    secondary_info: last-updated
    entities:
      - entity: sensor.kuche_battery
        name: Batterie
        icon: false
        type: attribute
      - attribute: linkquality
        name: LQI
        icon: false
  - type: section
  - entity: binary_sensor.esszimmer_contact
    type: custom:multiple-entity-row
    name: Fenster Esszimmer
    card_mod: null
    style: |
      :host {
      {% if is_state('binary_sensor.esszimmer_contact', 'on') %}
      --card-mod-icon-color: red;
      {% else %}
      --card-mod-icon-color: green;
      {% endif %}
      }  
    show_state: false
    secondary_info: last-updated
    entities:
      - entity: sensor.esszimmer_battery
        name: Batterie
        icon: false
        type: attribute
      - attribute: linkquality
        name: LQI
        icon: false

Jetzt möchte ich das ganze noch in einer “tabbed-card” einbinden … siehe Bild
Aber das Icon wird nicht rot/grün animiert.
Funktioniert das so gar nicht, wie ich möchte ??

tabbed-card

type: custom:tabbed-card
options: {}
tabs:
  - attributes:
      label: Untergeschoss
    card:
      type: vertical-stack
      cards:
        - type: vertical-stack
          cards:
            - type: custom:multiple-entity-row
              entity: binary_sensor.kuche_contact
              name: Fenster Küche
              card_mod:
                style: |
                  :host {
                  {% if is_state('binary_sensor.esszimmer_contact', 'on') %}
                  --card-mod-icon-color: red;
                  {% else %}
                  --card-mod-icon-color: green;
                  {% endif %}
                  }
              show_state: false
              secondary_info: last-updated
              entities:
                - entity: sensor.kuche_battery
                  name: Batterie
                  icon: false
                  type: attribute
                - attribute: linkquality
                  name: LQI
                  icon: false
            - type: custom:multiple-entity-row
              entity: binary_sensor.esszimmer_contact
              name: Fenster Esszimmer
              card_mod: null
              style: |
                :host {
                {% if is_state('binary_sensor.esszimmer_contact', 'on') %}
                --card-mod-icon-color: red;
                {% else %}
                --card-mod-icon-color: green;
                {% endif %}
                }
              show_state: false
              secondary_info: last-updated
              entities:
                - entity: sensor.esszimmer_battery
                  name: Batterie
                  icon: false
                  type: attribute
                - attribute: linkquality
                  name: LQI
                  icon: false
11

Guten Morgen,

ich benötige mal wieder etwas Hilfe beim “einfärben” basierend auf Values :melting_face:

Wenn die Klima aktiv ist und über 14W verbraucht soll das Icon grün sein. Wenn Sie im Standby ist und weniger als 13W verbraucht orange. Bei weniger als 12W ist sie “aus” (das macht nicht ganz Sinn - ich weiß :upside_down_face: ).

Kann mir jemand helfen und sagen was an der Syntax wieder falsch ist?

Color
Color1014×188 15.8 KB

      - type: custom:mushroom-entity-card
        entity: sensor.klima_sz_bz_ist_stromverbrauch
        name: Klima SZ BZ
        icon: mdi:air-conditioner
        card_mod:
          style: |
            ha-card {
              {% if ( states.sensor.klima_sz_bz_ist_stromverbrauch.state | float > 14 ) %}
                --card-mod-icon-color: green;
              {% elif ( states.klima_sz_bz_ist_stromverbrauch.state | float < 13 ) %}
                --card-mod-icon-color: orange;
              {% else ( states.klima_sz_bz_ist_stromverbrauch.state | float < 12 ) %}
                --card-mod-icon-color: blue;
              {% endif %}
            }
12

hast du es mal mit solch einem Aufbau versucht?

( states('sensor.klima_sz_bz_ist_stromverbrauch') | float(0) > 14 )
1 „Gefällt mir“
13

@maxe: Das sieht (im wahrsten Sinne des Wortes) schon mal besser aus. Dann nochmal ein reales Beispiel → Trockner. Dieser verbraucht aktuell 0,0W und sollte eigentlich ein blaues Icon haben … allerdings ist es Orange - ich vermute aufgrund von dem ersten “elif”. Ist der Aufbau mit mehreren elif anders?

      - type: custom:mushroom-entity-card
        entity: sensor.trockner_ist_stromverbrauch
        name: Trockner
        icon: mdi:tumble-dryer
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.trockner_ist_stromverbrauch') | float(0) > 4 ) %}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.trockner_ist_stromverbrauch') | float(0) < 3 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.trockner_ist_stromverbrauch') | float(0) < 1 )%}
                --card-mod-icon-color: blue;
              {% endif %}
            }

Color
Color1022×239 21.8 KB

14

deine Abfrage hört beim 1. Elif schon auf, da es ja < 3 ist :wink:

Dreh mal um, ist dann logischer:

              {% if ( states('sensor.trockner_ist_stromverbrauch') | float(0) < 1 )%}
                --card-mod-icon-color: blue;
              {% elif ( states('sensor.trockner_ist_stromverbrauch') | float(0) < 3 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.trockner_ist_stromverbrauch') | float(0) > 4 ) %}
                --card-mod-icon-color: green;
              {% endif %}

Was soll denn angezeigt werden, zwischen 3 und 4 :stuck_out_tongue_winking_eye:

1 „Gefällt mir“
16

@maxe: :sweat_smile: Danke! Funktioniert nun wunderbar

dream

Hier der zugehörige Code

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.waschmachine_ist_stromverbrauch
        icon: mdi:washing-machine
        name: Waschmachine
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.waschmachine_ist_stromverbrauch') | float(0) < 1 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.waschmachine_ist_stromverbrauch') | float(0) < 2 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.waschmachine_ist_stromverbrauch') | float(0) > 4 )%}
                --card-mod-icon-color: green;
              {% endif %}
            }
      - type: custom:mushroom-entity-card
        entity: sensor.trockner_ist_stromverbrauch
        name: Trockner
        icon: mdi:tumble-dryer
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.trockner_ist_stromverbrauch') | float(0) < 1 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.trockner_ist_stromverbrauch') | float(0) < 3 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.trockner_ist_stromverbrauch') | float(0) > 4 )%}
                --card-mod-icon-color: green;
              {% endif %}
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.entfeuchter_ist_stromverbrauch
        name: Entfeuchter
        icon: mdi:air-humidifier
        double_tap_action:
          action: call-service
          service: script.entfeuchter_schalten
          target: {}
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.entfeuchter_ist_stromverbrauch') | float(0) < 0.7 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.entfeuchter_ist_stromverbrauch') | float(0) < 2 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.entfeuchter_ist_stromverbrauch') | float(0) > 3 )%}
                --card-mod-icon-color: green;
              {% endif %}
            }
      - type: custom:mushroom-entity-card
        entity: sensor.klima_sz_bz_ist_stromverbrauch
        name: Klima SZ BZ
        icon: mdi:air-conditioner
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.klima_sz_bz_ist_stromverbrauch') | float(0) < 0.7 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.klima_sz_bz_ist_stromverbrauch') | float(0) < 12.5 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.klima_sz_bz_ist_stromverbrauch') | float(0) > 12.5 )%}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.klima_sz_bz_ist_stromverbrauch') | float(0) > 2200 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.shelly_ww_zirkulation_ist_stromverbrauch
        name: WW-Pumpe
        icon: mdi:hand-water
        secondary_info: last-updated
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.shelly_ww_zirkulation_ist_stromverbrauch') | float(0) < 1 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.shelly_ww_zirkulation_ist_stromverbrauch') | float(0) > 1 )%}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.shelly_ww_zirkulation_ist_stromverbrauch') | float(0) > 10 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
      - type: custom:mushroom-entity-card
        entity: sensor.bwwp_ist_stromverbrauch
        name: BWWP
        icon: mdi:water-boiler
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.bwwp_ist_stromverbrauch') | float(0) < 1 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.bwwp_ist_stromverbrauch') | float(0) < 3 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.bwwp_ist_stromverbrauch') | float(0) < 1000 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.bwwp_ist_stromverbrauch') | float(0) > 1000 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.dunstabzugshaube_ist_stromverbrauch
        name: Abzugshaube
        icon: mdi:wind-power
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.dunstabzugshaube_ist_stromverbrauch') | float(0) < 4 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.dunstabzugshaube_ist_stromverbrauch') | float(0) < 14 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.dunstabzugshaube_ist_stromverbrauch') | float(0) < 100 )%}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.dunstabzugshaube_ist_stromverbrauch') | float(0) > 100 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
      - type: custom:mushroom-entity-card
        entity: sensor.heizung_ist_stromverbrauch
        name: Brenner
        icon: mdi:fire
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.heizung_ist_stromverbrauch') | float(0) < 2 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.heizung_ist_stromverbrauch') | float(0) < 5 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.heizung_ist_stromverbrauch') | float(0) < 500 )%}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.heizung_ist_stromverbrauch') | float(0) > 500 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.umwaelzpumpe_ist_stromverbrauch
        name: Umwälzpumpe
        icon: mdi:pump
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.umwaelzpumpe_ist_stromverbrauch') | float(0) < 2 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.umwaelzpumpe_ist_stromverbrauch') | float(0) < 30 )%}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.umwaelzpumpe_ist_stromverbrauch') | float(0) > 30 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
      - type: custom:mushroom-entity-card
        entity: sensor.umwaelzpumpe_fbh_ist_stromverbrauch
        name: Umwälzpumpe FBH
        icon: mdi:pump
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.umwaelzpumpe_fbh_ist_stromverbrauch') | float(0) < 2 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.umwaelzpumpe_fbh_ist_stromverbrauch') | float(0) < 30 )%}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.umwaelzpumpe_fbh_ist_stromverbrauch') | float(0) > 30 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }

… da Ihr ein so tolle Community seid schieße ich gleich noch eine Frage hinterher :grinning:

Gibt es die Möglichkeit den Wert einer einzelnen Entität mittels card_mod bei “multiple-entitiy-row” nach einer Zustandsabfrage zu färben?

Konkret - ich habe aktuell folgende Karte mit folgendem Code. Bei dieser Karte färbe sich das Icon abhängig des Sensors “orange” oder “grün”. Ich möchte nun zusätzliche wenn die absolute Feuchte im Raum größer ist wie Außen den Wert der absoluten Feuchte färben. Im folgenden Beispiel sollte die 9 g/m³ im Schlafzimmer orange dargestellt werden - Ideen?

Also abseits davon alles nochmal mit Mushroom o.ä. neu und anders zu erstellen …

question
question1009×576 47.4 KB

  - entity: sensor.temperatur_ist_schlafzimmer
    type: custom:multiple-entity-row
    name: Schlafzimmer
    icon: mdi:bed
    show_state: false
    secondary_info: false
    entities:
      - entity: sensor.temperatur_ist_schlafzimmer
        name: false
        icon: false
      - entity: sensor.relative_luftfeuchte_schlafzimmer
        name: false
        icon: false
      - entity: sensor.absolute_luftfeuchte_schlafzimmer
        name: false
        icon: false
        format: precision0
    card_mod:
      style: |
        :host {
          {% if ( states.sensor.relative_luftfeuchte_schlafzimmer.state | float > 58 ) %}
          --card-mod-icon-color: orange;
          {% else %}
          --card-mod-icon-color: green;
          {% endif %}
          }
17

Hier hört der elif wieder beim 1. auf, den z. B. 12 ist auch > 1.
Das musst auch bei den anderen kontrollieren, z. B. hier

1 „Gefällt mir“
18

Korrektur ist erfolgt

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.waschmachine_ist_stromverbrauch
        icon: mdi:washing-machine
        name: Waschmachine
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.waschmachine_ist_stromverbrauch') | float(0) < 1 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.waschmachine_ist_stromverbrauch') | float(0) < 2 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.waschmachine_ist_stromverbrauch') | float(0) > 2 )%}
                --card-mod-icon-color: green;
              {% endif %}
            }
      - type: custom:mushroom-entity-card
        entity: sensor.trockner_ist_stromverbrauch
        name: Trockner
        icon: mdi:tumble-dryer
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.trockner_ist_stromverbrauch') | float(0) < 1 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.trockner_ist_stromverbrauch') | float(0) < 3 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.trockner_ist_stromverbrauch') | float(0) > 4 )%}
                --card-mod-icon-color: green;
              {% endif %}
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.entfeuchter_ist_stromverbrauch
        name: Entfeuchter
        icon: mdi:air-humidifier
        double_tap_action:
          action: call-service
          service: script.entfeuchter_schalten
          target: {}
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.entfeuchter_ist_stromverbrauch') | float(0) < 0.7 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.entfeuchter_ist_stromverbrauch') | float(0) < 2 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.entfeuchter_ist_stromverbrauch') | float(0) > 3 )%}
                --card-mod-icon-color: green;
              {% endif %}
            }
      - type: custom:mushroom-entity-card
        entity: sensor.klima_sz_bz_ist_stromverbrauch
        name: Klima SZ BZ
        icon: mdi:air-conditioner
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.klima_sz_bz_ist_stromverbrauch') | float(0) < 12.5 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.klima_sz_bz_ist_stromverbrauch') | float(0) < 2200 )%}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.klima_sz_bz_ist_stromverbrauch') | float(0) > 2200 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.shelly_ww_zirkulation_ist_stromverbrauch
        name: WW-Pumpe
        icon: mdi:hand-water
        secondary_info: last-updated
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.shelly_ww_zirkulation_ist_stromverbrauch') | float(0) < 1 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.shelly_ww_zirkulation_ist_stromverbrauch') | float(0) < 10 )%}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.shelly_ww_zirkulation_ist_stromverbrauch') | float(0) > 10 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
      - type: custom:mushroom-entity-card
        entity: sensor.bwwp_ist_stromverbrauch
        name: BWWP
        icon: mdi:water-boiler
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.bwwp_ist_stromverbrauch') | float(0) < 3 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.bwwp_ist_stromverbrauch') | float(0) < 1000 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.bwwp_ist_stromverbrauch') | float(0) > 1000 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.dunstabzugshaube_ist_stromverbrauch
        name: Abzugshaube
        icon: mdi:wind-power
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.dunstabzugshaube_ist_stromverbrauch') | float(0) < 4 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.dunstabzugshaube_ist_stromverbrauch') | float(0) < 14 )%}
                --card-mod-icon-color: orange;
              {% elif ( states('sensor.dunstabzugshaube_ist_stromverbrauch') | float(0) < 100 )%}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.dunstabzugshaube_ist_stromverbrauch') | float(0) > 100 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
      - type: custom:mushroom-entity-card
        entity: sensor.heizung_ist_stromverbrauch
        name: Brenner
        icon: mdi:fire
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.heizung_ist_stromverbrauch') | float(0) < 5 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.heizung_ist_stromverbrauch') | float(0) < 500 )%}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.heizung_ist_stromverbrauch') | float(0) > 500 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.umwaelzpumpe_ist_stromverbrauch
        name: Umwälzpumpe
        icon: mdi:pump
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.umwaelzpumpe_ist_stromverbrauch') | float(0) < 2 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.umwaelzpumpe_ist_stromverbrauch') | float(0) < 30 )%}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.umwaelzpumpe_ist_stromverbrauch') | float(0) > 30 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
      - type: custom:mushroom-entity-card
        entity: sensor.umwaelzpumpe_fbh_ist_stromverbrauch
        name: Umwälzpumpe FBH
        icon: mdi:pump
        card_mod:
          style: |
            ha-card {
              {% if ( states('sensor.umwaelzpumpe_fbh_ist_stromverbrauch') | float(0) < 2 ) %}
                --card-mod-icon-color: grey;
              {% elif ( states('sensor.umwaelzpumpe_fbh_ist_stromverbrauch') | float(0) < 30 )%}
                --card-mod-icon-color: green;
              {% elif ( states('sensor.umwaelzpumpe_fbh_ist_stromverbrauch') | float(0) > 30 )%}
                --card-mod-icon-color: red;
              {% endif %}
            }
19

Schau dir auch mal bei den Entity Objects das styles an: GitHub - benct/lovelace-multiple-entity-row: Show multiple entity states and attributes on entity rows in Home Assistant's Lovelace UI

        styles:
          color: gray

keine Ahnung, ob man da If/Else drum basteln kann.
Aber mit card-mod geht es ja jedenfalls.

20

Ich habe eine bar-card angelegt aber ich bekomme es einfach nicht hin die Farbe vom Icon zu ändern.

type: custom:bar-card
entities:
  - entity: sensor.bad_luftfeuchtigkeit
    icon: mdi:water
    styles:
      color: green

Was mache ich falsch?

23

@Sagitariusstern ich glaube du bist hier falsch abgebogen oder geht es um die Integration card-mod?

Zu bar-card findest du hier die Doku, auch zu den Farben: GitHub - custom-cards/bar-card: Customizable Animated Bar card for Home Assistant Lovelace

@Sagitariusstern eine PN nützt in einem Forum recht wenig um Probleme zu lösen.
In der Doku ist doch erklärt, wie es über card_mod funktioniert: GitHub - custom-cards/bar-card: Customizable Animated Bar card for Home Assistant Lovelace

@Sagitariusstern warum schreibst du mir immer eine PN?

:crayon:by HarryP: Zusammenführung Mehrfachposting

24

Sorry ist kein Absicht.
Aber wenn ich den öffentlichen Kanal benutze werde ich wieder angemahnt den direkten Kontakt
zu suchen.
Tut mir leid wenn ich dich gestört habe. :clap: