#Use Template card values in styling

1 messages · Page 1 of 1 (latest)

dense shore
#

not sure if this is possible but i am wanting to set the background colour of the card based off the icon color so i can copy and paste the code for multiple buttons without having to change it for every single one, is it possible?

#

what i currently have is this ```type: custom:mushroom-template-card
primary: Bedroom
icon: mdi:bed
secondary: ""
tap_action:
action: navigate
navigation_path: "#bedroom"
icon_color: red
badge_icon: |-
{% if states('input_boolean.bedroom_quiet_time') == 'on' %} mdi:home-sound-in
{% endif %}
badge_color: ""
card_mod:
style: |
ha-card {
border-radius: 100px;
}
ha-card:active {
background-color: rgba(var(--rgb-icon-color), 0.2); 0.2);
}
ha-card:hover {
**background-color: rgba(0, 0, 0, 5);
}

#

but this is just black not the actual colour of the icon

crystal steppe
#

I think I see what you're trying to do. In this example, you're expecting the background color to be a shade of red based on the icon color. A couple of things come to mind:

  1. I don't know if an element in the card can reference other another element. (I could be mistaken on that, though.)
  2. The --rgb-icon-color is a variable that would be defined in your theme. It is not the color of the icon that is in the card.
  3. I'm not positive, but I think you have the alpha set twice (the 0.2);). Try getting rid of one of those.