Brightness scaling icon color according to separate entity state information

[joshlawless]

Is it possible to emulate the HA default brightness for an icon based on something other than a brightness attribute?

I'm using a custom button for a group that includes several entities from the light domain. The group state is only ever 'on' or 'off', but I'd love to be able to modify the icon color based on the brightest light in the group. I already have a template sensor that calculates this value:

     master_bedroom_max_brightness:
       value_template: >
         {{[(state_attr('light.master_entryway','brightness') | int), (state_attr('light.master_bedside_can_hers','brightness') | int), (state_attr('light.master_bedside_can_his','brightness') | int), (state_attr('light.master_east_cans','brightness') | int), (state_attr('light.master_retreat','brightness') | int), (state_attr('light.master_wet_bar','brightness') | int) ] | max }}

but I can't figure out how to leverage it in a custom button. The templating works to output this value in, e.g., a label tag, but I can't seem to get it to work in any kind of color styling

[[[ return states['sensor.master_bedroom_max_brightness'].state ;]]]

works as expected to output the numeric value from the sensor, which I can confirm by dumping it into a label: value, but I can't figure out how to scale an icon from one color to another based on the value. Can this be done with a custom button?

[RomRider]

You will need to use that value in the brightness of the icon:

styles:
  icon:
    - brightness: Put your template here. this CSS attribute goes from 0 to 1

[dcapslock]

The style to use is opacity

e.g.

type: custom:button-card
entity: light.kitchen_lights
layout: icon_name
section_mode: true
grid_options:
  rows: 2
  columns: 12
styles:
  icon:
    - opacity: |
        [[[
          return states['input_number.increment_test'].state / 100
        ]]]

Screen.Recording.2025-09-04.at.7.37.31.am.mov