Color Custom Button Cards based on Attribute States

Share your Projects! Dashboards & Frontend
1

Wouldn’t it be great to see stock rates in colors based on positive or negative changes?

I have found this great Custom component: Custom Component Avanza Stock

But how is it possible set the color on the Custom Button Card (Lovelace: Button card) when it is an attribute ?

image

2

I solved it myself

entity: sensor.stock_tesla
color_type: card
styles:
  state:
    - color: |
        [[[
          if (states['sensor.stock_tesla']) {
            if (states['sensor.stock_tesla'].attributes.change < 0) return 'red';
            else return 'green'; } 
        ]]]
show_name: true
show_icon: false
show_state: true
name: Tesla
type: 'custom:button-card'

image

7 Likes
3

here is some other examples for reference, you might have to do some tweeking:

type: 'custom:button-text-card'
title: |
  [[[ return states["sensor.purpleair_description"].state ]]]
subtitle: Air Quaility
icon_size: 55
icon_color: |
  [[[
    if(states["sensor.purpleair_aqi_a"].state > 300){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 200){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 150){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 100){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 50){
      return 'black';
    } else{
      return 'black';
    }
  ]]]
icon: |
  [[[
    if(states["sensor.purpleair_aqi_a"].state > 300){
      return 'mdi:emoticon-dead';
    } else if(states["sensor.purpleair_aqi_a"].state > 200){
      return 'mdi:emoticon-cry';
    } else if(states["sensor.purpleair_aqi_a"].state > 150){
      return 'mdi:emoticon-sad';
    } else if(states["sensor.purpleair_aqi_a"].state > 100){
      return 'mdi:emoticon-confused';
    } else if(states["sensor.purpleair_aqi_a"].state > 50){
      return 'mdi:emoticon-neutral';
    } else{
      return 'mdi:emoticon-excited';
    }
  ]]]
font_color: |
  [[[
    if(states["sensor.purpleair_aqi_a"].state > 300){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 200){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 150){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 100){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 50){
      return 'black';
    } else{
      return 'black';
    }
  ]]]
large: true
background_color: |
  [[[
    if(states["sensor.purpleair_aqi_a"].state > 300){
      return '#731425';
    } else if(states["sensor.purpleair_aqi_a"].state > 200){
      return '#8C1A4B';
    } else if(states["sensor.purpleair_aqi_a"].state > 150){
      return '#EA3324';
    } else if(states["sensor.purpleair_aqi_a"].state > 100){
      return '#EF8533';
    } else if(states["sensor.purpleair_aqi_a"].state > 50){
      return '#FFFF55';
    } else{
      return '#68FF43';
    }
  ]]]
2 Likes
4

I don’t seem to able to change the color of the icon. when I use the code:


styles:
  state:
    - color: |
        [[[
          if (states['sensor.stock_tesla']) {
            if (states['sensor.stock_tesla'].attributes.change < 0) return 'red';
            else return 'green'; } 
        ]]]

It does change the color of the state, but I would like to change the icon color depending on the state of an attribute.

5

Then it could be something like this:


show_name: true
show_icon: true
type: custom:button-card
state:
  - value: 'on'
    color: red
    styles:
    card:
    - background-color: orange

  - value: 'off'
    color: blue
    styles:
    card:
    - background-color: green
1 Like
6

Can you please provide more examples?