2022.12 Colors changed

[Gonioul]

Checklist

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

Describe the bug
Inactive button became blue instead of grey.
Active button became black (day mode) or white (night mode) instead of yellow.

Version of the card
Version: 3.4.2

Same with desktop firefox or android companion.

[cba42]

+1

[lewiatanx]

After updating HA to 2022.12.0 there is a problem with the color "var(--button-card-light-color)"
:(

[vbokaty]

+1

[geertmeersman]

+1

[RomRider]

I'll have a look over the weekend

[Farmer-Eds-Shed]

I've the same issue with colors if left to default.

entity: switch.hall_lights
icon: mdi:ceiling-light
name: Hall Lights
type: custom:button-card
state:
  - value: unavailable
    styles:
      card:
        - filter: opacity(40%)
      icon:
        - filter: invert(70%)
      name:
        - filter: invert(70%)
      state:
        - filter: invert(70%)

Specifying the colors for states fixes it though.

entity: switch.hall_lights
icon: mdi:ceiling-light
name: Hall Lights
type: custom:button-card
state:
  - value: unavailable
    styles:
      card:
        - filter: opacity(40%)
      icon:
        - filter: invert(70%)
      name:
        - filter: invert(70%)
      state:
        - filter: invert(70%)
  - value: 'on'
    color: rgb(255, 255, 0)

[gryzli133]

same issue here:

hard to recognize what is on and what is off. Happened after HA update yesterday

[geertmeersman]

I have quickly added a template with a state and card background, so everyone is happy again in the house :-)

[emanuelsilvapt]

+1

[PierreScerri]

+1

[Camatobe]

the new tile-cards in 2022.12 use the current color of the entity (e.g. color of light)
Maybe there could be the same behavior here.

But yes, the default should be grey for off and yellow for on.

[Mithrox]

+1 but it does also relate to paper-buttons-row as well, so its a system wide thing, not just related to this custom card.

[FlexxFR]

+1
But what I don't understand is that some of my cards are still working
both on

both off

Same config, except the entity ofcourse

`
type: custom:button-card
entity: light.verlichting_hal_main
name: Plafond
color_type: icon
color: auto
icon: mdi:lightbulb
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
hold_action:
action: more-info
icon_height: 60px
state:

• value: 'on'
  icon: mdi:lightbulb
• value: 'off'
  icon: mdi:lightbulb-off
  color: lightgrey
  styles:
  card:
  • padding: 0%
  • border-radius: 0%
    style:
    .: |
    ha-card {
    background-color: transparent !important;
    box-shadow: none !important;
    border-style: none;
    }
    `

the only difference between both is that one not working only has brightness, the one that is still working also has colour temperature.

[Farmer-Eds-Shed]

@FlexxFR you definitely don't have a color specified for the on state of buttons still working?

Mine were working where colour was specified, so I set colours for them all now.

[FlexxFR]

@FlexxFR you definitely don't have a color specified for the on state of buttons still working?

Mine were working where colour was specified, so I set colours for them all now.

Yeah, that is a possibility, but when nothing is specified per state, it uses the default stated on top of the config: color: auto
This works fine for the second example, and worked before the update to 2022.12.
This way the icon also follows the color_temp or rgb color when the light is on.

[pejotigrek]

while checking the dashboard with inspector in chrome - it looks like --state-icon-active-color and --paper-item-icon-active-color are gone in 2022.12.x, but I've noticed two new colors: --state-on-color: #66a61e [green] and --state-off-color: #ff0029 [red]. not sure if those are official, but I didn't saw them before in my installation.

FYI: "active" yellow color was #fdd835, rgb(253,216,53)

[pejotigrek]

my quick'n'dirty fix - add this to your resources:

- url: "/local/custom/custom_style.css?v=1"
  type: css

then, create file /www/custom/custom_style.css and insert this inside:

:root {
  --state-icon-active-color: #fdd835;
  --paper-item-icon-active-color: var(--state-icon-active-color);
}

reboot HA, clear browser cache, profit! active icons are now yellow :)

also: you can add any css style there to override/expand your config without fiddling with themes and other options.

[antisane]

Any updates on this? Seems the problem lies in HA itself, this is part of an "improvement" made to December release, without listing it as a "Breaking Change". Since this change I cannot find a way to have the card color change in relation to a light's light level. Did all the colors go static? Grrr. I just got my dashboard looking the way I wanted last month, and now I may have to start over? Grrr....

https://community.home-assistant.io/t/i-dislike-the-2022-12-color-changes/499890

[Farmer-Eds-Shed]

@antisane, how could it be listed as a breaking change, this is a third party integration and not part of Home Assistant?

Entity state color change was listed as a notable breaking change for developers, which covers this issue.
https://developers.home-assistant.io/blog/2022/12/07/entity-color-changes/

Have you tried the fix above by @pejotigrek? It should keep things right until this integration is updated by it's maintainer.

[RomRider]

Given the (big) change in HA, it's going to take a bit more time than expected, but I'll fix it.
In the meantime to come back to pre 2022.12 color types for button-card, you can either redefine those variables in a button card template and use the template everywhere:

old_colors:
  styles:
    card:
      - '--state-icon-active-color': '#fdd835'
      - '--paper-item-icon-active-color': var(--state-icon-active)

Or use @pejotigrek's solution

[bschatzow]

@pejotigrek I tried what you said above and mine are still broken. Was this changed again in 2022.12.6 or maybe I did something incorrectly?

[pejotigrek]

@bschatzow I didn't updated to .6 yet, so can't tell if they changed something again, so maybe double check your config? spaces in css file are not as important as in yaml, but quotes, commas, brackets, colons and semicolons are. also make sure the path you've added to resources is correct.

[gryzli133]

@pejotigrek I did the way you post here and it works fine with 2022.12.4.

@bschatzow try this way:

you can just unpack and paste this file:

custom_style.zip

then from GUI -> settings -> dashboards -> three dots -> resources

add new resorce:

/local/custom/custom_style.css?v=1

select style sheet

sorry everything is in Polish, but you should be able to find the right options ;-)

[bschatzow]

Thank you for taking the time to show this. I have this already and my file is identical to yours. I modified the resource file to load the file. It must be something else I am doing incorrectly. I did a restart of HA. Do you need to reboot the device?

[gryzli133]

restart HA again, then try to open with other browser or in inkognito mode, to be sure, it has nothing to do with cache, if this not helped, then you really need someone who is more experienced in this subject :)

[pejotigrek]

@gryzli133 in my case it was always the cache, when speaking about resource files [js, css etc.]. so that would be the first place to look at.

@bschatzow in the resource path try to change ?v=1 at the end of the line to something else, like ?v=2 [it suggests that "something changed in the url" and should force browser to read the file again, not from the cache]. second thing - if you're using chrome browser at desktop, open inspector [ctrl-shift-i] and it will "unlock" special options for refresh - after inspector is opened, right-click on the "refresh page" button, menu should popup, choose last option [something like "clear cache and force refresh", but I can't remember how it goes originally]. that should delete cache for displayed page and re-read all resources. I'm not sure if it's the same in other browsers.

[bschatzow]

I see it the same on all of my devices. I cleared cache on all. Incognito mode was no difference. I'll check again when I get home to see if the url is loading correctly in chrome. Is there an a change to the individual card that I can make to force the on state color?

[pejotigrek]

Is there an a change to the individual card that I can make to force the on state color?

yes, use the solution @RomRider provided in the above comment - this is via button-card template, but you can omit the template and just add style definition to the card itself.

EDIT: also check here you can add colors based on state

[bschatzow]

Thanks. For some reason the css file is not loading in chrome. Says not found. (mwc-list-item-base.ts:224 GET https://xxxxxx.duckdns.org:8123/local/custom/custom_style.css?v=1 net::ERR_ABORTED 404 (Not Found)) Not sure how as it is in the local directory. Windows sees it, but for some reason chrome can't find it. This is the error in the chrome console:
Uncaught (in promise) https://xxxx:8123/local/custom/custom_style.css?v=2. Not sure why it is still looking for v=2 as I changed it back to v=1. I'll try the code from RomRider.

      - cards:
          - entity: switch.tasmota1_ds
            icon: 'mdi:lamp'
            name: DS_light
            show_state: true
            styles:
              card:
                - '--state-icon-active-color': '#fdd835'
                - '--paper-item-icon-active-color': var(--state-icon-active)
                - width: 80px
                - height: 100px
              color: rgb(28, 128, 199)
              state:
                - color: 'rgb(255, 0, 0)'
                  value: 'off'
            tap_action:
              action: toggle
            type: 'custom:button-card'

Still not yellow.

[bschatzow]

Still didn't get css to load. With the help of @ildar Gabdullin I was able to get the yellow working again.

    cards:
      - cards:
          - entity: switch.tasmota1_ds
            icon: 'mdi:lamp'
            name: DS_light
            show_state: true
            styles:
              card:
                - '--paper-item-icon-active-color': yellow
                - '--paper-item-icon-color': gray
                - width: 80px
                - height: 100px
            state:
              - value: 'on'
                styles:
                  state:
                    - color: red
              - value: 'off'
                styles:
                  state:
                    - color: gray
            tap_action:
              action: toggle
            type: 'custom:button-card' 

[Gonioul]

Took me a while to understand you need to have your account in advanced mode to be able to have the 3dots menu on top right of dashboard settings...
Then you can add /local/custom/custom_style.css?v=1 as a css resource.

[Mariusthvdb]

After updating HA to 2022.12.0 there is a problem with the color "var(--button-card-light-color)"
:(

adding to this particular issue on that variable, Id like to report that where this button-card-light-color defaulted to button-card-light-color-no-temperature in case of a light not supporting color/temp, iow only using supported_color_modes: brightness , that too is no longer working.

example:

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

no more shows a border top on those lights, and

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

seems to somewhat mitigate that.
However, that icon-color-on is hard coded in a theme, and no more related to any setting on the light...

so, its a backup, but not replacement

[MorganMarchese]

I found the "bug" in the card itself, at least for my use case. It's in button-card.ts in the _setConfig method between line 1005 and 1011 where color_on and color_off are defined.

Those are using the --paper-item-icon-active-color and --paper-item-icon-color CSS variables to set the config, and since those variables are no longer supported, color_on and color_off are likely null/empty strings. So in my case, my light entity only supports brightness (no color_temp, min/max mireds), so _getColorForLightEntity runs:

color = applyBrightnessToColor(this._getDefaultColorForState(state), (state.attributes.brightness + 245) / 5);

and _getDefaultColorForState relies on the deprecated CSS Vars for On/Off default values.

The problem is, officially, HA says they only support --primary-color and --accent-color (https://www.home-assistant.io/integrations/frontend/), the ha-style.ts file in the repo lists others, and as of 2022.12, different device types have different CSS vars, but I'm not sure what the "equivalent" replacement is for --paper-item-icon-color and --paper-item-icon-active-color

[mpfaffdev]

Given the (big) change in HA, it's going to take a bit more time than expected, but I'll fix it. In the meantime to come back to pre 2022.12 color types for button-card, you can either redefine those variables in a button card template and use the template everywhere:

old_colors:
  styles:
    card:
      - '--state-icon-active-color': '#fdd835'
      - '--paper-item-icon-active-color': var(--state-icon-active)

Or use @pejotigrek's solution

Thank you for the workaround @RomRider and for your GREAT work at all!
Just a quick note:
I had to use var(--state-icon-active-color) instead of var(--state-icon-active).
So the template would be something like:

old_colors:
  styles:
    card:
      - '--state-icon-active-color': '#fdd835'
      - '--paper-item-icon-active-color': var(--state-icon-active-color)

[tomlut]

This template no longer works as expected:

    state:
      - styles:
          icon:
            - color: var(--state-binary-sensor-on-color)
          state:
            - color: var(--state-binary-sensor-on-color)
        value: >
          [[[ return entity.attributes.value && entity.attributes.value in [
          'on', 'disarmed','home'] ]]]
      - styles:
          icon:
            - color: var(--secondary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: >
          [[[ return entity.attributes.value && entity.attributes.value in [
          'off', 'armed_away', 'armed_night','not_home'] ]]]

The icon changes colour for binary sensors but not device trackers or the alarm panel.

The state label does not change colour for any entity.

[Mariusthvdb]

shouldnt those at least be

var(--state-binary_sensor-on-color)

?

its surprising the one obvious error in your theming variables does not appear to prevent the binary's from changing color..

testing that, I can confirm:

background-color: var(--state-binary_sensor-on-color)

to be effective contrary to

background-color: var(--state-binary-sensor-on-color)

which does not work correctly. That is to say, it defaults to the system settings...

on the label: you don't mention it or card: in your card config, so how would it change at all?

adding:

        label:
          - color: var(--state-binary_sensor-on-color) #var(--text-color-on)

to the card works just fine, where without that, it again sets the system default

[tomlut]

Thanks, yeah that was a copy/paste mistake. Fortunately in only one template - the one I copied here.

Unfortunately changing it to an underscore does not help.

The icon changes colour for binary sensors but not device trackers or the alarm panel.

The state label does not change colour for any entity.

[tomlut]

it's the javascript:

Changing this:

        value: >
          [[[ return entity.attributes.value && entity.attributes.value in [
          'on', 'disarmed','home'] ]]]

to

value: 'on'

Does change the state text colour.

[Mariusthvdb]

what if you use includes(value), like:

        entity_picture: >
          var path = '/local/afvalwijzer/';
          var ext = '.png';
          var type = ['papier','gft','plastic','restafval'];
          return (type.includes(state)) ? path + state + ext : path + 'kliko_geen' + ext;

it's the technique I use in my js templates mostly, maybe give it a try?

          var type = ['on', 'disarmed','home'];
          return (type.includes(entity.attributes.value))

[tomlut]

So like this?

value: >
   [[[ var type = ['on', 'disarmed','home'];
       return (type.includes(entity.attributes.value)) ]]]

No change.

[Mariusthvdb]

how odd, might be something more going on.
the other way of checking against a list of values I use is

styles:
  icon:
    - color: >
        [[[ if (entity.state === 'open') return 'gold';
            if (['opening','closing'].includes(entity.state)) return 'orange';
            return 'green'; ]]]

if that wont work, I guess we need to see the complete card ;-)

[tomlut]

button_card_templates:
  binary_sensor_button:
    aspect_ratio: 4/3
    hold_action:
      action: none
    label: |
      [[[ entity.last_changed ]]]
    show_last_changed: true
    show_name: true
    show_state: true
    state:
      - styles:
          icon:
            - color: var(--state-binary_sensor-on-color)
          state:
            - color: var(--state-binary_sensor-on-color)
        value: |
          [[[ var type = ['on', 'disarmed','home']; 
              return (type.includes(entity.attributes.value)) ]]]
      - styles:
          icon:
            - color: var(--secondary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: >
          [[[ return entity.attributes.value && entity.attributes.value in
          ['off', 'armed_away', 'armed_night','not_home'] ]]]
      - icon: mdi:alert
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - box-shadow: none
        - border-radius: 10px
        - border: solid 0px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"n n n" "i s s" "l l l"'
        - grid-template-rows: auto 33% auto
        - grid-template-columns: 33% auto auto
      icon:
        - width: 28px
        - padding: 0px 0px 0px 0px
        - margin: 0% 0% 0% 0%
      label:
        - justify-self: left
        - font-size: 12px
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: left
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
      state:
        - justify-self: left
        - font-size: 12px
        - padding: 0px 0px 0px 3px
        - color: var(--state-binary_sensor-off-color)
    tap_action:
      action: more-info

[Mariusthvdb]

hmm, quick read does make me wonder about the color stylings you use both in the generic section under styles: and in the top settings under state:

don't these styles: stylings overwrite the state: stylings?

[tomlut]

No, other way around. At least it used to. I also tried removing the styles: without effect. The only thing that has made a difference is replacing the javascript for the value: with a string.

[Mariusthvdb]

does the template not return the wrong output for a state value? I mean, it would return True or False, and not the actual value..?

this works:

      - value: >
          [[[ if (entity.state == 'home' || entity.state == 'disarmed') return entity.state;]]]

as does:

      - value: >
          [[[ if (['home','disarmed'].includes(entity.state)) return entity.state;]]]

test card:

  - type: custom:button-card
    entity: alarm_control_panel.ha_main_alarm
    state:
      - value: >
          [[[ if (['home','disarmed'].includes(entity.state)) return entity.state;]]]

        styles:
          icon:
            - color: pink
          card:
            - color: green
      - value: >
          [[[ if (['off', 'armed_away', 'armed_night','not_home'].includes(entity.state)) return entity.state;]]]
        styles:
          icon:
            - color: blue
          card:
            - color: red

note I dont use state: but card:

[tomlut]

https://github.com/custom-cards/button-card#state-templates

[tomlut]

Yes!

That works. Thanks Marius.

[Mariusthvdb]

on the other syntax: that requires the extra line operator: template

  - type: custom:button-card
    entity: alarm_control_panel.ha_main_alarm
    state:
      - operator: template
        value: >
          [[[ return (['home','disarmed'].includes(entity.state)); ]]]
        styles:
          icon:
            - color: pink
          card:
            - color: green
      - operator: template
        value: >
          [[[ return (['off','armed_away','armed_home','not_home'].includes(entity.state));]]]
        styles:
          icon:
            - color: blue
          card:
            - color: red

[Ricks88]

Same problem still

code:

button_card_templates:
  light_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: more-info
    tap_action:
      action: toggle
    label: >
      [[[ var bri = entity.attributes.brightness &&
      Math.round(entity.attributes.brightness / 2.55);  if
        (entity.state === 'on') return (bri ? (bri+"%") : 'Aan'); else return "Uit"; ]]]
    layout: icon_label
    show_label: true
    show_name: true
    state:
      - styles:
          card:
            - border: solid 1px var(--button-card-light-color)
            - box-shadow: 0px 0px 6px 1px var(--button-card-light-color)
          label:
            - color: var(--button-card-light-color)
        value: 'on'
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
        value: 'off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i l l" "n n n"'
        - grid-template-rows: 45% auto
        - grid-template-columns: 33% auto
      icon:
        - width: 30px
        - padding: 0px 0px 0px 0px
        - color: var(--button-card-light-color)
      label:
        - font-size: 14px
        - justify-self: right
        - padding: 0px 3px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 2px 0px
        - color: var(--primary-text-color)
        - white-space: normal

Result:

I can use fixed colors as described above, but than they do not change with the brightness %

[github-actions]

🎉 This issue has been resolved in version 4.0.0-dev.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 4.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀