Iconfarbe ändern geht nicht

Dashboard/Cards/Frontend
1

Hallo,

ich möchte gerne die Farbe von Icons ändern. Im Moment sind sie alle Weiß, wenn das Licht aus ist und wenn es an ist, wird die aktuelle Farbe gezeigt.
Ich möchte damit aber gerne eine RGB-Steuerung realisieren, deswegen sollen die Buttons eine “Vorschau” sein. Der Button, der Grün einschaltet soll auch Grün sein.

type: vertical-stack
cards:
  - show_name: false
    show_icon: true
    type: button
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        device_id: 50aed11bd3273c3da403094480bb15ff
      data:
        rgbww_color: 0, 0, 0, 0, 255
        brightness: 255
        color_temp: 500
    entity: light.deckenventilator_lampe_rgb
    icon: mdi:ceiling-fan-light
    hold_action:
      action: none
    icon_height: 200px
  - type: custom:slider-button-card
    entity: light.deckenventilator_lampe_rgb
    slider:
      direction: left-right
      background: gradient
      use_state_color: true
      use_percentage_bg_opacity: false
      show_track: false
      toggle_on_click: false
      force_square: false
      show_attribute: false
    show_name: false
    show_state: false
    compact: true
    icon:
      show: false
      use_state_color: true
      tap_action:
        action: more-info
      icon: ""
    action_button:
      mode: toggle
      icon: mdi:power
      show: false
      show_spinner: true
      tap_action:
        action: toggle
    show_attribute: false
  - type: horizontal-stack
    cards:
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: perform-action
          perform_action: light.turn_on
          target:
            device_id: 50aed11bd3273c3da403094480bb15ff
          data:
            rgb_color:
              - 255
              - 0
              - 0
        entity: light.deckenventilator_lampe_rgb
        icon: phu:aqara-wirelessbutton
        icon_height: 100px
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: perform-action
          perform_action: light.turn_on
          target:
            device_id: 50aed11bd3273c3da403094480bb15ff
          data:
            rgb_color:
              - 255
              - 255
              - 0
        entity: light.deckenventilator_lampe_rgb
        icon: phu:aqara-wirelessbutton
        icon_height: 100px
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: perform-action
          perform_action: light.turn_on
          target:
            device_id: 50aed11bd3273c3da403094480bb15ff
          data:
            rgb_color:
              - 0
              - 255
              - 0
        entity: light.deckenventilator_lampe_rgb
        icon: phu:aqara-wirelessbutton
        icon_height: 100px
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: perform-action
          perform_action: light.turn_on
          target:
            device_id: 50aed11bd3273c3da403094480bb15ff
          data:
            rgb_color:
              - 0
              - 255
              - 255
        entity: light.deckenventilator_lampe_rgb
        icon: phu:aqara-wirelessbutton
        icon_height: 100pxx
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: perform-action
          perform_action: light.turn_on
          target:
            device_id: 50aed11bd3273c3da403094480bb15ff
          data:
            rgb_color:
              - 0
              - 0
              - 255
        entity: light.deckenventilator_lampe_rgb
        icon: phu:aqara-wirelessbutton
        icon_height: 100px
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: switch.fire_tablet_bildschirmschoner
        icon: mdi:weather-night
        icon_height: 100px
  - show_name: false
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: fan.deckenventilator_buro
    icon: mdi:ceiling-fan
    icon_height: 200px
  - type: horizontal-stack
    cards:
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: perform-action
          perform_action: fan.set_percentage
          target:
            device_id: 5706b666700e40b63af7c71c700235be
          data:
            percentage: 10
        entity: fan.deckenventilator_buro
        icon: mdi:numeric-1-box-multiple-outline
        hold_action:
          action: none
        icon_height: 100px
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: perform-action
          perform_action: fan.set_percentage
          target:
            device_id: 5706b666700e40b63af7c71c700235be
          data:
            percentage: 30
        entity: fan.deckenventilator_buro
        icon: mdi:numeric-2-box-multiple-outline
        hold_action:
          action: none
        icon_height: 100px
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: perform-action
          perform_action: fan.set_percentage
          target:
            device_id: 5706b666700e40b63af7c71c700235be
          data:
            percentage: 50
        entity: fan.deckenventilator_buro
        icon: mdi:numeric-3-box-multiple-outline
        hold_action:
          action: none
        icon_height: 100px
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: perform-action
          perform_action: fan.set_percentage
          target:
            device_id: 5706b666700e40b63af7c71c700235be
          data:
            percentage: 70
        entity: fan.deckenventilator_buro
        icon: mdi:numeric-4-box-multiple-outline
        hold_action:
          action: none
        icon_height: 100px
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: perform-action
          perform_action: fan.set_percentage
          target:
            device_id: 5706b666700e40b63af7c71c700235be
          data:
            percentage: 90
        entity: fan.deckenventilator_buro
        icon: mdi:numeric-5-box-multiple-outline
        hold_action:
          action: none
        icon_height: 100px
2

Vielleicht erreichst Du das Gleiche über einen anderen Weg, z.B.

Screenshot 2024-10-27 151456
Screenshot 2024-10-27 151456702×390 38.2 KB

Für Dich entscheidend der Parameter

use_light_color: true

Zeigt als Icon Farbe entweder was gerade eingestellt ist oder den Standard.

Gute Gelingen.

3

Wo genau muss ich das einfügen?

Es geht um diese Buttons:

type: horizontal-stack
                cards:
                  - show_name: false
                    show_icon: true
                    type: button
                    tap_action:
                      action: perform-action
                      perform_action: light.turn_on
                      target:
                        device_id: 50aed11bd3273c3da403094480bb15ff
                      data:
                        rgb_color:
                          - 255
                          - 0
                          - 0
                    entity: light.deckenventilator_lampe_rgb
                    icon: phu:aqara-wirelessbutton
                    icon_height: 50px
                  - show_name: false
                    show_icon: true
                    type: button
                    tap_action:
                      action: perform-action
                      perform_action: light.turn_on
                      target:
                        device_id: 50aed11bd3273c3da403094480bb15ff
                      data:
                        rgb_color:
                          - 255
                          - 255
                          - 0
                    entity: light.deckenventilator_lampe_rgb
                    icon: phu:aqara-wirelessbutton
                    icon_height: 50px
                  - show_name: false
                    show_icon: true
                    type: button
                    tap_action:
                      action: perform-action
                      perform_action: light.turn_on
                      target:
                        device_id: 50aed11bd3273c3da403094480bb15ff
                      data:
                        rgb_color:
                          - 0
                          - 255
                          - 0
                    entity: light.deckenventilator_lampe_rgb
                    icon: phu:aqara-wirelessbutton
                    icon_height: 50px
                  - show_name: false
                    show_icon: true
                    type: button
                    tap_action:
                      action: perform-action
                      perform_action: light.turn_on
                      target:
                        device_id: 50aed11bd3273c3da403094480bb15ff
                      data:
                        rgb_color:
                          - 0
                          - 255
                          - 255
                    entity: light.deckenventilator_lampe_rgb
                    icon: phu:aqara-wirelessbutton
                    icon_height: 50px
                  - show_name: false
                    show_icon: true
                    type: button
                    tap_action:
                      action: perform-action
                      perform_action: light.turn_on
                      target:
                        device_id: 50aed11bd3273c3da403094480bb15ff
                      data:
                        rgb_color:
                          - 0
                          - 0
                          - 255
                    entity: light.deckenventilator_lampe_rgb
                    icon: phu:aqara-wirelessbutton
                    icon_height: 50px
                  - show_name: false
                    show_icon: true
                    type: button
                    tap_action:
                      action: toggle
                    entity: switch.fire_tablet_bildschirmschoner
                    icon: mdi:weather-night
                    icon_height: 50px
4

Nimm es einfach als weitere Karte in Deinem horizontal-stack aber denk an die richtige Einrückung

 - type:
      entity:

usw.
Leg Dir doch erstmal so eine einzelne Karte https://github.com/piitaya/lovelace-mushroom an und probiere mit den Parametern was Du brauchst und was nicht und danach baue Dir ein neues vertical-stack Gerüst auf.

5

ich habe das jetzt mal mit einer mushroomkarte probiert.

das icon färbt sich zwar in der vorgegebenen farbe, aber wenn die lampe aus ist, bleibt auch das icon “aus”.

type: custom:mushroom-light-card
entity: light.deckenventilator_lampe_rgb
icon_color: red
tap_action:
  action: perform-action
  perform_action: light.toggle
  target:
    device_id: 50aed11bd3273c3da403094480bb15ff
  data:
    rgb_color:
      - 255
      - 0
      - 0
secondary_info: none
primary_info: none
icon_type: icon
icon: mdi:radiobox-marked
use_light_color: false
show_color_control: false
6

Hast Du use_light_color: true auch probiert - das Icon sollte die momentane Farbe des Lichtes haben.

Das habe ich überlsen, daß der dann auch Farbe haben soll, sry. Na dann hier der nächste Ansatz, die Steigerungsform zur custom:mushroom-light-card.

Mit der GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant kannst Du Icon, State, Background für alle Stati anpassen, also auch für on/off. Beispiele hatte ich mal hier und hier gepostet. Lies Dich ein und probiere.

7

so langsam kommen wir uns der Sache schon näher. Ich habe folgenden Code benuzt:

card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(255, 191, 0, 0.8)' if is_state('light.deckenventilator_lampe_rgb', 'on') else 'rgba(0, 0, 0, 0.4)' }};
                --card-mod-icon-color: {{ 'rgba(0, 0, 0, 1)' if is_state('light.deckenventilator_lampe_rgb', 'on') else 'rgba(255, 255, 255, 1)' }};
                border-radius: 100px!important;
              }

Wenn ich jetzt noch das use_light_color ausblende oder für jeden Button individuell einstellen könnte, wäre es perfekt. Im Moment ändert sich der Background nicht wie oben angegeben, sondern wie es das use_light_color vorgibt.

8

Ich schaffe es nun die Icon Farbe vorzugeben mit dem Befehl

card_mod:
                  style: |
                    ha-card {                      
                      --card-mod-icon-color: {{ 'rgba(0, 0, 0, 1)' if is_state('light.deckenventilator_lampe_rgb', 'on') else 'rgba(255, 255, 255, 1)' }};                     
                    }

und den Shape mit folgendem Befehl:

card_mod:
                  style:
                    mushroom-shape-icon$: |
                      .shape {
                        --shape-color: rgb(44, 44, 44) !important;
                      }

Im Moment geht aber nur das eine ODER das andere. Wie kann ich beide Befehle auf das gleiche Icon anwenden?

9

Ich habe die custom:button-card für solche Sachen genutzt, wie z.B.

      - type: custom:button-card
        entity: sensor.solar_zu_tibber_leistung
        name: Netz und Solarleistung
        show_name: false
        icon: mdi:home-import-outline
        color: var(--info-color)
        show_state: false
        show_label: true
        state:
          - operator: ">"
            value: 99.9
            icon: mdi:home-export-outline
            color: orange
          - operator: ">="
            value: 90
            color: orange
          - operator: ">"
            value: 50
            color: yellow
          - operator: ">"
            value: 0
            color: var(--info-color)
10

Ich muss mal lernen, den kompletten Code zu zeigen…

Ich habe die Mushroom Custom Light Card benutzt:

type: custom:mushroom-light-card
                entity: light.deckenventilator_lampe_rgb
                icon_color: white
                tap_action:
                  action: perform-action
                  perform_action: light.turn_on
                  target:
                    device_id: 50aed11bd3273c3da403094480bb15ff
                  data:
                    brightness: 255
                    color_temp: 500
                secondary_info: none
                primary_info: none
                icon_type: icon
                icon: mdi:radiobox-marked
                use_light_color: false
                show_color_control: false
                icon_height: 50px
              - show_name: false
                show_icon: true
                type: custom:mushroom-light-card
                entity: light.deckenventilator_lampe_rgb
                card_mod:
                  style: |
                    ha-card {                      
                      --card-mod-icon-color: {{ 'rgba(0, 0, 0, 1)' if is_state('light.deckenventilator_lampe_rgb', 'on') else 'rgba(0, 255, 0, 1)' }};  
                      --card-mod-shape-color: {{ 'rgba(0, 0, 0, 1)' if is_state('light.deckenventilator_lampe_rgb', 'on') else 'rgba(0, 255, 0, 1)' }};  
                    } 
                tap_action:
                  action: perform-action
                  perform_action: light.turn_on
                  target:
                    device_id: 50aed11bd3273c3da403094480bb15ff
                  data:
                    rgb_color:
                      - 255
                      - 0
                      - 0
                secondary_info: none
                primary_info: none
                icon_type: icon
                icon: mdi:radiobox-marked
                use_light_color: false
                show_color_control: false
                icon_height: 50px
              - show_name: false
                show_icon: true
                type: custom:mushroom-light-card
                entity: light.deckenventilator_lampe_rgb
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      .shape {
                        --shape-color: rgb(44, 44, 44) !important;
                      }
                icon_color: green
                tap_action:
                  action: perform-action
                  perform_action: light.turn_on
                  target:
                    device_id: 50aed11bd3273c3da403094480bb15ff
                  data:
                    rgb_color:
                      - 0
                      - 255
                      - 0
                secondary_info: none
                primary_info: none
                icon_type: icon
                icon: mdi:radiobox-marked
                use_light_color: false
                show_color_control: false
                icon_height: 50px
              - show_name: false
                show_icon: true
                type: custom:mushroom-light-card
                entity: light.deckenventilator_lampe_rgb
                icon_color: cyan
                tap_action:
                  action: perform-action
                  perform_action: light.turn_on
                  target:
                    device_id: 50aed11bd3273c3da403094480bb15ff
                  data:
                    rgb_color:
                      - 0
                      - 255
                      - 255
                secondary_info: none
                primary_info: none
                icon_type: icon
                icon: mdi:radiobox-marked
                use_light_color: false
                show_color_control: false
                icon_height: 50px
              - show_name: false
                show_icon: true
                type: custom:mushroom-light-card
                entity: light.deckenventilator_lampe_rgb
                icon_color: blue
                tap_action:
                  action: perform-action
                  perform_action: light.turn_on
                  target:
                    device_id: 50aed11bd3273c3da403094480bb15ff
                  data:
                    rgb_color:
                      - 0
                      - 0
                      - 255
                secondary_info: none
                primary_info: none
                icon_type: icon
                icon: mdi:radiobox-marked
                use_light_color: false
                show_color_control: false
                icon_height: 50px
              - show_name: false
                show_icon: true
                type: custom:mushroom-light-card
                entity: light.deckenventilator_lampe_rgb
                icon_color: purple
                tap_action:
                  action: perform-action
                  perform_action: light.turn_on
                  target:
                    device_id: 50aed11bd3273c3da403094480bb15ff
                  data:
                    rgb_color:
                      - 255
                      - 0
                      - 255
                secondary_info: none
                primary_info: none
                icon_type: icon
                icon: mdi:radiobox-marked
                use_light_color: false
                show_color_control: false
                icon_height: 50px
              - type: custom:mushroom-light-card
                entity: light.deckenventilator_buro
                icon: mdi:weather-night
11

Der shape-color macht Probleme und vielleicht solltest Du umdenken. Was wenn Du anstelle den Hintergrund entsprechend dem Status veränderst bei gleichbleibender Icon-Farbe. Den Shape-Color Selektor bräuchtest Du in diesem Fall mit der Button-Card nicht.

Screenshot 2024-10-28 215522
Screenshot 2024-10-28 2155221028×582 52.7 KB

PS: Ich weiß, nichts ist schlimmer als Code wegzuwerfen, an dem man lange gesessen hat, ärgere ich mich auch jedes Mal drüber aber manchmal verrennt man sich sonst.