How to use colors in 4.0.0?

[fxxer]

Is your feature request related to a problem? Please describe. I had a simple template card, for all lights and switches. It worked like a charm. After upgrade I can't find the rigth configuration, to get to previous setup. Please help.

button_card_templates:
  switch:
    hold_action:
      action: more-info
    tap_action:
      action: toggle
    type: custom:button-card
    color: auto
    color_type: card

After update. TV lamp is on and water is on, it's confusing.

Describe the solution you'd like How can I replicate this behaviour in 4.0.0? I tried styles, different colours setting using var(--paper .. with no luck.

[pergolafabio]

Same question, all my card icons are white, not sure how need to define colors again, if you have more info, pls post

[pickonedev]

state:
  - value: 'on'
    styles:
      name:
        - color: '#850016'
      card:
        - background-color: '#fdd835'
  - value: 'off'
    styles:
      name:
        - color: '#44739e'

[pergolafabio]

and for the icons? how can i reperesent the real color of the icon based on its state?

[pickonedev]

This is how I done in the past, because some entities won't give the color to the addon... (which now seems that was 100% broken and this is the only way)

So... for name and icon, changing the color for on/off

state:
  - value: 'on'
    styles:
      name:
        - color: '#fdd835'
      icon:
        - color: '#fdd835'
  - value: 'off'
    styles:
      name:
        - color: '#44739e'
      icon:
        - color: '#44739e'

I don't like this, of course, because you need to add more lines, but for now, seems that this is the only idea for a workaround

[pergolafabio]

yes, but thats a fixed color for the ON state, i want to represent the real color, i also have leds, wheni have for example the led on "green", i also want the icon to be green

[pickonedev]

Maybe a helper which represent the value of the led and regarding this, will change the color as well... But yeah, this is not ok... Just a workaround, I'm not the developer of the addon :-|

[Mariusthvdb]

this must be a regression introduced in the later stages of the beta testing, as I had not seen it before and can comfort the light cards no linger show a color icon, or other color elements according to the color attribute of the light. IN fact, I dont see an icon at all...

otoh, I am on beta 2023.8.x now and also see the sliders on those lights are no longer coloring, so it might very well be a core issue..?

Seeing this in core tile card, and mushroom card too..

[fxxer]

state:
  - value: 'on'
    styles:
      name:
        - color: '#850016'
      card:
        - background-color: '#fdd835'
  - value: 'off'
    styles:
      name:
        - color: '#44739e'

This is quick solution, but I am afraid not optimal for light / dark themes.

[pergolafabio]

Maybe a helper which represent the value of the led and regarding this, will change the color as well... But yeah, this is not ok... Just a workaround, I'm not the developer of the addon :-|

So the icon not getting the real color maybe a bug?

[Mariusthvdb]

Yes seems to be. No use continuing here if it's a core bug...

Please see https://discord.com/channels/330944238910963714/427516175237382144/1135166058752376872 and add your findings if they are the same . It will help prevent this bug from being released Wednesday

[pergolafabio]

Hmm, for me the slider changes when I change color, it's just in this button card I don't see the icon changing colors...

Probably for me a misconfiguration? Can you post your config? Or do you use "color: auto"

[Mariusthvdb]

Ive always uses auto-non-temperature for my light card.

and

      - border-top: >
          [[[ return (entity.state === 'on')
              ? '0.5rem solid var(--button-card-light-color, var(--icon-color-on))'
              : 'none'; ]]]

for my border top which doesnt work anymore either https://github.com/custom-cards/button-card/assets/33354141/ea325d16-fd00-4b38-a4f3-461226167ffe

[Mariusthvdb]

wait, I did some extra cache refreshing and gave it a restart, and now see the color back on the border top, and the core button card. and Tile card.

not so much the custom:button-card:

pure cards:

seems a clear issue: custom:button-card no longer sets the correct color to the icon.

[pergolafabio]

ok, thnx for confirming :-)

[Mariusthvdb]

this is a bug, and shouldnt be phrased as a config question imho, could op change that please?

minimal required code to get the issue:

type: custom:button-card
entity: light.kayon
color: auto #or auto-non-temperature

[RomRider]

Sorry 🙏 Fixing it right now

[github-actions[bot]]

:tada: This issue has been resolved in version 4.0.1 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[pergolafabio]

Thnx for fast fix!

[fxxer]

If you are using color_type: card , the colors are in my opinion reverted between dark / light theme :(

[RomRider]

The off color is different than before, now it's --state-inactive-color (exactly what HA does) so for color_type: card, you might want to redefine that maybe?

states:
  - value: 'off'
    styles:
      card:
        - background-color: "whatever you want" 

[RomRider]

I'll try something for color_type: card... Hold on

[RomRider]

Is this what you expect? Or would you also expect the icon when off to be the same as the default button?

HA Button is the default button from HA and custom is custom:button-card:

• OFF

• ON

[fxxer]

Is this what you expect? Or would you also expect the icon when off to be the same as the default button?

HA Button is the default button from HA and custom is custom:button-card:

• OFF
• ON

Pretty much, what I am going for :) is it working correctly in light theme? Small detail, in the "on" custom: + color_type: card I use white icon and text, but that I can change..

      - value: 'on'
        styles:
          icon:
            - color: white
          name:
            - color: white

[github-actions[bot]]

:tada: This issue has been resolved in version 4.1.0-dev.1 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[Sethenor]

For me it's still showing the wrong colors. Like mentioned in the documentation: Setting this to auto-no-temperature will behave like home-assistant's default, ignoring the temperature of the light. By default, if the entity state is off, the color will be var(--paper-item-icon-color), for on it will be var(--paper-item-icon-active-color)

Yet if I use auto-no-temperature it still shows the wrong color:

But if I define the color specifically for the first button like the documentation says (var(--paper-item-icon-active-color)) it should do, it works:

[RomRider]

Sorry, forgot to update the documentation. For on it will use whatever HA uses as on color for your entity's domain, this is how it's done:

  properties.push(
    `--state-${domain}-${stateKey}-color`,
    `--state-${domain}-${activeKey}-color`,
    `--state-${activeKey}-color`,
  );

If you want to replace the color, you'll have to define it in the card itself for the on state.

[Mariusthvdb]

sorry if I missed the obvious change in the latest couple of updates, but I can not get the icon color to work for lights anymore (dev3). No matter what I try, the icon only uses the default on/off colors:

type: custom:button-card
entity: light.kayon
name: 'custom button: Kayon'
color: auto-no-temperature

above is a Hue light (which integration seems to have an issue with the colors) so I also tested a Tradfri light:

same thing....

more sophisticated buttons show the var(--button-card-light-color) is actually correct (see the top border and other elements I use those on)

it's the icon that doesnt get colored anymore

downgrading to 4.0.1 returns those colored icons alright:

or the pure cards:

[github-actions[bot]]

:tada: This issue has been resolved in version 4.1.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[spider7611]

Not working for me too. Have yeelight and before when changed the light color changed the button color too. But with the latest release 4.1.0 it is only show the default yellow color when the light on and set it to red color...

[RomRider]

Alright, let me review that again... Could you please open a separate issue for that?

[RomRider]

Alright, I found the issue... don't create a new issue, it's fine

[Mariusthvdb]

have to +1 on it not being fixed unfortunately

4.1.0:

[github-actions[bot]]

:tada: This issue has been resolved in version 4.1.1 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[Mariusthvdb]

4.1.1: fixed!

thank you very much!

[spider7611]

Working, thank you!

[fxxer]

Well... I have one more issue, if I define color as var(--paper-item-icon-color), then the color of the card in off state is reverted. It should be as the color of covers buttons in screenshot. Same applies for color defined as rgb(0, 122, 255).

Light Mode

Dark Mode

button_card_templates:
  switch:
    hold_action:
      action: more-info
    tap_action:
      action: toggle
    type: custom:button-card
    color: var(--paper-item-icon-active-color)
    color_type: card
    state:
      - value: 'on'
        styles:
          icon:
            - color: white
          name:
            - color: white

[Mariusthvdb]

you shouldnt be using those paper colors anymore really, cant you follow the new state colors used in HA?

[fxxer]

you shouldnt be using those paper colors anymore really, cant you follow the new state colors used in HA?

Ok, but it should work with color as rgb(0, 122, 255) or this shouldn't be used anymore?

I changed it like this. My aim was to have lights buttons in auto color and buttons for switch in blue..

button_card_templates:
  switch:
    hold_action:
      action: more-info
    tap_action:
      action: toggle
    type: custom:button-card
    color: auto
    color_type: card
    state:
      - value: 'on'
        color: rgb(0, 122, 255)
        styles:
          icon:
            - color: white
          name:
            - color: white

[Mariusthvdb]

its a bit odd, because you have 2 color options set. (auto and the rgb)

why not create 2 different templates for switch and light. hen have the light template follow the light, so set that to auto

for the switch, use the state: option if you want, and, set a card background to the color you desire in the styles object.

[fxxer]

I have 2 different templates for switch and light .. I was just lazy to copy both :) what I am trying to say is when using color as rgb, the card background color is reverted as mentioned before.

For example:

button_card_templates:
  switch:
    hold_action:
      action: more-info
    tap_action:
      action: toggle
    type: custom:button-card
    color: rgb(0, 122, 255)
    color_type: card

Light Mode

Dark Mode

[Mariusthvdb]

o right, I am sorry. tbh I cant help you out here, I never use a fixed color on a card, so cant tell what it should be like.... if I dont want an auto colored card, I always use the styles, and define the colors there.

for best issue tracking, maybe open a new, since this one is closed and maybe no longer followed up.

[RomRider]

I have 2 different templates for switch and light .. I was just lazy to copy both :) what I am trying to say is when using color as rgb, the card background color is reverted as mentioned before.

For example:

button_card_templates:
  switch:
    hold_action:
      action: more-info
    tap_action:
      action: toggle
    type: custom:button-card
    color: rgb(0, 122, 255)
    color_type: card

Light Mode

Dark Mode

You might want to open a new issue for that so that I don't forget to fix it, please

[fxxer]

Ok, here it is https://github.com/custom-cards/button-card/issues/754

[doronazl]

how do i modify my card to work again ?

https://pastebin.com/cx6i71wz

it wont show the white color background when the state is on

if i turn it off and on again it will show it, but then dissappears again later, seems like a bug , inconsistent