How to use the icon color in other options?

[Wolly300]

Hello together,

I could not figure out if this is already implemented or not, at least I cannot set it up.

I want to design the button-card the same way as the default tiles and already used the mushroom repo as a base.

What is missing, right now, is the color icon background. I want to set up the template in a way, it automatically grabs the icon color and uses it with 50% density for the img_cell background-color.

Right now, I'm setting the background-color this way.

styles:
  img_cell:
    - background-color: rgba(255,255,255, 0.5)
  icon:
    - color: rgb(255,255,255)

In the future, I just want to set the icon color like color: green and the background color will be calculated automatically.

[Mariusthvdb]

so just add a configuration template and be done with it?

you can probably also use (--var-button-card-light-color) to grab that automatically

styles:
  card:
    - background: >
        [[[ return 'rgb(from var(--button-card-light-color) r g b / 1)'; ]]]

or things like

type: custom:button-card
entity: light.your_light
color: auto-no-temperature
styles:
  img_cell:
    - background: |
        [[[ return 'rgb(from var(--button-card-light-color) r g b / 25%)'; ]]]

[Wolly300]

so just add a configuration template and be done with it?

you can probably also use (--var-button-color) to grab that automatically

Yes, that's the plan with the template, I just don't know, how I can access the color.

This also seems not to work.

[Mariusthvdb]

Ok, great.
so close this FR, and hop over to the button-card community thread.

Github really is for issues, or requests that are not yet available ;-)

w're there to help

[willoma]

Hello,

Today I just started doing the following successfully :

• define the standard color value for the card (not in the styles section)
• use it in JS templates elsewhere with this._config.color