What about the second question, about climate and media_player entities not using state-inactive-color when inactive? Is that a bug, or not implemented yet?
If it’s at the profile level, you can use unset keyword. (e.g. state-fan-active-color: unset).
All domains are using state-inactive-color when unactive (except for lock, it’s green)
Remember that ALWAYS talk about picture-elements card. Not themes. Picture-elements card.
The docs have now been changed. Instead of wrong documentation on controlling colour there is now NO DOCUMENTATION. In other words. Picture-elements card seems to be not taken seriously any longer.
When you are editing the picture-elements card and nothing works you need to know that
CSS variable need – prefixed to the name when used in picture-elements card style
You need to know how to specify the colour. I tried #FF0000 format and that did not seem to work. 255,0,0 did not work. But “red” now works. it did not work a few days ago.
You need to know which of the CSS 4 levels to use. I tried state-active-color. That did not work. But when it did not work, I did not know how to specify the colour either. I had doubts about if the – prefix was still needed.
It is not like you know that each variant of syntax brings you closer. It just continues not working. And after almost two hours of cut-and-try I got the binary_sensor to work.
There are so many permutations of prefix, names, and colour syntax.
There used to be a well documented way with the old paper CSS. There were two CSS names. One for on and one for off and it worked for any type of entity. It was documented and you could use the feature by following the simple recipe.
Picture-element is not receiving much love. And that is sad because it is a flag ship Lovelace card that makes a HA main dashboard to look cool and user friendly. It is what makes my wife use the dashboard and it is what she shows when she brags to her colleagues. It deserves more love
Dude, it’s the same variables. I know what we are talking about here.
Because they are all covered in the frontend. It’s the same. Same variables everywhere. You’re making assumptions and being angry about the assumptions you made. Read the frontend documents and stop being angry. They will actually help you get what you want in the picture-elements. Stop fighting it. There’s no reason to.
So just so YOU understand
The theme variables are the same as the picture-element variables
And I still dot understand why state-binary_sensor-active-color works but state-active-color does not work. I do not have this redefined in a theme
We are talking about the Picture Elements Card - Home Assistant
Now it can refer to the front end documentation but you should not need to be an expert of themes in HA to use a Lovelace card. Not if we want this project to be streamlined and made for everyone.
It is not about what a few of us now understand after 667 posts in a thread on a forum. And I bet this thread continues with more confused users not understanding these little secret details.
Picture elements is 100% an expert level card. It can only be configured in YAML and getting it working right is a time-consuming and painstaking process. Even without the complications due to colors.
Kind of the problem with it. If the goal is to make it easy for anyone to make a floorplan style dashboard (which is a cool and noble goal) then there’s a TON of work to do. Documenting the theme variables in more places isn’t really going to move the skill bar required.
But when it’s inactive, that color CSS directive is just gone. I might file a bug on GitHub, but I feel like this whole state colour system is far from ready for prime time.
I implemented the card in the first weeks of using HA.
It was hard work but it was well documented.
I think issue that Flavian has is the same I had when I read the new front end document and tried to use state-active-color in my picture elements card with no result.
For picture-elements card that would be the good one to use because if it worked you just needed to reinstate the old documented example with that in the picture-elements card. Then you could change the colour of your entity to what you want and not have to think about what kind of element it is. Covers, binary sensors, switches would all be controlled the same. One intro text and an example and Bob is your uncle.
Requiring hard work over multiple weeks is basically the definition of expert level. In order to make something like a picture elements card “streamlined and made for everyone” it would have to be easily configurable within the UI, without the user really needing to look at any documentation to figure it out.
Maybe something like dragging and dropping things into the right spot on a picture. Definitely no yaml
If you look at the priority order in the documentation :
state-binary_sensor-active-color > state-active-color
So even if you redefine state-active-color, it will be overridden by the state-binary_sensor-active-color (because this one if more precise) defined by default in home assistant default theme. You have to redefine state-binary_sensor-active-color.
Most domains have a custom active state color. The state active color is here as a fallback.
The state is based on this enum, it uses state-climate-heating-color when the furnace is on, so it should use state-climate-idle-color when the furnace is off.
So what am I missing?
Why does this not work in my Theme
state-group-active-color: var(--amber-color)
But this does
paper-item-icon-active-color: var(--amber-color)
As @Flavien has asked but has been ignored, Why do some domains work and others don’t and why does paper-item-* still work when it is documented to have been depreciated?
