2022.12 Color states are broken/unusable

Configuration
66

tbh: I don’t care much about the color changes in this release… at some places, I really like the idea … but on others… I don’t really know, if it is working as intended… :slight_smile:

Here’s a small example of my thermostats (Homematic IP device, integrated per Homematic (IP) local [custom component]…

All thermostats listed in an entity-list:
grafik

there’s no difference in the color - although, they have different states.

When I open the “more info” dialog, there are different Icon Colors…
But, the color depends on the “profile” - not on the state:

Idle (Auto) && Heating (Auto)
grafik
grafik

While the thermostats in profile (Heat) have another color - independend if they are heating or Idle:
grafik
grafik
grafik

So, I would recommend, the colors should be set by the state (Heating, Idle, etc) - and not by the selected profile.
At least, that would be more intuitive…

And: Why are the colors not reflected in the entities card, like it is the case for other entities?
(And no, I am not aware that I have used battery cards in this example)

grafik grafik

3 Likes
67

Not sure if it is related - check this.

69

it seems like that might be due to something overriding the colors? My thermostat always shows as red when set to heat mode in all the cards (like yours does in more-info). I agree, I used to use the color as an indication of if it is currently heating which is no longer possible

2 Likes
70

GUI changes always seem to cause a lot of anguish and understandably so as it’s the part that we all interact with on daily basis. This is just another repeat of what happened when the settings got moved around. Personally I feel there needs to be a lot more research before pushing these changes out to users.

Anyway, trying to be constructive and to find some sort of solution for the users it’s upset. Is there any way that we could have a template theme provided that we can load in configuratoin.yaml that restores the previous colour palette and then people can make modifications from there to suit themselves? This would save everyone reinventing the wheel to try and do the same thing.

Just my two thoughts.

3 Likes
71

No. Only two theming colours are officially supported.

72

Regarding the changed colors:
Again, I am just a user and only one personal opinion. But it feels like strange things like this are done (creating work for people who style their dashboards) but all the real problems are ignored.
More or less all (core) cards behave differently and often inconsistenly. Each has bugs that are never fixed and none are in any way streamlined.
The stack cards being a prime example where it is an absolute pain for a newbie to figure out how to style them because they have nothing in common with the other cards.

Maybe it would be better to gather the problems with the core cards ans fix those. Then add theming ability via UI. Right now it is a huge guessing game and cumbersome search using dev tools in browsers to figure out how to bend the cards without breaking them.

The basics of dashboards were a problem, not the colors :smiley:

The entire frontend now seems to primarily work because of card mods/external cards. Without those no layout or styling would work and many cards would show strange behavior on different devices.

6 Likes
73

Is that still applicable after this update, or has the documentation just not been updated to reflect the 2022.12 release?

74

I’m using like this and it is working fine:

  - type: state-icon
    entity: lock.vw_passat_door_locked
    style:
      '--rgb-state-lock-jammed-color': var(--rgb-amber-color)
      '--rgb-state-lock-unlocked-color': var(--rgb-red-color)
      '--rgb-state-lock-locked-color': var(--state-icon-color)
      top: 90%
      left: 35%
1 Like
75

That was updated for this release.

76

Hi All,

I’ve started to create an “old style” HA Dark theme. :slight_smile:
Just create a new theme.yaml and copy this code:

home_assistant_old_style:
  primary-background-color: "#111111"
  card-background-color: "#1c1c1c"
  secondary-background-color: "202020"
  primary-text-color: "#e1e1e1"
  secondary-text-color: "#9b9b9b"
  disabled-text-color: "#6f6f6f"
  divider-color: rgba(225, 225, 225, 0.12)
  mdc-ripple-color: "AAAAAA"
  state-switch-color: "#ffd700"
  state-automation-color: "#ffd700"
  state-cover-color: "#ffd700"
  state-fan-color: "#ffd700"
  state-light-color: "#ffd700"
  state-binary-sensor-color: "#ffd700"
  state-input-boolean-color: "#ffd700"
  state-person-home-color: "#008000"
  badge-person-not-home-color: "#636B75"
  state-person-zone-color: "#800080"
  state-climate-heat-color: "#800080"
  state-climate-idle-color: "#000000"
  app-header-text-color: "#e1e1e1"
  app-header-background-color: "#101e24"

Change it theme under your user and enjoy good old HA colors. :slight_smile:

Just started to work on it, so it will take a few hours.
But I guess you’ve got the idea. :slight_smile:

7 Likes
77

The problem in my humble opinion:

during the “open smart home” event (or how this was called) - Paulus already showed some sketches, in which direction the UI will change.

at that moment, I just thought: "Oh please - not yet another ‘alexa / smart home app’ copy.
The problem:

Nearly all of them are using similar themes.
And - HomeAssistant is trying to follow a trend where “Design” overcomes functionallity.

And that is something, I really would question here…

The Team should provide the technical platform - but from UI, I would really love if the user could decide how the UI should look like.
I don’t want to loose options I do have now - just to get another app that’s looking like the Amazon Alexa App, or the Hue App…
I really love the opportunity, to get Information out from the Dashboard - and not only have controlls.
That’s one BIG advantage of HomeAssistant compared to other smarthome apps.

And Beleive me:
If HA will go in this direction - and Matter support will be rolled out on other platforms as well… there’s probably no need for having HomeAssistant, if I CAN do the same (with the same UI) within the other apps as well…

13 Likes
78

Yes, and this is NOT supported anymore:

    style:
      '--rgb-state-lock-locked-color': rgb(255,0,0)
      top: 90%
      left: 80%

or

    style:
      '--rgb-state-lock-locked-color': red
      top: 90%
      left: 80%
79

Hi, please have a look here:

I’ve already created an old (pre-2022.11) theme… so maybe, we can merge both things together?

1 Like
80

It is supported, it is literally working for me right now

Screen Shot 2022-12-08 at 10.51.30 AM
Screen Shot 2022-12-08 at 10.51.30 AM997×722 102 KB

81

He’s referring to the use of rgb(..)

1 Like
82

No, check this var:
изображение

Not a big issue if compared to other events in the world.
Just users need to rewrite their themes, their card-mod code, other code like “button-card-based”, their templates for colors etc.

1 Like
83

Thanks, I mistook this as meaning the part above, not the part below

1 Like
84

Not necessarily true. I avoiding this whole color kerfuffle by coding all my button based cards to just use --icon-active-color (or whatever it is) for on’s and --icon-color for off’s. I didn’t do it on purpose either, just dumb luck.

1 Like
85

This is a good lesson for us to make our setups less dependent on some changes which may become breaking.

I used my personal vars in themes for special cases, they still work surely.
But everything involving “paper-item-icon-active-color” is broken.

Bad news is that “paper-item-icon-active-color” is gone. So it may reflect your UI as well.

2 Likes
86

I have 2 questions as I am also trying to make theme Developer-Proof (to not use bad words there)
Both for old Dark-Default-Theme:

  1. What is a color for not turned on switch or automation? (Should be something grey like #212121 but could not find a variable for it)

    image
    image915×625 86.7 KB

  2. What is a color and variable for Energy item on graph (while - light grey thing , here it’s black)

    image
    image2388×1668 243 KB

My Dark Theme:

# Colors:
--rgb-primary-color: rgb(3, 169, 244)
--rgb-accent-color: rgb(255, 152, 0)
--rgb-disabled-color: rgb(189, 189, 189)
--rgb-primary-text-color: rgb(33, 33, 33)
--rgb-secondary-text-color: rgb(114, 114, 114)
--rgb-text-primary-color: rgb(255, 255, 255)
--rgb-card-background-color: rgb(255, 255, 255)
--rgb-red-color: rgb(244, 67, 54)
--rgb-pink-color: rgb(233, 30, 99)
--rgb-purple-color: rgb(156, 39, 176)
--rgb-deep-purple-color: rgb(103, 58, 183)
--rgb-indigo-color: rgb(63, 81, 181)
--rgb-blue-color: rgb(33, 150, 243)
--rgb-light-blue-color: rgb(3, 169, 244)
--rgb-cyan-color: rgb(0, 188, 212)
--rgb-teal-color: rgb(0, 150, 136)
--rgb-green-color: rgb(76, 175, 80)
--rgb-light-green-color: rgb(139, 195, 74)
--rgb-lime-color: rgb(205, 220, 57)
--rgb-yellow-color: rgb(255, 235, 59)
--rgb-amber-color: rgb(255, 193, 7)
--rgb-orange-color: rgb(255, 152, 0)
--rgb-deep-orange-color: rgb(255, 87, 34)
--rgb-brown-color: rgb(121, 85, 72)
--rgb-grey-color: rgb(158, 158, 158)
--rgb-blue-grey-color: rgb(96, 125, 139)
--rgb-black-color: rgb(0, 0, 0)
--rgb-white-color: rgb(255, 255, 255)
--primary-color: rgb(2,136,209);
--rgb-state-default-color: rgb(68, 115, 158)

# Header:
app-header-background-color: "#000000"
app-header-text-color: rgb(229, 229, 234)

primary-text-color: "#ffffff" # buttons text, menu text and settings description text
text-primary-color: "#ffffff"
secondary-text-color: "#ffffff"
text-light-primary-color: "#ffffff"

state-on-color: "#66a61e"
state-off-color: "#ff0029"
state-home-color: "#66a61e"
state-not_home-color: "#ff0029"

card-background-color: "#1e1d1d" # card color
primary-background-color: "#000000" # color behind everything
secondary-background-color: "#8a8a8a" # left-slide menu background color

disabled-text-color: "#6f6f6f"
divider-color: rgba(225, 225, 225, 0.12)
mdc-ripple-color: "AAAAAA"
state-switch-color: "#ffd700"
state-automation-color: "#ffd700"
#state-cover-color: "#ffd700"
#state-fan-color: "#ffd700"
#state-light-color: "#ffd700"
state-binary-sensor-color: "#ffd700"
state-input-boolean-color: "#ffd700"
state-person-home-color: "#008000"
badge-person-not-home-color: "#636B75"
state-person-zone-color: "#800080"

rgb-state-light-color: var(--rgb-amber-color)
rgb-state-humidifier-color: var(--rgb-amber-color)
rgb-state-fan-color: var(--rgb-amber-color)
rgb-state-climate-fan-only-color: var(--rgb-amber-color)
rgb-state-climate-idle-color: var(--rgb-disabled-color)
rgb-state-remote-color: var(--rgb-amber-color)
rgb-state-vacuum-color: var(--rgb-amber-color)
rgb-state-media-player-color: var(--rgb-amber-color)
rgb-state-input-boolean-color: var(--rgb-amber-color)
input-idle-line-color: "#212121"
input-disabled-fill-color: "#212121"

rgb-state-sensor-battery-high-color: var(--rgb-green-color)
rgb-state-sensor-battery-low-color: var(--rgb-red-color)
rgb-state-sensor-battery-medium-color: var(--rgb-orange-color)
rgb-state-sensor-battery-unknown-color: var(--rgb-disabled-color)


# Climate:
# state-climate-auto-color: "#008000"
# state-climate-eco-color: "#00ff7f"
# state-climate-cool-color: "#2b9af9"
# state-climate-heat-color: "#ff8100;
# state-climate-manual-color: "#44739e"
# state-climate-off-color: "#8a8a8a"
# state-climate-fan_only-color: "#8a8a8a"
# state-climate-dry-color: "#efbd07"
# state-climate-idle-color: "#8a8a8a"

# Energy:
# energy-grid-consumption-color: "#488fc2"
# energy-grid-return-color: "#8353d1"
# energy-solar-color: "#ff9800"
# energy-non-fossil-color: "#0f9d58"
# energy-battery-out-color: "#4db6ac"
# energy-battery-in-color: "#f06292"
# energy-gas-color: "#8E021B"
# energy-water-color: "#00bcd4"
2 Likes