Coloring card based on sensor value

Coloring seems to be a challenging configuration on lovelace cards. I have a quite simple card like this:

  - entity: sensor.importing
    name: Importing
    icon: mdi:transmission-tower-export
title: Power

This card tells me how much power I am importing from the GRID. I would like to change its background color to red if the importing power is over 5kWh.

How can I accomplish this using HA native functionality?

Tile cards allow you to change the colour of the icon and its surround.


I don’t think you can change the colour of the whole tile without a custom feature like card-mod.

Based on the simple sensor I have, can you give an example?


This is based on battery levels - green if above 50%, red if below:

type: conditional
  - condition: numeric_state
    entity: sensor.cph1903_battery_level
    above: 50
  type: tile
  color: green
  entity: sensor.cph1903_battery_level
type: conditional
  - condition: numeric_state
    entity: sensor.cph1903_battery_level
    below: 51
  type: tile
  entity: sensor.cph1903_battery_level
  color: red

There are two conditional cards, but they should never appear at the same time, so it will look as if the icon surround is changing colour.

Edited: to make it clear that there are two cards.

Great! One of the other card will show, being the one above 5kWh in red. My “problem” is solved. Thank you for your patience!

As a last question, is it possible, on a non conditional card, define de icon (mdi) color? For example, show the icon in red (not yellow) when a switch is on. Actually, if possible I would like to change the “on state” color from yellow to red, system wide.

You can in tile cards (which can be used in conditional cards, as above) but system wide, and without custom cards, yellow is on and blue is off.

I am not sure if I should continue putting questions on this post or create a new one as my key question was already answered and the problem is solved… If you think I should move into another one, please let me know.

Having said that, and going “deep on dark waters” as I am not a developer, I can see in the documentation that there is a file that defines all HA colors. Here is the link to this file in HA github: frontend/src/resources/ha-style.ts at 1914de7ddf5f5c30be8dd1b85e77b4dd51b48be0 · home-assistant/frontend · GitHub.

Do you know if it is possible to change the sensor-state yellow color in there? I thought no one touch this file because it would do a system wide change. However, this is what I am willing to do…

I think that’s a new post! And it’s well above my level of incompetence. :laughing:

Thank you anyway!

I found how to change the colors using native HA functionalities, so I am sharing here should someone be willing to do the same.

On configuration.yaml file I have:

      card-background-color: "#DEF4F7"
      state-active-color: "#f44336"
      state-binary_sensor-active-color: "#f44336"
      state-switch-active-color: "#f44336"

As an example, on the entities card yaml I have:

type: entities
  - entity: living_room_light
    name: Light
title: Living Room
theme: MyBlueCard
state_color: true

Now the cards I have assigned the MyBlueCard theme has a blue color and the mdi icon will be red when on.