2022.12 Color states are broken/unusable

Mariusthvdb · March 12, 2023, 3:15pm

cant find a device_class to set on a binary_sensor, whihc I like to makes of the sun below horizon color:

home-assistant/frontend/blob/69264b3448e9862025e78090a52af20f796aa32b/src/resources/ha-style.ts#L172

    
      
          --state-lock-jammed-color: var(--red-color);
          --state-lock-locked-color: var(--green-color);
          --state-lock-pending-color: var(--orange-color);
          --state-lock-unlocked-color: var(--red-color);
          --state-media_player-active-color: var(--light-blue-color);
          --state-person-active-color: var(--blue-color);
          --state-person-home-color: var(--green-color);
          --state-plant-active-color: var(--red-color);
          --state-siren-active-color: var(--red-color);
          --state-sun-above_horizon-color: var(--amber-color);
          --state-sun-below_horizon-color: var(--indigo-color);
          --state-switch-active-color: var(--amber-color);
          --state-update-active-color: var(--orange-color);
          --state-vacuum-active-color: var(--teal-color);
          --state-sensor-battery-high-color: var(--green-color);
          --state-sensor-battery-low-color: var(--red-color);
          --state-sensor-battery-medium-color: var(--orange-color);
          
          
/* history colors */
          --history-unavailable-color: transparent;
          --history-unknown-color: var(--dark-grey-color);

in fact, the binary is called dark_outside, and indeed related to the sun, but not being below horizon, but having a certain angle…

      - unique_id: dark_outside_elevation #outside_daylight_sensor
        name: Dark outside
        state: >
          {{state_attr('sun.sun','elevation') < -4}}
        icon: >
          mdi:brightness-{{'4' if this.state == 'on' else '5'}}
        attributes:
          icon_color: >
            {{'purple' if this.state == 'on' else 'gold'}}

currently using custom-ui to set the icon_color, but would have hoped to be able to set tha aside and use a device_class here…

Mariusthvdb · March 14, 2023, 7:28am

anoher issue: state-update-active-color is set in my themes:

    state-update-active-color: red #'#f44336'

yet it still shows the HA default orange color.

I this a bug? or am I missing out on some other detail

edit

yes I was, this was not an update entity, but a binary_sensor with device_class: update… adding

state-binary_sensor-update-on-color: red #'#f44336'

helps:

started out with the template-entity-row fix that was made by TheHolyRoger, and it is clear there is still some work before that does also pickup the theme settings…(it does pickup the new HA default though)

dicekillsyou161 · June 9, 2023, 3:20am

Just noticed this from a few months back, actually I apologize, I wasn’t intending to be a jerk, I was trying to be helpful thinking the question may have a better chance of a good answer. I sometimes don’t realize how my comments are likely to be interpreted, esp. when I am trying to be concise. Anyways, apologies for being kind of a jerk (if unintentional)

wap88 · June 14, 2023, 1:09am

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

Ildar_Gabdullin · June 14, 2023, 1:25am

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 · June 18, 2023, 8:41am

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:

boheme61 · June 18, 2023, 9:13am

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”

91JJ · June 18, 2023, 9:43am

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 · June 18, 2023, 11:32am

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 · June 18, 2023, 6:57pm

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 · September 19, 2023, 3:59am

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

flynn · December 2, 2023, 6:49pm

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 · December 2, 2023, 9:13pm

I am still using this I posted above

RkcCorian · January 4, 2024, 3:52pm

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 · January 4, 2024, 4:03pm

Seems to be working:

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

RkcCorian · January 4, 2024, 8:00pm

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 · January 4, 2024, 8:20pm

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

RkcCorian · January 4, 2024, 9:16pm

Thx for the hint!

DrSpaldo · June 5, 2024, 1:24am

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 · June 30, 2024, 8:30am

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