2022.12 Color states are broken/unusable

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.

The method I use is

In configuration.yaml

  themes: !include_dir_merge_named themes
    - /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

1 Like

tried this @KennethLavrsen but didnt seem to change.

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

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

Hello :wave:

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 :

  1. No more RGB format for themes variables. You can use hexadecimal or css color directly in themes (e.g. red, amber, green)

  2. 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)

  3. in Lovelace card, the inactive state can be now customized (e.g. locked lock color can be customized).


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.

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.

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.

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


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

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

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 ?

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)

  1. state-{domain}-{device_class}-{state}-color
  2. state-{domain}-{state}-color
  3. state-{domain}-(active|inactive)-color
  4. state-(active|inactive)-color

can confirm that using:

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


  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!

wondering if

state-icon-color: '#636B75'

is still doing anything, or should we set that to

state-icon-active-color: '#636B75'


it would help if we could set the ‘default’ on/active color like that, and not have to set it for each domain

we can now even fix this:

case: 2 individual covers, assumed state, which are also grouped inside a group cover. since their state is unknown, they get colored according to inactive, which is not very useful.

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

yet, we can now set:

  state-cover-open-color: gold
  state-cover-unknown-color: pink
  state-cover-closed-color: maroon

it’s a bit more tweaking, but way more effective and concise.

huge jump forward I would say.

state-icon-color was never officially supported and I doubt it will be.

@piitaya do I need to be concerned about changes related to Picture Elements Card?

In Picture Elements we are many that set both on and off state colours on individual entities

I am actually not that concerned about the colours used in entity cards etc. It is my picture elements cards that I am extremely sensitive

In December release the css names of the on state changed but the off state remained like it was


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

If CSS names change also for off state - then I am personally OK with having to fix my setup - as long as it is documented what the new names are and referenced in release note

Can you please tell me how can i add this js file and where? :heart: