For me, I agree with this approach . Did you expand on @prof7bit example? Could you add your configuration to this thread? thanks
hi Paul,
since Ive posted a couple of compound posts, and didnt get a conformation, please let me ask here separately:
using the tile card:
with a seemingly āunavailableā cover
and its more-info, which does use the correct color:
itās not related to the entity/domain, my other posts show the same behavior for different domains.
In other words: Tile card does not use the color scheme the entity should get (and does get in the more-info)
could you please confirm this is acknowledged?
I suggest making this an issue in the frontend
Iāve tried to read through this thread but something Iām not clear on is future plans- I see this noted as the first step towards something, but has it been explained what that is exactly? Iām among others that donāt love the new changes (things like some items on/off states are not different enough to see at glance, along with lock default being red which catches my attention at a glance but is the state Iād like rather than a āconcernā). Iām glad others have found workarounds and suggestions to mostly revert via theming, but I donāt want to be too reactionary. I donāt want to create a themes file, modify my configuration yaml, and apply the theme to my users if this is all something that will continue to change or get better over time. Iād mostly just like reassurance that these concerns are heard and the current marked solution in this thread is not a long-term recommendation.
4 Likes
tbh, I am not even sure the marked solution is The solution. It is what?
Its a list of most new color variables probably set to the colors they were before?
That might not even be close to a solution, because before, we couldnāt set many of these at all.
What I fear a bit, is that with this āsolutionā people who didnt use themes before, dont really understand whatās changing, either with the new 2022.12 frontend, or with that Classic theme.
I am all for educating users, so they can create their frontend as much as possible to their liking, understanding the structures on which that frontend is built.
My post #3 was a fix of my already existing themes. Themes which were meticulously curated, and using the former color variables.
the snippet I posted fixed what had to be fixed, in those themes.
with these new color variables things are way more complex though than only setting those themes. Any card_mod working with the former color variables has to be scrutinized, because they most likely will no longer work correctly.
HA devs dont care about that, and state that time and time again. āWe dont support that, so we dont need to document that either, and its no breaking changes because we didnt support that in the first placeā ā¦
example:
I had a footer mod on a script button:
- type: entities
state_color: true
title: Camera detection
show_header_toggle: false
card_mod:
style:
hui-buttons-header-footer $ hui-buttons-base $: |
.ha-scrollbar {
justify-content: space-evenly;
height: 50px;
align-content: center;
margin: -8px 0px 0px 0px;
--ha-chip-background-color: var(--primary-color);
--ha-chip-text-color: var(--card-background-color);
/*--paper-item-icon-active-color: red;*/
--secondary-text-color: var(--card-background-color);
}
and that used the up to then used --paper-item-icon-active-color. turning the button to a red button when the script ran.
I had to take that out, and add the color variable for scripts to my theme:
state-icon-color: '#636B75'
# rgb-state-switch-color: 255, 215, 0 #(paper-item-icon-active-color: gold)
main-on-color: '#ffd700' #255, 215, 0
state-script-color: '#f00000' # red
state-switch-color: '#ffd700' # gold
state-automation-color: '#ffd700'
state-cover-color: '#ffd700'
state-fan-color: '#ffd700'
state-light-color: '#ffd700'
# state-binary-sensor-color: '#ffd700'
state-input-boolean-color: '#ffd700'
state-group-color: '#ffd700'
state-update-color: '#f44336' #red
state-person-home-color: '#008000'
badge-person-not-home-color: '#636B75'
state-person-zone-color: '#7b68ee' #mediumslateblue
# state-climate-heat-color: '#800080'
# state-climate-idle-color: '#000000'
fixed that particular button.
So you see, thereās more to it than a single theme substitute, and we need to understand why/whatā¦
4 Likes
I am using HA 2022.12.1.
HA in Docker.
My colors for binary sensors are these:
Today on Github one person posted a screenshot where colors for binary_sensors are orange (not red).
He said that this is the latest HA, so I wonder - if anyone else have these icons/graphs of orange?
Can you please explain this WHY, thanks!
1 Like
Hi
You may be surprised.
document.documentElement.style.setProperty('--rgb-state-cover-color', 'var(--rgb-orange-color)');
document.documentElement.style.setProperty('--rgb-state-binary-sensor-color', 'var(--rgb-state-switch-color)');
That is what I needed. 99% of my daily use of HA front end are two picture-element cards (floor plan based) and in those I have defined on off colours for quite many entities.
That was hard work to get then as they were before.
1 Like
he probably refers to some information how the UI of HomeAssistant MIGHT look in the future.
There are some previews / studies that the UI will be somehow look like the mushroom dashboard (nowadays) - but unfortunately, I donāt find the link to the study at the moment 
1 Like
yes, that was itā¦ during the Event āState of OpenHouseā (?) Paulus has showed some sketches, tooā¦
Can someone tell me how to fix this on the Picture Elements Card with state-icon
I want the icon to be red when the binary_sensor is off, yellow when on
- type: state-icon
entity: binary_sensor.clock_br2
icon: mdi:clock-digital
tap_action:
action: none
hold_action:
action: none
style:
top: *row_03_1
left: *column_5
"--paper-item-icon-color": red
I tried this, but didnāt work
āārgb-state-binary-sensor-alerting-colorā: 255,0,0
Use āārgb-state-binary-sensor-colorā: 255,0,0
For binary sensors
Thank you, I think Iāve been looking at this too much today. Time to quit
Zones in History
1 Like
2022.12.5:
// HISTORY CHART BAR: OFF & TILE CARD ICON
document.documentElement.style.setProperty('--rgb-state-inactive-color', '255, 0, 255');
Itās
```
document.documentElement.style.setProperty(āārgb-disabled-colorā, ā255, 0, 0ā);
Note, that this will also impact the Tile card:
hmm, for me --rgb-disabled-color does not have any effect, neither on switches nor on binary sensors, neither in the history nor in the tile card.
(I have updated to 2022.12.3 this morning, hoping for any improvements or removal of these unusable new default colors, but nothing changed at all)
Here is my constructive(!) suggestion to the devs how to get out of this mess in an elegant way and without losing face:
- leave the ability to configure all these colors in place (it is generally a good idea)
- remove all the default colors for these new settings and let it (in the absence of these settings) fall back to the old theme coloring mechanism, that way only those who actively decide to change one or two colors for a specific reason can use the new feature and for all others it continues to work as before. Or to say it with fewer words: please make the feature optional, donāt force its use on everybody.
13 Likes
Bookmark this link to see Core updates and changes.
struggling to understand what youād want here?
we now have a state-person-zone variable, and that would be/is used for all zones indeed. So, unless you would travel from zone to zone, without traveling to Home/Not Home in between, you might be seeing several concatenated zone blocks in the graph.
What would you be proposing? To have Zones return to random colors? Tbh, this is the one change I am happy about in the new color schemes 
Finally a calmed down history-graph on person trackers. And one we can (almost) fully customize to our liking/theme preferences. (not_home still hard_coded?)
we have distinct colors for home/not_home/zone. What more do we need?
well, have this work really, that would be niceā¦
state-person-home-color: '#008000'
state-person-not-home-color: '#636B75'
state-person-zone-color: '#7b68ee' #mediumslateblue
badge-person-home-color: '#008000'
badge-person-not-home-color: var(--state-person-not-home-color) # '#636B75'
badge-person-zone-color: '#7b68ee'
now we still have to state the hex or rgb value on the badge and can not reference another var with the same value.
Also, it would be nice if the not_home color in the graph would be theme able and not hard coded. Or at least follow frontend/person_color.ts at 348c3c9787e86df4a655a9e59498eaf1ba05ea2d Ā· home-assistant/frontend Ā· GitHub
and no reason to have the badges do anything differentā¦
1 Like