Strange behavior button card with color_type card

[DozoG]

Checklist

• [ V] I updated the card to the latest version available
• [ V] I cleared the cache of my browser

Describe the bug
Button toggles a HA input_boolean. Button works correctly
When the boolean is true (ON) the color of the button is the specified color
First time the button goes OFF, color of the button turns the color of the card that the button is on
Then ON again for the specfied color
Second time the button goes OFF, color of the button turns black

Version of the card
Version:

To Reproduce
This is the code for the button I used:

  - type: custom:button-card
    template: icon_button2
    entity: input_boolean.trigger_br_standing
    icon: mdi:floor-lamp-outline
    color: yellow
    name: Floor
    tap_action:
      action: toggle

This is the template (from which I have already removed any references to color, but still shows the behavior)

  multiline_secondary: true
  icon_button2:
    aspect_ratio: 4/3
    color_type: card
    layout: vertical
    show_label: true
    show_name: true

I have noticed that while editing the code in thedashboard editor, the preview on the right side, shows the behavior as it did with a previous version of the card.

Screenshots
This is what a dashboard with some input_booleans ON and some OFF look like

• On the PC in a chrome browser

Note that the thick and square border are from the template icon_button2 , which is a copy of template icon_button , that I used to see if removing stuff would solve the problem. (I gave it square corners to distinguish them from the original.)

This is what it looks like in the preview (Also on PC in chrome browser)

This is what it used to look like and what I expect it to look like

The incorrect (black) button color happens on any device.

Desktop (please complete the following information):

• Browser [chrome]
• Version [142.0.7444.176]

Smartphone (please complete the following information):

• Device: [Android 14]
• HomeAssisstant companian app

[DozoG]

The problem remains if I change the input_boolean for a switch

[RomRider]

I'm not really sure what is happening here. Probably some issue with your theme CSS variables.
Please try the default theme and see if it exhibits the same behavior.

[DozoG]

I am not sure I follow your suggestion as you meant them.
I have removed the "template" from the code belonging the card in the dashboard. I order to keep the appearance of a bright colored button when the helper or the switch is on, I have added the "color_type" key to that card directly (so not using the template)
The behavior is the same. The ON state is as desired, the OFF state toggles between black and background color of the card.

[DozoG]

If you have an example for color_type: card , I would be happy to try that.

[DozoG]

I have just made some "progress" that may help you figure out where my mistake (or the bug) is.
I copied the horizontal-stack card and made a small change to one of them.
I think I removed the line (key) type: custom: hui-element from the first instance of that entities card named BEDROOM.
The I saw the following:

Every button on the top BEDROOM card returns ALWAYS to the black background in the OFF state
Every button on the bottom (duplicate) BEDROOM card returns ALWAYS to the purple bacground in the OFF state. Though even for the card, the first time OFF state may still be black)
(So the second copy of the enities card shows the expected behavior)

Then I refresh my browser and the behavior of the top and bottom entity cards is exactly opposite. (I thought I had written it down incorrectly, but I confirmed it with a second screendump.

It does not matter if I used the template: icon_button OR no template but the color_type: card

[RomRider]

I was speaking about Home assistant's theme you're using. What makes everything purple and blue in your case. There's probably an issue with that or some undefined CSS variables used by button-card.

You should check in the developers tool of your browser what color is set for the button while being black to understand why this is happening (probably an unset or malformed CSS variable in your home assistant's theme).

[DozoG]

Ok, I think I understand what you mean.
Unfortunately, its 00:20 here. I will try it some time tomorrow after work.
Thank you.

[DozoG]

copied "styles" from the DevTools in chrome:
Second card named BEDROOM (This is while checking, the card that may initially be black, but eventually always turns purple when OFF)

BUTTON FLOOR (OFF- PURPLE)
--button-card-color: rgb(225, 225, 225); --button-card-light-color: var(--state-input_boolean-off-color, var(--state-input_boolean-inactive-color, var(--state-inactive-color))); --button-card-light-color-no-temperature: var(--state-input_boolean-off-color, var(--state-input_boolean-inactive-color, var(--state-inactive-color))); --button-card-ripple-color: inherit;

BUTTON Bedstand (OFF BLACK)
--button-card-color: rgb(225, 225, 225); --button-card-light-color: var(--state-input_boolean-off-color, var(--state-input_boolean-inactive-color, var(--state-inactive-color))); --button-card-light-color-no-temperature: var(--state-input_boolean-off-color, var(--state-input_boolean-inactive-color, var(--state-inactive-color))); --button-card-ripple-color: inherit;

BUTTON Bedstand (OFF PURPLE)
--button-card-color: rgb(225, 225, 225); --button-card-light-color: var(--state-input_boolean-off-color, var(--state-input_boolean-inactive-color, var(--state-inactive-color))); --button-card-light-color-no-temperature: var(--state-input_boolean-off-color, var(--state-input_boolean-inactive-color, var(--state-inactive-color))); --button-card-ripple-color: inherit;

Seems they are all identical. So maybe I am not using the DevTools correctly??
The styles for each individual button are hidden very deep in the html of the body.

[DozoG]

So, I have created a completely new view on my dashboard. Then I created a simple example of just the two buttons on an entities card.

type: entities
entities:
  - type: custom:button-card
    color_type: card
    entity: input_boolean.trigger_br_standing
    icon: mdi:floor-lamp-outline
    color: yellow
    name: Floor
    tap_action:
      action: toggle
  - type: custom:button-card
    template: icon_button2
    entity: input_boolean.trigger_br_bed
    icon: mdi:desk-lamp
    color: magenta
    name: Bedstand
    tap_action:
      action: toggle
show_header_toggle: false
title: BEDROOM
card_mod:
  style: |
    ha-card {
      --ha-card-background: darkslateblue;
      color: var(--primary-color);
    }

The top button has no template, the second button uses the simple icon_button2 template with no reference to color, other than the color_type: card

Both buttons toggle between "dardslateblue" and black in the off state.

[DozoG]

[DozoG]

OKAY THEN.
I started to play with the code for these. I placed a card mod section after ONLY in the first button:

type: entities
entities:
  - type: custom:button-card
    color_type: card
    entity: input_boolean.trigger_br_standing
    icon: mdi:floor-lamp-outline
    color: yellow
    name: Floor
    tap_action:
      action: toggle
      card_mod:
        style: |
          ha-card {
            --ha-card-background: darkslateblue;
            color: var(--primary-color);
          }  
  - type: custom:button-card
    template: icon_button2
    entity: input_boolean.trigger_br_bed
    icon: mdi:desk-lamp
    color: magenta
    name: Bedstand
    tap_action:
      action: toggle
show_header_toggle: false
title: BEDROOM
card_mod:
  style: |
    ha-card {
      --ha-card-background: darkslateblue;
      color: var(--primary-color);
    }

In the preview, BOTH buttons act as hoped for. Every OFF state has the darkslateblue background.
Then I save the configuration. The result is back to toggeling for both buttons.
Re-entering into edit mode, now also the preview toggles between black and purple.

type: entities
entities:
  - type: custom:button-card
    color_type: card
    entity: input_boolean.trigger_br_standing
    icon: mdi:floor-lamp-outline
    color: yellow
    name: Floor
    tap_action:
      action: toggle
    card_mod:
      style: |
        ha-card {
          --ha-card-background: darkslateblue;
          color: var(--primary-color);
        }  
  - type: custom:button-card
    template: icon_button2
    entity: input_boolean.trigger_br_bed
    icon: mdi:desk-lamp
    color: magenta
    name: Bedstand
    tap_action:
      action: toggle
show_header_toggle: false
title: BEDROOM
card_mod:
  style: |
    ha-card {
      --ha-card-background: darkslateblue;
      color: var(--primary-color);
    }

Changing the indentation of the card_mod code (to coincide with the button-card, rather than with the action) has ALMOST EXACTLY the same result. Its ok for both buttons in the preview. It fails in the final view
But this time it works as hoped for in the preview when I enter the editor again.