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
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
1 Like
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 
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
RGBformat 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).
17 Likes
@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.
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
state-{domain}-(active|inactive)-color
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)
state-{domain}-{device_class}-{state}-colorstate-{domain}-{state}-colorstate-{domain}-(active|inactive)-colorstate-(active|inactive)-color
5 Likes
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!
wondering if
state-icon-color: '#636B75'
is still doing anything, or should we set that to
state-icon-active-color: '#636B75'
too?
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
Example
- 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
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? 