2022.12 Color states are broken/unusable

Ah, it’s gone from a default theme.

1 Like

Where ??? I have no clue what you are talking about😳. To repair something what was not broken???

Here is the Theme with the full list of all available states:

State Colors:
  modes:
    light:
      state-default-color: "#44739E"
      state-alarm-armed-color: "#F44336"
      state-alarm-arming-color: "#FF9800"
      state-alarm-pending-color: "#FF9800"
      state-alarm-triggered-color: "#F44336"
      state-alert-color: "#F44336"
      state-automation-color: "#FFC107"
      state-binary-sensor-alerting-color: "#F44336"
      state-binary-sensor-color: "#FFC107"
      state-calendar-color: "#2196F3"
      state-camera-color: "#2196F3"
      state-climate-auto-color: "#4CAF50"
      state-climate-cool-color: "#2196F3"
      state-climate-dry-color: "#FF9800"
      state-climate-fan-only-color: "#00BCD4"
      state-climate-heat-color: "#FF5722"
      state-climate-heat-cool-color: "#FFC107"
      state-climate-idle-color: "#BDBDBD"
      state-cover-color: "#9C27B0"
      state-fan-color: "#00BCD4"
      state-group-color: "#FFC107"
      state-humidifier-color: "#2196F3"
      state-input-boolean-color: "#FFC107"
      state-light-color: "#FFC107"
      state-lock-jammed-color: "#F44336"
      state-lock-locked-color: "#F44336"
      state-lock-pending-color: "#FF9800"
      state-media-player-color: "#3F51B5"
      state-person-home-color: "#4CAF50"
      state-person-zone-color: "#2196F3"
      state-remote-color: "#2196F3"
      state-script-color: "#FFC107"
      state-sensor-battery-high-color: "#4CAF50"
      state-sensor-battery-low-color: "#F44336"
      state-sensor-battery-medium-color: "#FF9800"
      state-sensor-battery-unknown-color: "#BDBDBD"
      state-siren-color: "#F44336"
      state-sun-day-color: "#FFC107"
      state-sun-night-color: "#673AB7"
      state-switch-color: "#FFC107"
      state-timer-color: "#FFC107"
      state-update-color: "#4CAF50"
      state-update-installing-color: "#FF9800"
      state-vacuum-color: "#009688"
    dark:
      state-default-color: "#44739E"
      state-alarm-armed-color: "#F44336"
      state-alarm-arming-color: "#FF9800"
      state-alarm-pending-color: "#FF9800"
      state-alarm-triggered-color: "#F44336"
      state-alert-color: "#F44336"
      state-automation-color: "#FFC107"
      state-binary-sensor-alerting-color: "#F44336"
      state-binary-sensor-color: "#FFC107"
      state-calendar-color: "#2196F3"
      state-camera-color: "#2196F3"
      state-climate-auto-color: "#4CAF50"
      state-climate-cool-color: "#2196F3"
      state-climate-dry-color: "#FF9800"
      state-climate-fan-only-color: "#00BCD4"
      state-climate-heat-color: "#FF5722"
      state-climate-heat-cool-color: "#FFC107"
      state-climate-idle-color: "#BDBDBD"
      state-cover-color: "#9C27B0"
      state-fan-color: "#00BCD4"
      state-group-color: "#FFC107"
      state-humidifier-color: "#2196F3"
      state-input-boolean-color: "#FFC107"
      state-light-color: "#FFC107"
      state-lock-jammed-color: "#F44336"
      state-lock-locked-color: "#F44336"
      state-lock-pending-color: "#FF9800"
      state-media-player-color: "#3F51B5"
      state-person-home-color: "#4CAF50"
      state-person-zone-color: "#2196F3"
      state-remote-color: "#2196F3"
      state-script-color: "#FFC107"
      state-sensor-battery-high-color: "#4CAF50"
      state-sensor-battery-low-color: "#F44336"
      state-sensor-battery-medium-color: "#FF9800"
      state-sensor-battery-unknown-color: "#BDBDBD"
      state-siren-color: "#F44336"
      state-sun-day-color: "#FFC107"
      state-sun-night-color: "#673AB7"
      state-switch-color: "#FFC107"
      state-timer-color: "#FFC107"
      state-update-color: "#4CAF50"
      state-update-installing-color: "#FF9800"
      state-vacuum-color: "#009688"

I’ve changed only state-binary-sensor-color.
You can play around with it and change every state to whatever you like. :slight_smile:

13 Likes

But it does send a message!

Hats-off to the devs for taking a chance on an upgrade idea; you’ll see no flaming rants from me for an application I use for free! Thank you for all your efforts!

From a feedback perspective, I truly like the concept of being able to define state colors. Like others, the contrast on some of the state colors was poor so I did end up creating a theme so I could set most of them to back to the amber color when displaying in the UI. It’s just what I prefer.

If possible, it would be great to be able to simply select a color for the state in the UI, by entity, (much like how we have the option of selecting which binary type to use like Battery, Problem, etc.) versus creating a theme. Then we’d have best of both worlds!

10 Likes

Note that when you have modified colours of icons in Picture Elements cards the situation needs a little more explaining

An example is

  - entity: binary_sensor.front_door
    icon: mdi:door
    style:
      '--rgb-state-binary-sensor-color': 255,0,0
      '--paper-item-icon-color': green
      left: 44%
      top: 81%
    type: state-icon

and for a cover

  - entity: cover.kitchen_curtain
    style:
      '--rgb-state-cover-color': 255, 152, 0
      '--paper-item-icon-color': green
      left: 44%
      top: 4%
    tap_action:
      action: toggle
    type: state-icon

So you still need to use the old --paper-item-icon-color for the off colour.

For the on colour things have become much more difficult. Before it was the same css variable no matter what type of entity. Now you have to know which type of entity you deal with and then find which new variable to put in the card code. It was not really friendly before. And now it got worse.

I would really hope we instead eventually can make this easier for the user by having a simple documented set of color_on and color_off variable that you can define for each entity

Any solution using themes changes colours everywhere. That may be good for many. But as I explained earlier, I have several binary things where I use different on and off colours. I cannot even see how I change the off colour uniquely for covers in the new CSS.

5 Likes

Agree. On setting the colours I made a similar remark earlier. Put an UI somewhere in the settings and done. I would be happy with that!

6 Likes

Great comment and 100% agree!

This is the very first time when I get seriously upset with the release…
While it works for me in 100% wihout any (functional) breaking changes, my theme got screewed up with new color schemes and some undocumented variables being added without notyfying users. Again. Enough is enough… We were asking for more reliable, predictable and consistent color schemes for years. Finally we got exciting news that now we have ’ Shiny new state colors!’… that quite some number of users do not like (just count the posts that are against these colors!). And to be well understood - I’m not questioning the palette as such. For some it might work and some might really like it! I recognize this. But once again developers made the decision to change color variables in themes, so work of hundreds of people using custom themes was destroyed. And again for years we were asing for good documentation of themes and and variables used, all we got was referencing to source files with no comments. Just count the number of posts across the forum, comments where people are sharing their discoveries of what variable is responsible for what UI color! Some of them takes literaly weeks to be discovered! Yet you ignore us, not even considering to mention that you made such breaking change (yes it is breaking UI in many, many cases, making it unreadable). All we get for our complains is that we are welcome to participate in beta… not everyone can/is willing/is capable to participate with their production systems. Basic respect to users would require to document and clearly explain to community that such changes are made in release notes, as you do for any other functional change. This would at least give users possibility to counteract and update their themes to revert unwelcome changes and make UI again as it was intended by them.
Do we deserve such minimal effort to give us this info in clear text?

26 Likes

Not really. Ever heard of the boy who cried wolf?

1 Like

Yep. It send a message

I agree with the OP. I spent days (weeks?) tweaking my themes, because I use a slightly different one for the buttons that control each room/function in my setup. I used to be able to look at the console and quickly see that I left my laptop on, or the shop lights, etc. Now, they are all yellow when lit. In my particular case, reverting back to the ‘standard’ colors is pointless – I rarely use them.

Strangely enough, a few of my themes did not break after the upgrade, even though I tend to use the same minimal theme structure for each button theme. I’m going to have to compare them to see if I can spot the differences. What I really need is a list of syntax for the supported elements, and maybe more importantly, the ones that no longer work, since there has never been a full set of documentation for creating themes. (Probably not going to happen, right?)

Regards,
-BW

4 Likes

I don’t know why there’s no documentation. That’s always baffled me. Seems like something that should be in the regular documentation, not just the development documentation.

5 Likes

Should this thread really be flagged as “solved?”

The OP of the this spinoff just happened to be the first message moved. If it were just about his specific issues problem, it would not have been broken out to begin with.

3 Likes

I flagged the post that has the solution to fix themes, don’t read too much into it…

hi there, can u also show the left side/whole part of the card config code? just want to see what’s the syntax. thanks!

As I keep pointing out, we have been told there are only two supported elements for themeing.

primary-color and accent-color

Everything else is done at our own risk and won’t be documented.

I just updated and it has changed the colors for some items on all the themes I made. How do I remove the new colors? Is there a way to downgrade just the front-end portion?

1 Like

I am still interested in an official explanation why new variables now defined as “255,255,255” instead of “rgb(255,255,255)” or “0xffffff” or “red”.

1 Like

The community guides category would be a good place to document such things, as it comes with the necessary disclaimers.

1 Like