2022.12 Color states are broken/unusable

brad.trout · January 6, 2023, 2:37pm

OMG @arganto - thank you, thank you, thank you! I moved my state_color from its own entry to under card: and all is working again. It had been on a separate line forever and used to work, so apparently something along the way changed. Nonetheless, I am now back to where I wanted to be! Thanks again!

huu · January 7, 2023, 5:21am

Colors are very personal choose, I haven’t come across any two person(s) that agree on one color theme let alone millions. i am very thankful for the hard work the developers put in. But why upgrade and change the colors for everyone and make everyone change color back, instead of just keep it same and let people change it when they ready? cover default color is purple? and alarm arm color is green? it funny how we all flock here trying to “fix” this

parautenbach · January 7, 2023, 7:42am

While I agree with some parts of what you’re saying, it needs to be said that forums typically suffer from strong observation bias. The vast majority of people will post about problems and compliments will be few. Threads like this are also an echo chamber. I think there are over a hundred thousand known HA installations. It’s hard to know the true picture without proper research. In the end, this did upset a lot of people, that’s for sure, and it’s on the higher end of issues I’ve seen here over the years, but the true extent of it is hard to tell.

maxym · January 7, 2023, 4:46pm

Let me pick what you wrote. it’s 100% true. Devs should take it into consideration too.

randr · January 23, 2023, 1:45pm

Is there still no way to have a color for Alarm Disarmed? I cant seem to get it back to normal. With “solution” in this thread i can get nearly everything but Alarm Disabled back to normal.

KennethLavrsen · January 23, 2023, 1:55pm

The method I use is

In configuration.yaml

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/kenneth-colours.js

And the …config/www/kenneth-colours.js looks like this

document.documentElement.style.setProperty('--rgb-state-cover-color', 'var(--rgb-orange-color)');
document.documentElement.style.setProperty('--rgb-state-alarm-disarmed-color', 'var(--rgb-green-color)');
document.documentElement.style.setProperty('--rgb-state-alarm-armed-color', 'var(--rgb-red-color)');

So I define disarmed as green and armed as red.
Hope this helps

randr · January 23, 2023, 6:55pm

tried this @KennethLavrsen but didnt seem to change.

KennethLavrsen · January 23, 2023, 11:15pm

And you restarted Home Assistant?

I see that you use a different Alarm card than the standard one I use. I use the standard alarm-panel card and see green for disarmed and red for armed

randr · January 24, 2023, 1:23pm

Yeah if I used alarm card with keypad it is green. But not what I use. So strange!

piitaya · January 25, 2023, 6:40pm

Hello

Some news about state colors. It will change nothing if you do not use custom themes but it will help theme developers.

With the 2023.2 beta release, we did some improvements for colors :

No more RGB format for themes variables. You can use hexadecimal or css color directly in themes (e.g. red, amber, green)
Official theme support for state color variables : Home Assistant Frontend - Home Assistant. State colors can be customized at different levels : state, state domain and state domain device class. (e.g. state-person-work, state-binary_sensor-smoke-on)
in Lovelace card, the inactive state can be now customized (e.g. locked lock color can be customized).

GH2user · January 25, 2023, 6:53pm

@piitaya
Great work on the coding and the docs so we can now set our own colours for almost everything it seems. Maybe with hindsight this moment would have been a better time to roll out the changes as happened in 2022.12.

randr · January 25, 2023, 11:49pm

Thank you! I cannot tell you how many times ive looked at my dashboard and thought my alarm was in a offline state or not set to armed or not armed when it was armed. will be happy to get things how im used to seeing them.

huu · January 27, 2023, 3:56am

Would the developers consider re-think about the grey coloir. This traditionally it use as being disable or non-functional. The term “grey-out” have a meaning when something is not working. … sorry about the spelling colour above, i try to edit it but my delete button is grey-out.

Mariusthvdb · January 27, 2023, 7:44am

thanks Paul,

noticed these were merged: Allow coloring inactive states in dashboard cards by piitaya · Pull Request #15177 · home-assistant/frontend · GitHub and Entity state colors theming by piitaya · Pull Request #14831 · home-assistant/frontend · GitHub

inactive color customization is extremely appreciated, only need to figure out how to set different inactive colors depending on a domain

arganto · January 27, 2023, 9:01am

state-{domain}-(active|inactive)-color

Mariusthvdb · January 27, 2023, 9:36am

well, I had my opened covers color gold with:

  state-cover-color: '#ffd700'

and currently, they all are purple again.

trying the inactive (for closed) to be green:

  state-cover-color: '#ffd700'
  state-cover-inactive-color: '#008000' #green

does show the inactive/closed to be green, but the regular still being purple.

have to change that to

  state-cover-active-color: '#ffd700'
  state-cover-inactive-color: '#008000' #green

so, when deviating from the default color, we need to do that for both?

btw, color names work too now:

  state-cover-active-color: gold
  state-cover-inactive-color: maroon

which is very very nice indeed

piitaya · January 27, 2023, 9:42am

state-{domain}-color doesn’t exist anymore. You need to use state-{domain}-(active|inactive)-color or state-{domain}-{state}-color

Mariusthvdb · January 27, 2023, 9:45am

is it ‘or’ meaning we can use both

state-cover-active-color And state-cover-open-color

or, is that depending on domain, so eg we use

state-cover-active-color but for eg automation we need to use state-automation-on-color?

in the process of rewriting this:

  state-icon-color: '#636B75'
#   rgb-state-switch-color: 255, 215, 0 #(paper-item-icon-active-color: gold)
#   main-on-color: '#ffd700' #255, 215, 0
  state-script-color: '#f00000' # red
  state-switch-color: '#ffd700' # gold
  state-automation-color: '#ffd700'
  state-cover-active-color: gold #'#ffd700'
  state-cover-inactive-color: maroon #'#008000' #green

  state-fan-color: '#ffd700'
  state-light-color: '#ffd700'
  state-binary-sensor-color: '#ffd700'
  state-input-boolean-color: '#ffd700'
  state-group-color: '#ffd700'
  state-update-color: '#f44336' #red
  state-person-home-color: '#008000'
  state-person-not-home-color: '#636B75'
  state-person-zone-color: '#7b68ee' #mediumslateblue
  badge-person-home-color: '#008000'
  badge-person-not-home-color: '#636B75' #var(--state-person-not-home-color)
  badge-person-zone-color: '#7b68ee' #mediumslateblue

havent checked yet, but can we now also use theme variables?

state-cover-active-color: var(--primary-color)

if these are set to use color names ?

piitaya · January 27, 2023, 9:55am

You can use any variable format for every colored domain. It’s just a priority order.
Here’s the order (available in the front end doc too)

state-{domain}-{device_class}-{state}-color
state-{domain}-{state}-color
state-{domain}-(active|inactive)-color
state-(active|inactive)-color

Mariusthvdb · January 27, 2023, 9:57am

cool.
can confirm that using:

  state-switch-on-color: pink
  state-switch-off-color: blue

or

  state-switch-active-color: pink
  state-switch-inactive-color: blue

both work

Please add a section on the matter to the release notes… Ive asked in #beta, button sure that got picked up
Its big news indeed!