Coloring card based on sensor value

Configuration
1

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

entities:
  - 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?

2

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

image

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

3

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

4

Well…

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

type: conditional
conditions:
  - condition: numeric_state
    entity: sensor.cph1903_battery_level
    above: 50
card:
  type: tile
  color: green
  entity: sensor.cph1903_battery_level

type: conditional
conditions:
  - condition: numeric_state
    entity: sensor.cph1903_battery_level
    below: 51
card:
  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.

5

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.

6

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.

7

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…

8

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

9

Thank you anyway!

10

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:

frontend:
  themes:
    MyBlueCard:
      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
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.