How to make state_color: true global?

That’s pretty cool but my lights already do that (Hue and z-wave). I’m more interested in the templating stuff.

But it says that you can enable switches or all types there is a way to do it

Add this to customize_glob

    icon_color: >
      if (state === 'on') return 'var(--state-icon-active-color)';
      return icon_color;

You can use it per Lovelace card.


@Krocko - That didn’t work

@VGE - I know but I have a crap-ton of cards across maybe a dozen tabs. I’m looking for a GLOBAL way to change this back to the old behavior.

1 Like

Yea that sucks. Sorry cant help.

It is working. I use it.
Have you installed custom ui?

Custom UI? What’s that?

I know how to use it, but I’m not experienced enough with lovelace to give you a good explanation. Maybe @jimz011 (hope it’s ok that I tag you here) can give you a short explanation if he doesn’t mind.

@Burningstone, I could yes. @danodemano custom-ui is actually a modification meant for the states-ui (which is now deprecated btw). But it has some extra functionality regarding customization. By default Home Assistant does not support templating customized entities, with Custom-UI this is possible.

By default you can customize entities and give them another name, icon and/or device_class. But you can’t set an icon based on the state of the device. With custom-ui this is possible as well as having a colored icon based on the state (though this will only work with core cards and NOT with e.g. custom:button-card).

in my case I use the custom:button-card a lot and so color isn’t very useful for me, however I do use icons based on the state. For an example of how I use it click here and then click on “Personal Setup”.

You can find a lot of other useful examples there. I hope this will help you!

1 Like

The states UI is being removed in 0.107 (Or 0.108 - can’t recall) though right? So does that mean at that time custom-ui also goes away? I don’t want to start putting time into that if it’s just about to go away.

To be honest I have not the slightest idea. I also use Custom-UI for exactly the purpose I mentioned above. I don’t think it will stop working though, though the states-ui features will definitely no longer work.

Not entirely sure if my explanation is a 100% correct, but let me try.

If you don’t use autofilled themes like e.g. my own HKI or Dwains theme you can simply define all colors and states within lovelace (you will either have to use custom:button-card or card-mod if you want to use core entity-buttons). A few pro’s and cons though:

Defining every icon and color within the frontend is easier and doesn’t require a restart. Defining things through the frontend has a less likeliness to stop working as it basically is just CSS.
Doing everything through the frontend does make the frontend slower, and the changes will only apply to that specific card. However doing it through the frontend also makes sure your hardware doesn’t require to be very fast as the receiving device (in this case browser or phone) will handle it.

Doing it with customize.yaml (with or without Custom-UI) will make your frontend slightly faster, but requires more memory and processing power on the backend (the device HA runs on) thus it requires better hardware. Icons and colors will be handles by your HA machine and thus your receiving device has less work. It also makes sure that the entity has the same icon/color everywhere in the frontend (e.g. it will also show that icon when opening the more-info view or when looking at it in the dev-tools>states).

Either way, results are pretty similar and it is more or less up to you which method you prefer. I have a server so I prefer to do things in the backend.


Thanks, that’s helpful.

Unfortunately I’m still stuck with the same issue either way, I get to spend all weekend ripping my config apart because this change broke at least 75% of my cards. A bunch of them are conditional cards too which means I have to really get down into the raw config editor to screw around. It’s now WAY harder to see what’s on an off, open or closed, motion, etc. I was really just hoping for a way to globally revert this crazy change so I don’t have to waste a crap-ton of time. :cry:

I actually think it still took a long time before they really deprecate it (though you still have a month until it is really gone). At least we were talking about the states-ui right?

Lovelace has been the default since january last year so in that regard we had plenty of time. But yeah I can understand the reluctance, especially if you have already invested a lot of time creating the current frontend (trust me I know :rofl:). All I can say right now is that you will have to change everything, a little upside is that I don’t think they will change it again (as lovelace really is much more versatile than the states-ui is).

If you have any questions regarding Home Assistant, lovelace, or any of those things you can always ask!

To me it is more logical to have “state_color” card option by default rather than add it manually to every card… Why would not I have it? Now, once I added it to a card, I do not have nice Lovelace card editor but only text editor for the “improved card”… seems like downgrade…


No I’m talking about my original question, the state_color option in lovelace on 0.105. I’ve been on lovelace since last year, it’s just this latest change has rendered me being able to tell the state off all of my switches MUCH harder. It has also tanked the WAF.

I agree @kol - this really need to be toggleable and not just at a card level. It really is a step backwards…

I’m going to have to touch every bloody card this weekend and add state_color: true to fix this “enhancement”

Ah sorry (so much different messages which try to explain something else got me confused).

I have 2 questions for you:

  1. Do you use the UI or YAML mode?
  2. Are all the cards the same where you want this color? E.g. are they all entity-buttons or entities cards?

If you use YAML mode you could simply fire up your code editor like VSCode and do a global search and replace. If you happen to use the RAW editor, you could copy and paste the entire code into VSCode and do a search and replace from there and then copy it back.

This might save you a lot of time (really a lot). If you really can’t figure out how to do that, I might be able to help you privately.

No worries, few discussions going on at once. :smiley:

  1. UI mode

  2. Nope, mix of a bunch of different cards.

I’ve got popup cards, conditional cards, entities cards, vertical-stack cards, and a lot that have combos of the above. Also various plugins like restriction cards and fold entity row cards. I’m sure there are more, that’s just what I can think of off the top of my head.

If they were all the same thing that would be easy to do. It would save me a crap ton of time.

So one person requested this change and they have to do zero work to now benefit, yet 99.9% who were quite happy with the old state now have to probably spend time making adjustments to get back to the original feature that actually was useful. I’m just a hobby programmer so maybe a professional programmer would like to explain to me the logic behind this change?


FML this is even worse than I thought it would be. I cannot add it at the card, entity, or fold in my vertical stack. Here’s a condensed version of one of my cards, adding state_color: true to any of these locations doesn’t work. This means I’m going to have to touch all the individual entities…

This is going to be a REALLY long weekend…