Wrong card styling when refreshing screen and when changing state

[mathgoy]

I am created some custom button cards for entities with different styles depending on the entity state.

Here is how it looks when the entity is off (Working OK):

Here is how it looks when I click on the card to turn it on (Working OK):

PROBLEM: Here is how it looks if I refresh the browser while the entity is ON (Wrong Style):

PROBLEM: Here is how it looks when the entity is turned ON using another browser (or an automation) (Wrong Style):

It doesn't work with any of my browsers on any on my devices EXCEPT with the Home Assistant app on iOS The Browsers I used:

• safari on iOS and MacOS (doesnt work)
• chrome on iOS, MacOS, Windows11 (doesnt work)
• brave on OS, MacOS, Windows11 (doesnt work)
• edge on Windows11 (doesnt work)
• Home Assistant app (does work)
• Fully Kiosk on Android (doesn't work)

Version of the card Version: 4.1.1

To Reproduce This is the configuration I used:

button_card_templates:
  light:
    show_state: true
    tap_action:
      action: toggle
    styles:
      icon:
        - color: rgba(var(--my-grey),0.8)
      card:
        - min-width: 120px
        - max-width: 120px
        - max-height: 120px
        - min-height: 120px
        - margin: auto
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      img_cell:
        - align-self: start
        - text-align: start
        - justify-content: start
        - padding-right: 50px
      name:
        - justify-self: start
        - padding-left: 12px
        - font-weight: bold
        - letter-spacing: 0.2em
        - font-size: 17px
        - padding-top: 15px
      state:
        - justify-self: start
        - padding-left: 12px
        - font-weight: bold
        - font-size: 11px
        - opacity: 0.6
        - padding-top: 0px
        - opacity: 0.6
        - letter-spacing: 0.2em
        - text-transform: lowercase
    state:
      - value: 'on'
        styles:
          icon:
            - color: rgb(var(--my-orange)
          card:
            - background-color: rgba(var(--my-orange),0.2)
            - box-shadow: var(--my-box-shadow)
    card_mod:
      class: soft-ui
      style: |
        ha-card {
          --primary-text-color: rgb(var(--my-grey));   
        }

Can you guys spot what I am doing wrong?

[pedolsky]

Try again with triggers_update: all

[dsellers1]

I've notice similar symptoms after a recent update. Interestingly, it seems to only affect two buttons used for switch entities but does not seem to affect the buttons for lights and fan. Here's the template that I use as a base for all of my buttons. (I've used this template for about two years.)

button_card_templates:
  generic_custom_button:
    show_icon: true
    show_name: true
    show_state: false
    color_type: icon
    triggers_update: all
    state:
      - color: rgb(28, 28, 28)
        operator: '=='
        value: 'off'
        styles:
          name:
            - color: rgb(128, 128, 128)
      - color: yellow
        operator: '=='
        value: 'on'
        styles:
          name:
            - color: rgb(255, 255, 255)
    styles:
      card:
        - background: transparent;
        - '--ha-card-box-shadow': none
        - border-radius: 20px
        - '--mdc-ripple-color': white
        - '--mdc-ripple-press-opacity': 1.5
        - border: 1px solid var(--primary-text-color)
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    double_tap_action:
      action: none

trigger_update: all was already set, per @pedolsky's suggestion. This is what the button is supposed to look like: Firefox seems to load without issue, but Fully Kiosk Browser shows the wrong state colors. Both browsers respond to the state change but show the wrong state colors. In this screenshot from Firefox, the switch is toggled off, then turned back on, and then the browser is refreshed. Here's the yaml for that button.

type: custom:button-card
template: generic_custom_button
tap_action:
  action: call-service
  service: nodered.trigger
  service_data:
    entity_id: switch.nodered_goodnight
  target: {}
entity: switch.nodered_goodnight
show_state: false
show_icon: true
icon: mdi:weather-night
name: Good Night
color_type: card
color: black
styles:
  icon:
    - animation:
      - rock 3s linear infinite
extra_styles: |
  @keyframes rock {
  0% {transform: rotatez(15deg)}
  25% {transform: rotatez(30deg)}
  50% {transform: rotatez(15deg)}
  75% {transform: rotatez(0deg)}
  100% {transform: rotatez(15deg)}}

With this button, I override the template's color_type of icon with card (because even though the entity is on, I want it to show as off). If I remove color_type: card from the button's yaml, the button responds like it is supposed to when toggled (albeit the colors being reversed from what I actually want). While writing this post, I tried to do some experimenting and I'm more confused now than when I began. It seems like the state: from the template is not being overridden when defined in the button and only partially overrides the template when defined in styles:. Added this to the button's yaml:

state:
  - color: yellow
    operator: '=='
    value: 'off'
    styles:
      name:
        - color: red
  - color: yellow
    operator: '=='
    value: 'on'
    styles:
      name:
        - color: red
      styles:
        icon:
          - color: red
          - animation:
            - rock 3s linear infinite
        name:
          - color: red

The icon does show red based on the style: but the name still uses the template's state: (gray and white) even though I defined it in the card to be red (in both the state and style sections). This happens in both Firefox and FKB. In this screenshot, the switch is Off > On > Off At this point, I don't want if I want to point the blame at an issue with color_type: or state:...