All Icons and Switches Grayed Out

Configuration Frontend
1

I really don’t know when this started, and it’s only a minor annoyance, but I’m hoping maybe there’s an obvious fix…

In Lovelace, all the little icons next to the entries, and the slider bars for switches, are grayed out. They used to be blue when “on” or “true.” Here’s an example:
image

In this example, “Study Lamp” and “Heat 1st” are both “On.” The slider, the lightning bolt icon and the check mark (tick mark) icon used to be colored blue in this state.

I’ve not really played much with Lovelace. I tried the Backend-selected theme, default theme, and Clear theme. I’ve never changed the themes or CSS. I’ve done a browser refresh many times.

2

In version 0.105 the default behavior was changed. The icons no longer reflect the entity’s state. To revert to the the previous behavior, you have to add the state_color option to indicate the icon’s desired color.

Search for state_color in this forum and you’ll get many results. Here’s one:

You’ll need to spend some time with your Lovelace UI, adding state_color wherever you want the entity’s icon color to reflect its state.

1 Like
3

Wow, that was quick. Thank you!!!

It seems odd to make a change that takes away such a nice feature, but if all it takes is a bit of tweaking to restore it, that’s right up my alley.

I should add, the reason I’ve been able to largely ignore learning more about the front end is that it’s actually pretty good right out of the box. I see all the great things people on here have done to improve it, but I’m more of a nuts-and-bolts guy and I generally leave the GUI stuff up to those with more creative ability than I.

4

I just got done following a bunch of links, starting with the one posted above. I can see there’s a lot of contention there.

What I can’t see is how to add the state_color option to a card. I tried editing the card in Lovelace. I selected “show code editor” and typed in “state_color: true.” All I get is an error suggesting this isn’t recognized.

Again, I’m just a beginner with Lovelace. If everyone else thinks taking away these colors is a good thing, I won’t complain. But I’d really appreciate some step-by-step instructions on how to restore the old functionality.

Thank you!

5

I had similar questions about how to use the state_color option, especially with the entity-filter card. I think these two posts by SeanM neatly summarize how to use it (they include examples):

1 Like
6

Thanks, that did it!

Well, this being HA and YAML, I had to sort of re-interpret the examples because they don’t match the way Lovelace generates the cards when you use the UI to create them.

So anyone else still confused by the hierarchy in YAML, here’s what worked for me:

I selected “Configure UI” then clicked “Edit” on the card with, in this case, some switches.

[I anonomized the actual device names below. This is just to show where the state_color line goes.]

entities:
  - entity: switch.ikea_of_sweden_tradfri_control_outlet_fea...
  - entity: switch.ikea_of_sweden_tradfri_control_outlet_fea...
  - entity: switch.ledvance_plug_000xxxx_1
show_header_toggle: false
theme: default
title: Switches
state_color: true
type: entities

And here’s how it looks now:
image