Bubble Card mit Hintergrundfarbe im Hex Format

Allgemein
1

Hallo,
ich habe mir mal die Bubble Card angeschaut und muss sagen gefällt mir.

Nur habe ich ein Problem, ich möchte im unteren Code die Farben im Hex Format eingeben.

Kann mir dabei wer helfen?

      - type: horizontal-stack
        cards:
          - type: custom:bubble-card
            card_type: button
            entity: switch.licht
            icon: mdi:lightbulb
            show_state: true
            name: Arbeitsbereich
            styles: |
              .switch-button {
                background-color: ${state === 'on' ?  'purple' : 'black'} !important;
              }

Grüße Georg

2

Moin, hast du hier zufällig eine Lösung zu gefunden? Stehe gerade vor derselben Frage :wink:

3

Laut Doku kannst du auf jeden Fall mit rgba arbeiten. Als Beispiel ist folgendes angegeben:

styles: | 
  .bubble-button-card-container {
    background: rgba(12,120,50,0.5) !important;
  }
4

Tatsächlich funktioniert es bei mir nun auch mit HEX.
Allerdings lässt sich einfach der Hintergrund vom Icon nicht einfärben. Ich habe nun folgenden Code im Einsatz, aber der Hintergrund vom Icon ist immer noch rot hinterlegt, sobald ich die Lampe einschalte (rot ist hier die Farbe der Lampe, ich verstehe auch nicht ganz, wie ich das generell abschalten kann, dass der Button immer die Farbe der Lampe wiederspiegelt)…

.bubble-icon {
    color: ${state === 'on' ?  '#A18F91' : '#ffffff'} !important;
  }

.bubble-icon-container {
    opacity: 1 !important;
    background: ${state === 'on' ?  '#4f4557' : '#4F4557'} !important;
  }

.bubble-button-background {
    opacity: 1 !important;
    background-color: ${state === 'on' ? '#A18F91' : '#5C5367'} !important;
  }

Weiß da einer was?
Bildschirmfoto 2024-08-12 um 19.50.23

5

geht das nur bei bubble button oder geht das auch bei den bubble climate card , habs zumindest nicht hinbekommen