Conditional appearances for icons in the card depending on other entity state?

[gitgomie]

I am looking to change the colour icons (or appearance in general) on the remote card depending on the state of an entity.
I have two examples:
-change the colour of the power icon depending on whether the TV is on or off
-change the colour of the volume slider depending on whether TV soundbar (Sonos in my case, and a separate device in HA), is muted or not

If it possible to have if else statements inside the Appearances -> CSS styles area, or more generally in the YAML, or a different way to do it altogether?

Thanks in advance!

[Nerwyn]

The Appearance CSS Styles codebox would be the correct area. You can include CSS with templates either here in the General tab or in the Elements tab with a custom element that overwrites/inherits from a default element.

Every field is templatable, so you can wrap these styles in templates to only apply on entity states. You can also reference the card config fields (or custom element individual config) using config in templates as shown below. This style in the general tab appearance CSS styles field would color the power button when the configured media player is on.

{% if is_state(config.media_player_id, "on") %}
#power::part(icon) {
  color: var(--red-color);
}
{% endif %}

See this section in the README for more information on CSS styles in the general tab, this section for custom element appearance options, and this section for more information on template support in this card.

[gitgomie]

Thanks for the info and quick reply, it is much appreciated. See picture below, I can't quite get this working. I'm sure it is my fault and that I haven't set something up properly or am using improper syntax - sorry in advance.

If I remove the if statement the colour change of the power icon works, but I can't get the if statement working.
See pic here for card setup:

I have also tried setting the same media player as the remote ID and/or media player ID's, but this also did not work.

Sorry in advance and thanks again for your help!

[Nerwyn]

Your template is incorrect. It should use either config.media_player_id (referencing the card config media player field) or "media_player.sunroom_tv".

[gitgomie]

Thanks, sorry about that. Everything working now. Thanks again!