I apologise in advance if this has already been asked as I couldn’t find any topics covering this. I have set up some template coding in my Home Assistant cards so that the background colour of the card changes based on the state of the entity which is working perfectly. The downside to this is now if I ever change my theme the colours no longer work together as they are based on the current theme that I am using ie; the colours selected are based on a dark theme but if I switch to a light theme then it looks horrible.
Is there any way to set up the theme.yaml to control the background colour changing rather than handling it on a card by card basis? I note that I have read the Home Assistant Frontend documentation and it does state that you can change the colour of an entity based on its state, but I can’t figure out anyway to adapt this so that it is changing the background colour of a card based on its state.
Just to give you some more context. I am having it so that all buttons for my lights, fans, etc (essentially anything that can have a distinct on/off state) would change from the default card background color to a lighter color to better indicate that it is on. I was originally doing this with mushroom cards & card however I have begun to rebuild my dashboard with custom button cards due to a separate issue I was having with how the code was being processed.
To answer your questions:
- Each card is only changing when a single entity toggles states.
- I am only doing it for a particular type of card, but given that I am now using button cards it would be more like a particular template of cards.
- The domain depends on the particular entity, however it will likely be limited to lights, fans, air conditioners, and media players at this stage.
If you are going to use a “background-color dependently on a state” style for the custom:button-card:
- Create a button-card-template where “background-color” is set dependently on “entity.state”.
- Then use this template in your particular button-cards.
Are you able to help me understand where in the code I would inject this and how I would format it? I have very limited experience with any forms of coding so I am learning on the fly.
Here is an example of the coding that I have used for a fan button I am still working on:
show_state: true
show_icon: true
entity: fan.aidan_s_fan
styles:
grid:
- grid-template-areas: '"i n" "i s"'
- grid-template-columns: 12% 75%
- grid-template-rows: auto
img_cell:
- background-color: rgba(76,175,79,0.2)
- border-radius: 50%
- height: 42px
- width: 42px
- justify-self: start
name:
- font-family: assistant
- font-weight: bold
- font-size: 14px
- color: rgb(242, 242, 242)
- justify-self: start
card:
- padding: 12px
state:
- font-family: assistant
- font-size: 12px
- font-weight: bolder
- color: rgb(166, 166, 166)
- justify-self: start
custom-fields:
low:
- align-self: start
- justify-self: end
medium:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
high:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
custom-fields:
low:
do_not_eval: true
card:
type: custom:button-card
variables: null
state:
- value: 'on'
styles:
card:
- background-color: '#303033'
icon:
- color: rgba(76,175,79,1)
- animation:
- rotating 1s linear infinite
- value: 'off'
styles:
card:
- background-color: '#202124'
img_cell:
- background-color: rgba(111,111,111,0.2)
icon:
- color: rgba(111,111,111,1)
You are trying to create a rather complex card.
Try to use templates for properties
styles:
…
img_cell:
- background-color: >-
[[[
if (entity.state === ‘on’)
return ‘rgba(…)’;
else
return ‘rgba(…)’;
]]]
…
…
icon:
…
- color: >-
[[[
if (entity.state === ‘on’)
return ‘rgba(…)’;
else
return ‘rgba(…)’;
]]]
card:
…
- background-color: >-
[[[
if (entity.state === ‘on’)
return ‘rgba(…)’;
else
return ‘rgba(…)’;
]]]
Thanks for your reply, I didn’t think about grouping common attributes into templates to trim down on my code so I appreciate the suggestion. I will have to review your replay later when I have some time to understand it.
On a separate issue, I have a light card that I am working on that has an icon within an image cell to create a circle around the icon (I actually utilised some of your code off of another thread so thanks for that). The light itself is RGB and by setting the icon colour property to auto I am able to get it to reflect the color state of the light. The problem that I am having is that I am unable to figure out how to get the image cell background colour to copy the lights color property.
The code as a whole is very similar to the fan cards coding, just with some minor tweaks. Do you have any suggestions as to how this might best be solved?
Let us discuss that “separate issue” in the huge button-card thread. It seems to be a different issue, let us not mix things.
I see you posted something in that huge thread already.
Suggest you to edit that post: describe the 2nd issue only, add a MINIMAL code and a corr. screenshot, describe your intentions.
So, the 1st issue we’ll keep discussing here when you are ready; and the 2nd issue will be discussed in the main thread.
I never mix “styles” and “state” in a card. If “styles” is present - then I specify all state-dependent styles there, not in the “state” option.
Thanks again for this. I tried your code but was unable to get it to work, however I ended up stumbling upon a solution to my issue regardless.
I realised that rather than specifying the exact rgba value in my templates which would result in still having issues with colours when changing themes, to creating an additional color variable in my theme yaml that I can refer to in my template. This way when I swap between light & dark modes, as long as the colour variable is listed in the mode of the theme yaml then the colours will change properly.