Entities card custom colour based on state

I have the following entities card

Would like to either change the background to red or a text line to red if the value is let’s say greater than 30 mins. Ideally also only display to home if my presence sensor is away and to work if it is set to home.
Is that possible or perhaps is there a custom card in HACS that can do that?

As I stated in a previous post, it’s not a single card. You will need the lovelace card mod and config template card.

Lovelace card mod will allow you to change any style.

Template card will allow you to problematically change the styles in the lovelace card mod.

Got it installed but any idea why it doesn’t like the syntax? Seems to be just as the examples on github

I’m not sure you can use the built in yaml editor with this card. You’ll probably have to move to full yaml mode.

just to clarify, your script looks good in regards to the documentation.

Yes that seems to be case which is fine, I can edit in VS Code but I suppose the above will apply colour to all entities, instead of just sensor.to_work so I’m not sure if you can do it but seems to be possible according to the example page:


try applying the style to the entity itself

  - entity: sensor.to_work
    style: ...
  - entity: sensor.to_home

that example has this as the code

      #states div:nth-of-type(2n+0) {
        color: red;

that’s essentially saying all the evenly numbered items. So i believe this should work (I’m not great with nth-of-type() crap because I’ve never used it, I’m assuming its an index).

      #states div:nth-of-type(1) {
        color: [[ if(sensor.to_work >= 22, "green", "") ]];
1 Like

I think I have a better way, I can set up 2 cards one for To Home one for To Work and just one gets displayed based on my smartthings presence sensor (Home/Away values)

title: Commute
type: conditional
  - entity: binary_sensor.arrival_sensor_presence
    state: 'Home'
  type: entities
    - sensor.to_work

But it is not registering the Home state even though it is the current one, any idea?

Didn’t like Home but state_not: Away works fine.

Edit: Nope it doesn’t when using state_not: Home doesn’t think I’m at home even though I am

lowercase home

You can but it will warn you that the GUI editor for the card is now unavailable.


I need to do something very similar

    type: state-label
  - entity: sensor.vacuum_lavagem_filtro
      border-color: 'rgb(34, 154, 210)'
      color: '#09f9ed'
      font-family: Trebuchet MS
      font-size: 76%
      font-weight: bold
      opacity: 0.8
      pointer-events: none
      right: 1%
      top: 30%
      transform: 'translate(0%,-50%)'

I want the color to change from green -> yellow -> red according to the usage of the sensor.

something like if sensor.vacuum_lavagem_filtro > 100 color: green ; if sensor.vacuum_lavagem_filtro <100 and > 50 color: yellow ; if sensor.vacuum_lavagem_filtro < 50 color:red

Just tried it with home and away and the card is basically never being displayed. Even though the sensor only has those two states, is it possible they get called something else in the background? Or is there another attribute other than state that needs to be used?

You need to look at the state in the states page. The display is Home, Away, and zone names in the UI. In the states page, it’s home and not_home. Don’t ever built automations & cards based on states shown in the UI. Those values are translated to the user and change based on langauge settings.

Actually yes they are not called home and away they are on and off as per https://www.home-assistant.io/components/binary_sensor/


no, if it’s a binary_sensor it’s still ‘on’ and 'off. ‘home’ and ‘not_home’ are for device trackers. As I said before. Check the states page. Here is more proof.

And just to throw in some documentation…


1 Like

If anyone else gets here trying to do the same thing as the original OP then this might help.