Custom: Button-card icon color change

Configuration Frontend
1

I have create a sensor using a template to figure out how many light are on.
I also have the button_card_template defined, and I would like to change the icon color based on whether or not there are lights on.
I chose not to do the group path as I need the sensor for the number of lights for other stuff.
Here is the template:

platform: template
sensors:
  lights_on_total:
    friendly_name: 'Total lights that are on'
    unit_of_measurement: lights
    unique_id: 93670718-63d5-4383-a7b0-bb45b289658e
    value_template: >-
      {%- set search_state = 'on' %}
      {%- set ns = namespace(lights=[]) %}
      {%- for light in states.light | selectattr('state','eq', search_state) %}
          {%- set ns.lights = ns.lights + [ light.entity_id ] %}
      {%- endfor %}
      {{ ns.lights| count }}
    attribute_templates: 
      list: >-
        {%- set search_state = 'on' %}
        {%- set ns = namespace(lights=[]) %}
        {%- for light in states.light | selectattr('state','eq', search_state) %}
            {%- set ns.lights = ns.lights + [ light.entity_id ] %}
        {%- endfor %}
        {{ ns.lights| join('\n') }}

This returns the count and the list of lights which are on.
The button card code:

button_sidebar_small_lights:
  template: button_sidebar_big
  styles:
    grid:
      - position: relative
    custom_fields:
      number_of_lights:
        - background-color: >
            [[[
              if (states['sensor.lights_on_total'].state == 0 )
                return "transparent";
              return "green";
            ]]]
        - border-radius: 50%
        - position: absolute
        - left: 70%
        - top: 10%
        - height: 15px
        - width: 15px
        - font-size: 10px
        - line-height: 15px
    card:
      - width: 55px
      - height: 55px
      - margin: 5px
      - margin-top: 10px
    icon:
      - width: 50px
      - height: 50px
      - color: >
          [[[
            if (states['sensor.lights_on_total'].state >= 0 )
              return 'green';
            return 'red';
          ]]]
  custom_fields:
    number_of_lights: >
      [[[
      if (states['sensor.lights_on_total'].state == 0)
        return null;
      return (states['sensor.lights_on_total'].state) ;
      ]]]

and finally, my code for the dashboard is:

             lights:
                card:
                  type: custom:button-card
                  template: button_sidebar_small_lights
                  icon: mdi:lightbulb-group-outline
                  entity: sensor.lights_on_total
                  tap_action: !include manticore_main_views/lights.yaml

This is what this looks like now:
Animation

You can see the icon remains green, no matter how many lights are on.
The small icon shows how many lights are on, and it disappears when no lights are on. Therefore, the icon should return to the default color which is like the one shown next to it.

Can you see anything in my code that prevents this from working?

2

Should that read if (states['sensor.lights_on_total'].state > 0 )

1 Like
3

i think that you must place zero in quotes:

 if (states['sensor.lights_on_total'].state >= '0' )
4

it’s embarrassing. Of course it was behaving as I described. The outcome of the statement is always true.
Changed to

- color: >
   [[[
      if (states['sensor.lights_on_total'].state >= 1 )
        return 'green';
      return '#E5E5E5';
    ]]]

Now for the color, this is actually also a variable from my theme, text-primary-color: “#E5E5E5”

What is the proper syntax for returning the variable

var(--text-primary-color)

That way it is dynamic in case I ever change the Theme.

5

Working code:

- color: >
          [[[
            if (states['sensor.lights_on_total'].state >= 1 )
              return 'green';
            return 'var(--text-primary-color)';
          ]]]