Setting icon active colors with icon templates or other method?

Configuration
1

I see the following CSS sets the color for icons that can be marked active, such as lights and switches.

--paper-item-icon-active-color: #FDD835;

How can this be updated for other types, such as the zwave multi-sensor motion sensors that aren’t handled gracefully and need a value_template and icon_template? Or can it be done?

    kitchen_motion_template:
      friendly_name: Kitchen Motion Template
      value_template: >-
        {%- if is_state("sensor.aeotec_multi_02_burglar", "0") -%}
          None
        {%- else -%}
          Detected
        {%- endif -%}
      icon_template: >-
        {%- if is_state("sensor.aeotec_multi_02_burglar", "0") -%}
          mdi:walk 
        {%- else -%}
          mdi:run-fast
        {%- endif %}

Many Thanks!

2

See here - Custom UI - icon color change

3

Yes, I’ve been following that thread! Will try it out soon… Thanks

4

Is it possible to work the rgb code into my original template somehow? I am unsure of the syntax…

customize:
    binary_sensor.door_back_sensor:
      templates:
        rgb_color: "if (state === 'on') return [200, 100, 30]; else return [10, 20, 30];"
5

I see… Removed my sensor’s value_template and icon_template code and added a few lines to customize.yaml. Much cleaner and puts all of the customization together where it should be!

sensor.vision_zp3111_multisensor_4in1_burglar:
  friendly_name: Master Motion
  templates:
    _stateDisplay: "if (state === '8') return 'Detected'; else return 'None';"
    icon: "if (state === '8') return 'mdi:run-fast'; else return 'mdi:walk';"
    rgb_color: "if (state === '8') return [253, 216, 53]; else return [68, 115, 158];"
1 Like