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

Vielleicht schreibst du ins Forum (also hier hin) und nicht in den Chat und nicht via PN .

@Sagitariusstern
Aber nur, wenn Du den öffentlichen Chat für Fragen verwendest.
So wie @maxe schon geschrieben hat, Fragen gehören ins Forum und nicht in den Chat oder PN!!

Da ich absolut neu in diesem Forum bin, kann mir bitte jemand eine Idee liefern,
wie ich ein Icon einfach in eine bestimmte Farbe ändern kann ohne irgendeinen Zustand,
einfach nur blau, rot oder grün.
Ich wäre euch sehr dankbar.
Sorry für die Umstände.

@Sagitariusstern
Versuch es mal so

type: custom:bar-card
entities:
  - entity: sensor.bad_luftfeuchtigkeit
    icon: mdi:water
style: |-
  ha-icon {
    color: green;
  }

Geht leider nicht.
Trotzdem Danke.

Nachtrag:

Ok. Stopp ich revidiere die Aussage.
Nachdem ich die Position der Leerzeichen eingehalten habe,
funktioniert das Ganze.

Vielen herzlichen Dank.

Nochmals sorry wenn ich die falschen Kanäle benutze.

Nachtrag2:

Sorry ich muss noch einmal einhaken.
Das Icon hat die Farbe angenommen aber leider bekomme ich jetzt die anderen Räume nicht mehr angezeigt.


Muss ich den Code an eine bestimmte Stelle eingeben das es für alle Räume gilt?

:crayon:by HarryP: Zusammenführung Doppelpost!
@Sagitariusstern : Schau mal in Deine PN-Box!!

Der Code war bis gerade nicht bekannt. Hast du es mal so versucht, bei jeder Entität?

type: custom:bar-card
entities:
  - entity: sensor.bad_luftfeuchtigkeit
    icon: mdi:water
    style: |-
      ha-icon {
        color: green;
      }

Wenn ich das mache bekomme ich gar nichts mehr angezeigt.

Ich nutze bar_card nicht, deswegen kann ich es nicht selber testen.

Moin in die Runde

Ich wollte mir ein Dashboard mit einer Batterieübersicht bauen.
Dazu wollte ich eine custom mushroom entitie card nutzen.
In Abhängigkeit des Batteriestandes soll sich die Farbe des Icons ändern.
Irgendwie pass das Ganz aber nicht, denn ich erhalte den Fehler:
" Visueller Editor wird für diese Konfiguration nicht unterstützt:

  • At path: card_mod – Expected a value of type never, but received: [object Object]"

Ich stehe irgenwie auf dem Schlauch. So sieht meine Config aus:

type: custom:mushroom-entity-card
entity: sensor.therm_buro_battery
name: Batterie Bad
icon: mdi:battery
card_mod:
  style: |
    ha-card {
      {% if ( states('sensor.thermometer_bad_battery') | float(0) > 40 ) %}
        --card-mod-icon-color: green;
      {% elif ( states('sensor.thermometer_bad_battery') | float(0) < 40 )%}
        --card-mod-icon-color: orange;
      {% elif ( states('sensor.thermometer_bad_battery') | float(0) < 10 )%}
        --card-mod-icon-color: red;
      {% endif %}
    }

Könnt Ihr mir auf die Sprünge helfen?

Update:
Vergesst meine Frage.
Ich habe mich derart mit dem code beschäftigt, dass ich gar nicht gemerkt habe, mir fehlte die Integration card-mod.
Sorry für die doofe Frage, ich gelobe Besserung :wink:

:crayon:by HarryP: Zusammenführung Doppelpost

Ich habe leider eine weitere Frage, die Ihr mir bestimmt beantworten könnt. Ich habe mir eine Übersicht von Raumklimawerten gebaut. Ich habe eine multiple-entity-row gewählt und möchte mit Card-mod die Farbe von zwei Werten ändern. Mir gelingt es aber nicht, die Farbe der zweiten Entität (hier: Luftfeuchte) anzupassen. Ist dies bei ner multiple row überhaupt möglich?
Derzeit sieht die Karte so aus, bei der Temperatur funktioniert das auch super:
image
und das ist der Code:

entity: sensor.thermometer_wohnzimmer_temperature
name: Wohnzimmer
icon: mdi:sofa
type: custom:multiple-entity-row
state_header: Temperatur
format: precision1
entities:
  - entity: sensor.thermometer_wohnzimmer_humidity
    name: Luftfeuchte
    format: precision1
card_mod:
  style: |
    .state.entity {
    {% if states(config.entity) | int < 18 %} 
      color: blue;
        {% elif states(config.entity) | int >= 22 %}
          color: red;
            {% else %}
              color: green
                {% endif %}
      }

Ich habe schon einiges versucht, sogar Chat GPT gefragt, aber die zweite Entität bleibt immer weiß.
Ich würder gerne einbauen, dass die Werte der Luftfeuchtigkeit bei <35 blau, >=60 rot und sonst grün erscheinen.
Hat jemad von Euch eine Idee?

Hallo liebe Community,
als erstes wünsche ich Euch ein paar schöne erholsame Tage an Ostern.

Wahrscheinlich ist meine Frage ein wenig untergegangen. Vielleicht hat ja doch jemand eine Idee zu meiner Frage nach den Zustandswerten in einer multiple-entity-row. Würde mich sehr freuen.

Versuche mal die Einrückung zu ändern:

card_mod:
  style: |
    .state.entity {
      {% if states(config.entity) | int < 18 %} 
         color: blue
      {% elif states(config.entity) | int >= 22 %}
         color: red
      {% else %}
         color: green
      {% endif %}
    }

Ich weiß jetzt nicht, ob es die ; hinter den Farbnamen braucht. Probiere es mal mit und ohne.

Ich habe mich vielleicht doof ausgedrückt. Die Anzeige der Temperatur funktioniert einwandfrei.
Ich wollte nur zusätzlich die Luftfeuchte entsprechend der Werte färben. Da jeder Code, den ich bisher versucht habe gescheitert ist, habe ich den Teil jetzt erst einmal komplett weggelassen.

Schau mal ob das vielleicht hilft:

Sonst wüsste ich auch nicht weiter, sorry.

Danke für den Hinweis. Ich habe diesen Thread sehr intensiv gelesen, aber das trifft bei mir ja nicht zu. Im Prinzip müsste da doch ne zweite If-Schleife für die Luftfeuchte hin.
Wie geschrieben, die Anzeige bei der Temperatur funktioniert tadellos.
Ich glaube die Grundfrage heißt, ob man das für einen zweiten Zustand (wie bei mir die Luftfeuchte) auch anzeigen lassen kann.

Nachtrag:
Ich habe es jetzt noch einmal so versucht:

entity: sensor.thermometer_wohnzimmer_temperature
name: Wohnzimmer
icon: mdi:sofa
type: custom:multiple-entity-row
state_header: Temperatur
format: precision1
entities:
  - entity: sensor.thermometer_wohnzimmer_humidity
    name: Luftfeuchte
    format: precision1
card_mod:
  style: |
    .state.entity {
      {% if config.entity == 'sensor.thermometer_wohnzimmer_humidity' %}
        color: {% if states('sensor.thermometer_wohnzimmer_humidity') | float > 65 %} red;
               {% elif states('sensor.thermometer_wohnzimmer_humidity') | float < 30 %} blue;
               {% else %} green;
               {% endif %}
      {% else %}
        color: {% if states('sensor.thermometer_wohnzimmer_temperature') | float < 18 %} blue;
               {% elif states('sensor.thermometer_wohnzimmer_temperature') | float >= 22 %} red;
               {% else %} green;
               {% endif %}
      {% endif %}
    }

Aber leider bleibt die Farbe weiterhin weiß. Vielleicht hat ja noch einer von Euch eine Idee.
Vorab schon einmal 1000 Dank an Alle hier im Forum, die sich die Mühe machen, den Mitgliedern zu helfen

:crayon:by HarryP: Zusammenführung Doppelpost (bitte “bearbeiten” Funktion nutzen)

Sorry, aber ich muss leider aussteigen. Ich kann dir leider nicht weiterhelfen.
Schöne Ostern und hoffe du bekommst es noch hin.

Hallo zusammen,

anbei meine Card mit unterschiedlichen Entitys und Färbungen. Hoffe das es der ein oder andere gebrauchen kann.

image

type: entities
entities:
  - entity: sensor.balkon_temperatur_temperature
    type: custom:multiple-entity-row
    name: Balkon
    state_header: Temperatur
    format: precision1
    card_mod:
      style: |
        :host {
          --paper-item-icon-color:
            {% set temp = states(config.entity)|float(0) %}
            {% if temp == 'unknown' %} white
            {% elif temp < 18 %} blue
            {% elif temp >= 23 %} red
            {% else %} green
            {% endif %};
        }
        .entities-row div.entity:nth-child(1)  {
          {% set druck = states('sensor.balkon_temperatur_pressure') %}
          {% if druck | int < 1005 %} color: blue; bold;
          {% elif (druck | int >= 1005) and (druck | int < 1023) %} color: orange;
          {% elif druck | int >= 1023 %} color: red;
          {% endif %}
        }
        .entities-row div.entity:nth-child(2)  {
          {% set druck = states('sensor.balkon_temperatur_humidity') %}
          {% if druck | int >= 65 %} color: blue;
          {% elif druck | int >= 60 %} color: lightgreen;
          {% elif druck | int >= 40 %} color: green;
          {% elif druck | int >= 35 %} color: lightgreen;
          {% elif druck | int >= 30 %} color: orange;
          {% else %} color: gray;
          {% endif %}
        }
        .state.entity {
          {% if states(config.entity) | int < 18 %} color: blue;
          {% elif states(config.entity) | int >= 23 %} color: red;
          {% else %} color: green;
          {% endif %}
        }
    secondary_info:
      entity: sensor.balkon_temperatur_battery
      name: Batterie
      unit: '%'
    entities:
      - entity: sensor.balkon_temperatur_pressure
        name: Luftdruck
      - entity: sensor.balkon_temperatur_humidity
        name: Luftfeuchtigkeit
  - type: section
  - entity: sensor.wohnzimmer_temperatur_temperature
    type: custom:multiple-entity-row
    name: Wohnzimmer
    state_header: Temperatur
    format: precision1
    card_mod:
      style: |
        :host {
          --paper-item-icon-color:
            {% set temp = states(config.entity)|float(0) %}
            {% if temp == 'unknown' %} white
            {% elif temp < 18 %} blue
            {% elif temp >= 23 %} red
            {% else %} green
            {% endif %};
        }
        .entities-row div.entity:nth-child(1)  {
          {% set druck = states('sensor.wohnzimmer_temperatur_humidity') %}
          {% if druck | int >= 65 %} color: blue;
          {% elif druck | int >= 60 %} color: lightgreen;
          {% elif druck | int >= 40 %} color: green;
          {% elif druck | int >= 35 %} color: lightgreen;
          {% elif druck | int >= 30 %} color: orange;
          {% else %} color: gray;
          {% endif %}
        }
        .state.entity {
          {% if states(config.entity) | int < 18 %} color: blue;
          {% elif states(config.entity) | int >= 23 %} color: red;
          {% else %} color: green;
          {% endif %}
        }
    secondary_info:
      entity: sensor.wohnzimmer_temperatur_battery
      name: Batterie
      unit: '%'
    entities:
      - entity: sensor.wohnzimmer_temperatur_humidity
        name: Luftfeuchtigkeit
  - entity: sensor.kuche_temperatur_temperature
    type: custom:multiple-entity-row
    name: Küche
    state_header: Temperatur
    format: precision1
    card_mod:
      style: |
        :host {
          --paper-item-icon-color:
            {% set temp = states(config.entity)|float(0) %}
            {% if temp == 'unknown' %} white
            {% elif temp < 18 %} blue
            {% elif temp >= 23 %} red
            {% else %} green
            {% endif %};
        }
        .entities-row div.entity:nth-child(1)  {
          {% set temp = states('sensor.kuche_temperatur_humidity') %}
          {% if temp | int >= 65 %} color: blue;
          {% elif temp | int >= 60 %} color: lightgreen;
          {% elif temp | int >= 40 %} color: green;
          {% elif temp | int >= 35 %} color: lightgreen;
          {% elif temp | int >= 30 %} color: orange;
          {% else %} color: gray;
          {% endif %}
        }
        .state.entity {
          {% if states(config.entity) | int < 18 %} color: blue;
          {% elif states(config.entity) | int >= 23 %} color: red;
          {% else %} color: green;
          {% endif %}
        }
    secondary_info:
      entity: sensor.kuche_temperatur_battery
      name: Batterie
      unit: '%'
    entities:
      - entity: sensor.kuche_temperatur_humidity
        name: Luftfeuchtigkeit
  - entity: sensor.badezimmer_temperatur_temperature
    type: custom:multiple-entity-row
    name: Badezimmer
    state_header: Temperatur
    format: precision1
    card_mod:
      style: |
        :host {
          --paper-item-icon-color:
            {% set temp = states(config.entity)|float(0) %}
            {% if temp == 'unknown' %} white
            {% elif temp < 18 %} blue
            {% elif temp >= 23 %} red
            {% else %} green
            {% endif %};
        }
        .entities-row div.entity:nth-child(1)  {
          {% set temp = states('sensor.badezimmer_temperatur_humidity') %}
          {% if temp | int >= 65 %} color: blue;
          {% elif temp | int >= 60 %} color: lightgreen;
          {% elif temp | int >= 40 %} color: green;
          {% elif temp | int >= 35 %} color: lightgreen;
          {% elif temp | int >= 30 %} color: orange;
          {% else %} color: gray;
          {% endif %}
        }
        .state.entity {
          {% if states(config.entity) | int < 18 %} color: blue;
          {% elif states(config.entity) | int >= 23 %} color: red;
          {% else %} color: green;
          {% endif %}
        }
    secondary_info:
      entity: sensor.badezimmer_temperatur_battery
      name: Batterie
      unit: '%'
    entities:
      - entity: sensor.badezimmer_temperatur_humidity
        name: Luftfeuchtigkeit
  - entity: sensor.kinderzimmer_temperatur_temperature
    type: custom:multiple-entity-row
    name: Kinderzimmer
    state_header: Temperatur
    format: precision1
    card_mod:
      style: |
        :host {
          --paper-item-icon-color:
            {% set temp = states(config.entity)|float(0) %}
            {% if temp == 'unknown' %} white
            {% elif temp < 18 %} blue
            {% elif temp >= 23 %} red
            {% else %} green
            {% endif %};
        }
        .entities-row div.entity:nth-child(1)  {
          {% set temp = states('sensor.kinderzimmer_temperatur_humidity') %}
          {% if temp | int >= 65 %} color: blue;
          {% elif temp | int >= 60 %} color: lightgreen;
          {% elif temp | int >= 40 %} color: green;
          {% elif temp | int >= 35 %} color: lightgreen;
          {% elif temp | int >= 30 %} color: orange;
          {% else %} color: gray;
          {% endif %}
        }
        .state.entity {
          {% if states(config.entity) | int < 18 %} color: blue;
          {% elif states(config.entity) | int >= 23 %} color: red;
          {% else %} color: green;
          {% endif %}
        }
    secondary_info:
      entity: sensor.kinderzimmer_temperatur_battery
      name: Batterie
      unit: '%'
    entities:
      - entity: sensor.kinderzimmer_temperatur_humidity
        name: Luftfeuchtigkeit
  - entity: sensor.schlafzimmer_temperatur_temperature
    type: custom:multiple-entity-row
    name: Schlafzimmer
    state_header: Temperatur
    format: precision1
    card_mod:
      style: |
        :host {
          --paper-item-icon-color:
            {% set temp = states(config.entity)|float(0) %}
            {% if temp == 'unknown' %} white
            {% elif temp < 18 %} blue
            {% elif temp >= 23 %} red
            {% else %} green
            {% endif %};
        }
        .entities-row div.entity:nth-child(1)  {
          {% set temp = states('sensor.schlafzimmer_temperatur_humidity') %}
          {% if temp | int >= 65 %} color: blue;
          {% elif temp | int >= 60 %} color: lightgreen;
          {% elif temp | int >= 40 %} color: green;
          {% elif temp | int >= 35 %} color: lightgreen;
          {% elif temp | int >= 30 %} color: orange;
          {% else %} color: gray;
          {% endif %}
        }
        .state.entity {
          {% if states(config.entity) | int < 18 %} color: blue;
          {% elif states(config.entity) | int >= 23 %} color: red;
          {% else %} color: green;
          {% endif %}
        }
    secondary_info:
      entity: sensor.schlafzimmer_temperatur_battery
      name: Batterie
      unit: '%'
    entities:
      - entity: sensor.schlafzimmer_temperatur_humidity
        name: Luftfeuchtigkeit
show_header_toggle: false
state_color: false

3 „Gefällt mir“

Super, vielen Dank, das hat mir sehr geholfen.

Ich würde jetzt gerne für die Schwellenwerte eine Input Number verwenden, damit ich den Wert für alle Entitäten anpassen kann. Kann mir da jemand helfen?

Könnte mir jemand helfen?:blush:
Ich würde gerne die Secondary Color nach Wert ändern, leider bekomme ich es mit den Codes hier nicht hin…
Habe den Code auch etwas angepasst, vllt ist es nur eine Kleinigkeit?

Danke im Voraus


      ha-card {
        zoom: 100%;
        width: 85%
        height: fit-content !important;
        background: darkgrey;
        opacity: 0.7;
        border: transparent
        color: white;
        {% if ( states('sensor.pooltemperatur') | float(0) < 30 )%}
          --card-mod-secondary-color: red;
        {% elif ( states('sensor.pooltemperatur') | float(0) < 27 )%}
          --card-mod-secondary-icon-color: orange;
        {% elif ( states('sensor.pooltemperatur') | float(0) < 25 ) %}
          --card-mod-icon-color: green;
        {% endif %}

Zu Beginn hatte ich es auch hiermit versucht…

Hoffe auf eure Hilfe :pray:t4:


ha-card {    
              zoom: 100%;
              font-size: 15px%;
              margin-left: 110%;
              margin-top: -150%;
              width: 85%;
              height: fit-content !important;
              background-color: transparent !important;
              opacity: '';
              border: transparent;
              {% set state = states('sensor.pooltemperatur') | int %}
              {% if state <= 30 %} 
                --card-secondary-color: red;
              {% elif state <= 27 %}
                --card-secondary-color: yellow;
              {% elif state <= 24 %}
                --card-secondary-color: blue;
              {% endif %}

:crayon:by HarryP: Zusammenführung Doppelpost (bitte „bearbeiten“ Funktion nutzen)

Hi, vielleicht kann/mag mir Jemand helfen. Ich bekomme es nicht hin, dass beide Symbole separate Farben haben ohne dass das Theme zerschossen wird

show_name: false
show_icon: true
show_state: true
type: glance
entities:
  - entity: sensor.temperatur_wk_temperatur
  - entity: sensor.temperatur_wk_luftfeuchtigkeit
title: Waschkeller
state_color: true
card_mod:
  class: middle-left
  style: |
    ha-card {
      --ha-card-header-font-size: 15px;
      line-height: 14px;
      font-size: 15px;
      {% if ( states('sensor.temperatur_wk_temperatur') | float(0) > 25 ) %}
        --card-mod-icon-color: red;
      {% elif ( states('sensor.temperatur_wk_temperatur') | float(0) < 18 )%}
        --card-mod-icon-color: red;
      {% elif ( states('sensor.temperatur_wk_temperatur') | float(0) > 18 )%}
        --card-mod-icon-color: green;
      {% endif %}
    }

Habe es auch schon mit den Werten von @Pepe probiert, aber das zerschießt das Theme

image