Steckdosenleiste MSP844

[Popey]

Irgendwie schaffe ich es nicht den zustand der einzelnen Schalter entsprechen ein und Aus farblich zu verändern. Weis hier jemand wie das geht?

Bubble-Karte

tippe oder füge den Code hier ein
```type: custom:bubble-card
card_type: button
button_type: switch
modules:
  - card_text_style
  - icon_container_color
  - sub_button_coloring
entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet
name: Stk-Leiste
icon: mdi:power-plug
force_icon: false
show_state: true
show_attribute: false
tap_action:
  action: none
sub_button_coloring:
  button_1:
    entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_1
    on_color: green
    of_color: yellow
  defaults:
    off_color: green
    on-color: yellow
    off_icon_color: red
  button_2:
    entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_2
    on_color: Black
    on_icon_color: green/yellow
  button_4:
    entity: sensor.msp844_24082022621773540304c4e7ae09e1df_consumption_5
    on_color: green
    on_icon_color: black/red
sub_button:
  - entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_1
    name: Fernseher
    icon: mdi:television-box
    show_name: false
    show_state: true
    tap_action:
      action: toggle
    hide_when_parent_unavailable: false
    state_background: false
    show_background: true
    show_attribute: false
    show_last_updated: false
    show_last_changed: false
    show_icon: true
  - entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_2
    name: Soundbar
    icon: mdi:soundbar
    show_state: true
    state_background: false
    show_background: true
    tap_action:
      action: toggle
  - entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_3
    name: Johan
    icon: mdi:desktop-classic
    tap_action:
      action: toggle
    show_state: true
  - entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_4
    name: Frei
    icon: mdi:power-socket-eu
    tap_action:
      action: toggle
    show_state: true
  - entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_5
    name: USB
    icon: mdi:usb-port
    tap_action:
      action: toggle
    show_state: true
card_text_style:
  name:
    color: black
    opacity: 1
icon_container_color:
  color: amber
flat_style:
  card_styles:
    prime_color:
      - 0
      - 250
      - 146
styles: |-
  styles: |
    .bubble-icon {
      color: blue !important;
    }
    .bubble-sub-button-1 {
      background-color: lightgreen !important;
    }
    .bubble-sub-button-2 {
      background-color: lightgreen !important;
    }
    .bubble-sub-button-3 {
      background-color: lightgreen !important;
    }
    .bubble-sub-button-4 {
      background-color: lightgreen !important;
    }
    .bubble-sub-button-5 {
      background-color: lightgreen !important;
    }
scrolling_effect: true
show_icon: true
show_name: true
button_action:
  tap_action:
    action: none

[DirtyBird]

Auch wenn ich hier bestimmt gleich verkloppt werde, ich habe die KI Copilot gefragt.

Danke für den YAML‑Ausschnitt – da steckt der Fehler schon drin.  
Bei der subbuttoncoloring‑Sektion hast du ein paar Tippfehler und Überschreibungen, die verhindern, dass die Farben dynamisch wechseln:

1. Schreibfehler bei den Keys
- Du hast ofcolor statt offcolor → dadurch wird der Wert ignoriert.  
- Bei defaults steht on-color mit Bindestrich, korrekt ist on_color.

2. CSS‑Override blockiert die Dynamik
Im Block styles: setzt du für alle .bubble-sub-button-* ein festes background-color: lightgreen !important;.  
Das überschreibt jede dynamische Farbänderung aus subbuttoncoloring. Deshalb bleiben die Buttons immer grün.

3. Ungültige Farbwerte
- oniconcolor: green/yellow oder black/red sind keine gültigen CSS‑Farben. Erlaubt sind z. B. green, yellow, #ff0000, rgb(0,255,0) usw.  
- Wenn du mehrere Farben willst, müsstest du mit linear-gradient(...) arbeiten, nicht mit green/yellow.

---

✅ So sollte es aussehen (gekürzt und korrigiert):
`yaml
subbuttoncoloring:
  defaults:
    off_color: green
    on_color: yellow
    officoncolor: red
  button_1:
    entity: switch.msp844...outlet_1
    on_color: green
    off_color: yellow
  button_2:
    entity: switch.msp844...outlet_2
    on_color: black
    oniconcolor: yellow
`

Und den ganzen styles:‑Block mit background-color: lightgreen !important; solltest du entfernen oder anpassen, sonst überschreibt er alles.

---

👉 Mein Tipp:  
- Erst die Tippfehler korrigieren (offcolor, oncolor).  
- Ungültige Farbnamen ersetzen.  
- Testweise den CSS‑Block rausnehmen.  
Dann sollten die Schalterfarben wie gewünscht wechseln.

Willst du, dass ich dir den kompletten Code einmal bereinigt und korrigiert zusammenschreibe, damit du ihn direkt testen kannst?

[Popey]

Zuerst mal danke für die Unterstützung, das mit der KI war gar keine so schlechte Idee zumal ich keinerlei IT Kenntnisse habe.
Bubblekartte neu gemacht und KI um Unterstützung gefragt aber auch nicht wirklich der durchbruch.
Ich hab auch versucht die Hintergrundfarbe über Module zu generieren aber das Modul (Sub-button coloring based on entity condition) ist nur für Temperaturen gemacht.

hier der neue Code die Sub-Buttons haben allerdings bei ein die gleiche Hintergrundfarbe wie die Bubblekarte und bei aus weis.
Kannst du bitte noch mal drüber schauen?

[Popey]

type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet
name: Stk-Leiste
icon: mdi:power-plug
show_state: true
show_icon: true
show_name: true
tap_action:
  action: none
scrolling_effect: true
modules:
  - sub_button_coloring
sub_button_coloring:
  button_1:
    entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_1
    on_color: "#4CAF50"
    off_color: "#FFEB3B"
    icon_color: "#000000"
  button_2:
    entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_2
    on_color: "#4CAF50"
    off_color: "#FFEB3B"
    icon_color: "#000000"
  button_3:
    entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_3
    on_color: "#4CAF50"
    off_color: "#FFEB3B"
    icon_color: "#000000"
  button_4:
    entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_4
    on_color: "#4CAF50"
    off_color: "#FFEB3B"
    icon_color: "#000000"
  button_5:
    entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_5
    on_color: "#4CAF50"
    off_color: "#FFEB3B"
    icon_color: "#000000"
sub_button:
  - entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_1
    name: Fernseher
    icon: mdi:television-box
    show_state: true
    tap_action:
      action: toggle
    show_background: true
  - entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_2
    name: Soundbar
    icon: mdi:soundbar
    show_state: true
    tap_action:
      action: toggle
    show_background: true
  - entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_3
    name: Johan
    icon: mdi:desktop-classic
    show_state: true
    tap_action:
      action: toggle
    show_background: true
  - entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_4
    name: Frei
    icon: mdi:power-socket-eu
    show_state: true
    tap_action:
      action: toggle
    show_background: true
  - entity: switch.msp844_24082022621773540304c4e7ae09e1df_outlet_5
    name: USB
    icon: mdi:usb-port
    show_state: true
    tap_action:
      action: toggle
    show_background: true