Change text color based on severity "Big Number Card"

Configuration Frontend
1

It can’t be that complicated but I am getting tangled up and loosing my way! I have a simple Big Number Card showing outside temperature. All I want to achieve is that if the temp is 0°c or below the text color should be “Red” above 0°c it should be “Dark Blue”
this is the yaml file:

      - type: custom:bignumber-card
        title: Ute temp
        entity: sensor.extra_temperature_temperature
        scale: 70px
        round: 1
        min: -50
        max: 100
        severity:
          - value: -50
            style: var(--primary-text-color-red)
          - value: 1
            style: var(--primary-text-color-DarkBlue)
        bnStyle: |
          bnStyle: var(--label-background-color-#E0FFFF)
          bnStyle: var(--label-boarder-width-0)
          background-color: '#E0FFFF'
        card_mod:
          bnStyle:
            boarder-width: '0'
            background-color: '#E0FFFF'
2

Try the following. I changed the severity values because the first one you used was -50 but since your “min” is also -50 the color would only change at that specific value. This is because the severity style is based on the assigned value and anything below that value. So in order for the color to change to red like you had it, the temperature would have to be -50.

I set the first severity value to 1 so if the temperature is 1 or below the color changes to red. I set the next severity value to 100 so if the temperature is 100 or less but above 1 (the first severity value) the color changes to green.

If you only want the text color to change then delete bnSTYLE:' for both severity values. The color:variable changes the text for the severity. The bar and text color that I have set for yellow, which is outside of the severity settings, sets the color of the bar and the text if the temperature is above the highest set severity value or not set in the severity settings. In your case, that would be any value over 100 or would be the color of the bar if you deletebnStyle` from the severity settings.

type: custom:bignumber-card
title: Ute temp
entity: sensor.extra_temperature_temperature
scale: 70px
round: 1
min: -50
max: 100
bnStyle: var(--label-badge-yellow)
color: yellow
severity:
  - value: 1 
    bnStyle: var(--label-badge-red)
    color: red
  - value: 100
    bnStyle: var(--label-badge-green)
    color: green
3

Wonderful, problem solved! Thanks very much for your input :slight_smile:

1 Like
4

Instead of marking your comment as “solved” mark mine as solved so others with the same or similar issue will se it at the top of the post. And I’m glad I was able to help.

1 Like