Closed RoboMagus closed 1 year ago
I can confirm that this is an issue. I tried to fix it but currently can't as my expertise in front end is not that great. A PR will be more than welcome
Ok managed to find the issue. It is actually a bug in lit
library that doesn't handle setting important
on styles. (I will add a reference to a github issue later).
To overcome it we need to do 3 things:
color
attribute, which actually makes the important
part crucialimportant
from all custom styelsentity.state
in the custom style functions (as the first argument passed will now be the one we use in step 1)This is very easy:
state:
mapper: |
() => 'off';
style: >
(state, entity) => (entity.state == 'cool' ? { color:
'var(--state-climate-cool-color)' } : { color:
'var(--disabled-text-color)' })
Let me know if it works for you
Issue: https://github.com/lit/lit/issues/3767 PR to fix it: https://github.com/lit/lit/pull/3768
fixed in 2.4.5 Please note that in order for it to work you must remove the ;
after all important
tokens
I've spent some time creating the perfect little climate card for my needs, see config below, but it seems that the button icon colors as defined by each of their
style:
sections does not update when the entity is updated. E.g. I have it configured that when the climate state is set toauto
, the auto button is highlighted green. This is the case when I freshly load the page or hit refresh. But when the state when loading the page is e.g.heat
and by clicking the auto button the state changes toauto
, all of the button colors stay as they are. However, the rest of the card does reflect this change...Is that a bug, or something else I need to configure for this to function correctly?
Config: