Ignore change color only when state it's 'on'

[HAlover99]

Ciao,

I try to modify the color conditionally with state, when the state it's off works fine... when the state it's on... the color change to orange but after 1 second rewrite with default ( light-blue ) color, in below the configuration and video.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#plug-cantina'
    name: Cantina
    icon: m3s:shelves-rounded-filled
  - type: custom:bubble-card
    card_type: separator
    name: Prese
    icon: mdi:power-socket-it
    styles: |
      .separator-container div:last-child {
        opacity: 1 !important;
      }
  - type: grid
    columns: 1
    square: false
    cards:
      - type: custom:bubble-card
        card_button: switch
        card_type: button
        icon: mdi:fridge
        entity: switch.raffreddino
        layout: horizontal
        name: Pozzetto
        show_state: true
        sub_button:
          - entity: switch.raffreddino
            icon: mdi:chart-bar
            tap_action:
              action: navigate
              navigation_path: '#consumi-cantina'
        styles: >-
          .bubble-button-card-container {
            background: ${state === 'on' ? 'rgb(100, 80, 40)' : 'rgb(31, 43, 67)'} !important;
            height: 54px !important;
            width: 100% !important;
          }
          .bubble-icon-container {
            --mdc-icon-size: 24px !important;
            left: 3px !important;
            min-height: 35px !important;
            min-width: 35px !important;
            background: rgba(63, 70, 84) !important; 
          }
          .bubble-sub-button {
            height: 40px !important;
            width: 40px !important;
            background: rgba(63, 70, 84) !important; 
          }

https://github.com/user-attachments/assets/b943b3f6-3473-484f-9122-968c9f4e6a55

[Clooos]

Hi, you need to use this custom style instead, this example is from the Templates section in the documentation.

.bubble-button-background {
    opacity: 1 !important;
    background-color: ${state === 'on' ? 'blue' : 'red'} !important;
  }