2022.12 Color states are broken/unusable

[wap88 (Giovanni Notaristefano)]

Is there now a way to customize the zone history colors?

[Ildar_Gabdullin]

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”.

[91JJ]

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.

Version Hopping - Lost Colours, States unavailable but updating +MORE

Very bad practice version hopping. DON’T DO IT! I’ve jumped from 2022.6.6 to 2023.1.6 (not great, I know!) I’m working on fixing some bit; Synology Maps (life360) Google Calendars Samsung Smartthings But one thing that is personally irritating me is the layout and colours. My cards have the same config, just using a different entity but some are white icon/text, some are yellow (as they should be) ON=Yellow OFF=Green BEFORE: [image] AFTER: [image] color_type: entity entity: switch.o…

BEFORE:

AFTER:

[boheme61]

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”

@91JJ

I’m stuck on 2022.6

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”

[91JJ]

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”.

[petro]

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.

[91JJ]

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

[huu]

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.

1. Add the following to the configuration.yaml

frontend:
  themes: !include theme.yaml

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

3. In HA menu developers tools > yaml > reload “all yaml configuration”

4. HA menu > [user] > Theme > Choose your theme

[flynn (Thomas Jönsson)]

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

[KennethLavrsen]

I am still using this I posted above

2022.12 Color states are broken/unusable

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-…

[RkcCorian]

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!!

[Ildar_Gabdullin]

@RkcCorian

but it is not working for me

Seems to be working:

test_new_colors_theme:
  paper-item-icon-color: lightblue
  state-cover-open-color: '#ff0000'

[RkcCorian]

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

[Ildar_Gabdullin]

@RkcCorian

So with mushroom it is not wroking, right?!

This thread is about STANDARD theme variables. Go to the corr. mushroom thread if you have issues with mushrooms.

[RkcCorian]

Thx for the hint!

[DrSpaldo (Doctor Spalding)]

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

[sender]

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):

Picture-Elements paper-item-icon-active-color not working on some entities

So I ended up here as I have a similar issue. I have 4 “LEDs” on a picture elements card. They are all 4 configured equally but only 1 gives me the correct “active” color. For sake of easiness I only add the correct one and 1 faulty one… Correct: - type: state-icon entity: binary_sensor.tuin_klep_uitgang_tuinslang_led style: top: 40% left: 76.5% '--paper-item-icon-color': green '--paper-item-icon-active-color': green …

[sender]

Can anyone direct a little in the right direction in this icon color question?

[sender]

Any colorful people willing to help out with:

Picture-Elements paper-item-icon-active-color not working on some entities

So I ended up here as I have a similar issue. I have 4 “LEDs” on a picture elements card. They are all 4 configured equally but only 1 gives me the correct “active” color. For sake of easiness I only add the correct one and 1 faulty one… Correct: - type: state-icon entity: binary_sensor.tuin_klep_uitgang_tuinslang_led style: top: 40% left: 76.5% '--paper-item-icon-color': green '--paper-item-icon-active-color': green …

[Mariusthvdb (Marius)]

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)