Is there now a way to customize the zone history colors?
There is a way - but it has limitations.
Check Docs.
Imagine you have these zones:
– zone.home (friendly name “Home”)
– zone.bar (“Bar”)
– zone.my_mom (“Mom”)
– zone.company (“My Office”)
Define these variables:
–state-person-home-color
–state-person-bar-color
–state-person-mom-color
–state-person-my_office-color
and enjoy your colors.
(similarly for device_tracker)
But - these zones must have exactly these FRIENDLY NAMES and in ENGLISH only.
And one more thing.
If you 10 zones and defined vars for 5 of them - other zones will still have same color.
So, it is not like “all zones is history have different colors, user may define explicitly some of them”.
1 Like
I’m stuck on 2022.6 as I can’t get around this issue easily, it’s so frustrating!
My whole dashboard is screwed, all the colours are off and not even consistant.
Fixing the integrations etc is fine, but changing the whole colour scheme was just a total disaster… I thought somebody by now would have got a quick win solution but it isn’t looking that way with over 700+ comments to read through.
BEFORE:
AFTER:
There has been a Looong topic regarding this, with various solutions and tips (keep searching/reading, as i don’t intend to look them up for you, like after 5 month, my memory dont last so long in this environment 
1 “main” solution is adding/edit your theme, card_mod solve some, and for some “entities” there is now a “default” solution to change “active color”
That is a “very” bad excuse for being 1 YEAR ( 12 month behind ) … im pretty sure you “missing” a “few” Braking Changes, so you really should spend your time , updating 1 by 1, And not think you just can easily “jump” 12 month, without quite alot “problems”
No sorry this was my point, I have to scramble through hundreds of messages to find the solution… and with looks, majority will be trial and error.
I don’t expect anyone to search and share the exact solution for me.
1yr out of date is no excuse no, however, only getting a couple hours a week to update my stable HA is risky.
I’m just highlighting, it’s a shame this topic went on for so long without someone adding a clause in the code to “fix it”.
There is no “clause” to fix. This has been a request for many for a long time which unfortunately broke all the custom solutions people had. Just take a look at the frontend documentation as it covers what you need to do. Which most likely means you have to remove your custom settings and move all coloring to your theme using the new theme variables.
2 Likes
Thanks @petro - this is actually right.
All “broken” cards are actually custom cards, even though I’m using the default dark theme.
I’ll have to block out a couple of days to rewrite all the custom cards.
This does make me recall an idea to save a default card, so I don’t have to go through each dashboard and copy/paste the code 
Revisiting this thread after 6 months I am surprise to see that the odd colour choice for alarm still remains. I am quite happy with everything else, so the only reason i would use theme is just for the alarm color.
For amateurs like myself who just want quickly change the color of the alarms states, here is how do it. Thank you to all the people above who already put in all the work and instructions.
- Add the following to the configuration.yaml
frontend:
themes: !include theme.yaml
- create a theme.yaml file in the config directory with the following
Legacy:
state-alarm_control_panel-armed_away-color: '#F44336' #Red
state-alarm_control_panel-armed_custom_bypass-color: '#F44336' #Red
state-alarm_control_panel-armed_home-color: '#F44336' #Red
state-alarm_control_panel-armed_night-color: '#F44336' #Red
state-alarm_control_panel-armed_vacation-color: '#F44336' #Red
state-alarm_control_panel-arming-color: '#FF9800' #Orange
state-alarm_control_panel-disarming-color: '#FF9800' #Orange
state-alarm_control_panel-pending-color: '#FF9800' #Orange
state-alarm_control_panel-triggered-color: '#E7FF00' #Yellow
state-alarm_control_panel-disarmed-color: '#4CAF50' #Green
modes:
light:
secondary-text-color: '#9b9b9b'
dark:
secondary-text-color: '#9b9b9b'
You can name “Legacy” to anything you want, the last section light and dark modes is there so that you can switch between light and dark mode manually.
-
In HA menu developers tools > yaml > reload “all yaml configuration”
-
HA menu > [user] > Theme > Choose your theme
Hello Kenneth, I am where you wehere 1 year ago Did you manage to solve this how to set different colors on icons when using picture-elements? All mine are yellow… If you have a solution please share 
Thanks
I am still using this I posted above
Hi together,
I followed the documentation as mentioned from others ( Home Assistant frontend - Home Assistant (home-assistant.io)) but it is not working for me. Do I miss something?
I have in my theme state-cover-open-color: "#ff0000" in place without effect.
Many thanks in advance!!
Seems to be working:
test_new_colors_theme:
paper-item-icon-color: lightblue
state-cover-open-color: '#ff0000'
Ahhh… working for me as well with the standard card. So with mushroom it is not wroking, right?!
I tried also with
mush-rgb-state-cover-open: pink
mush-rgb-state-cover-closed: orange
but this lead only to a white icon, I do not understand why
This thread is about STANDARD theme variables. Go to the corr. mushroom thread if you have issues with mushrooms.
Thx for the hint!
I just wanted to post for those like me that are still searching for an answer to the red/green icons for the lock/unlock in HA not matching the other colors (colours) in your theme. For me, I am using the google theme that has both light & dark modes. To change the lock/unlock icon for my house lock, I added the following lines to the google_theme.yaml in \config\themes\google_theme:
In in the light section:
state-lock-locked-color: rgb(95, 99, 104) #added by Spaldo grey light icon
state-lock-unlocked-color: rgb(140, 110, 195) #added by Spaldo purpleish icon
In the dark section:
state-lock-locked-color: rgb(169, 177, 188) #added by Spaldo whiteish icon
state-lock-unlocked-color: rgb(140, 110, 195) #added by Spaldo purpleish icon
Hopefully this helps someone, or at the very least future Spaldo
So I ended in the monstrous colorful thread… as my picture elements card (for summer usage) is totally off.
Would you mind helping out how to change what where?
The post marked as solution does not 123 gives me a eureka moment.
My issue is here (to not duplicate):
Can anyone direct a little in the right direction in this icon color question?
Any colorful people willing to help out with:
retesting some theme variables, I came across these in my theme:
badge-person-home-color: var(--ok-color)
badge-person-not-home-color: var(--no-power-color)
badge-person-zone-color: mediumslateblue
which were probably used at some time to colorize the (now legacy) badges, although I cant find anything using these variables in the source code history …
would anyone here be able to tell me why these are floating around?
I did search the community, but most occurrences are of my own, and don’t explain the why…
before you ask, I do have the regular state colors too:
state-person-home-color: var(--ok-color)
state-person-not-home-color: var(--no-power-color)
state-person-zone-color: mediumslateblue
and no, I didnt create those variables myself to use in the Frontend anywhere so, I am lost completely (and commented them out for now, maybe it will cause havoc somewhere, so I can at least know what they do)
1 Like