Change color within grid based on numeric state of another sensor

Configuration Frontend
1

Hey there,
I’m using a grid and I’m trying to change the background colour of a specific button based on the numeric value of another sensor.

I’ve got a sensor called sensor.ev_charger_22_charging_station_power

I’ve got this grid:
image

Code:

show_name: true
show_icon: false
show_state: true
type: glance
entities:
  - entity: sensor.ev6_ev_battery_level
    name: EV6 SoC
  - entity: sensor.ev6_ev_range
    name: EV6 Range
  - entity: input_number.ev_charged
    name: EV6 Ladung
  - entity: sensor.ev6_last_updated_at
    name: EV6 Updated
columns: 4
state_color: false

I’m trying to colour the third item blue-ish when the above mentioned sensor (sensor.ev_charger_22_charging_station_power) is greater than 0.

Any idea or code snippets?
I’ve read something about templating, but I first need to learn what that is.

Any quick and easy fix?

2

Have you tried using two conditional cards, one for 0 and one for > 0? The conditions will never both be true, so only one will appear at a time and the colour will appear to change.

3

Hey there,

good idea.

I tried to add two conditional cards as following:

Cond-Card 1:

type: conditional
conditions:
  - condition: numeric_state
    entity: sensor.ev_charger_22_charging_station_power
    below: 1
card:
  show_name: true
  show_icon: false
  show_state: true
  type: glance
  entities:
    - entity: sensor.ev6_ev_battery_level
      name: EV6 SoC
    - entity: sensor.ev6_ev_range
      name: EV6 Range
    - entity: input_number.ev_charged
      name: EV6 Ladung
    - entity: sensor.ev6_last_updated_at
      name: EV6 Updated
  columns: 4
  state_color: false

Cond-Card 2:

type: conditional
conditions:
  - condition: numeric_state
    entity: sensor.ev_charger_22_charging_station_power
    above: 1
card:
  show_name: true
  show_icon: false
  show_state: true
  type: glance
  entities:
    - entity: sensor.ev6_ev_battery_level
      name: EV6 SoC
    - entity: sensor.ev6_ev_range
      name: EV6 Range
    - entity: input_number.ev_charged
      name: EV6 Ladung
      card_mod:
        style: |
          :host {
            color: blue;
          }
    - entity: sensor.ev6_last_updated_at
      name: EV6 Updated
  columns: 4
  state_color: false

Funnily both cards are visible at the same time although the state of the mentioned sensor is the following:

image
image1058×582 32.9 KB

Any idea why I’m being shown both cards?