Conditional Styling and Display Logic of card elements in GUI without yaml

[Paul1865]

I am kind of fed up with all the hassle I have to do when trying to change card elements on several conditions.Think of icon-color, the icon itself, the background-color etc.
Seeing lots of questions of other users how to do this makes me think I cannot be the only one :D .

Now I have to go into yaml and do some coding. Wouldn't is be nicer to achieve all this from GUI?

This is what I had in mind:

This feature allows users to define conditional styling and display logic directly from the Home Assistant GUI, eliminating the need for manual YAML coding, card-mods etc. It provides an intuitive interface to customize entity card appearance based on entity states or other entity conditions.

Steps to Configure Conditional Styling:

1. Define the Condition:

   • Condition Type:
     • Entity State / attribute: The state/attribute of the current entity in the card.
     • Other Entity State / attribute: The state/attribute of a different entity in Home Assistant.
   • Comparison Options:
     • Range: Define a range of states or values (e.g., 20-30 for temperature). HA may look in history for unique values an use it if.
     • Absolute Value: Define specific values (e.g., on, off, cooling, number).
   • Input Values:
     • For range: Specify a minimum and maximum value.
     • For absolute value: Specify one or more discrete values.

2. Let the user add one or more Display Elements to be styled:

   • Elements to Customize:
     • Icon: Change the displayed icon dynamically.
     • Icon Color: Define the color of the icon for specific conditions.
     • Background Color: Adjust the background color of the card based on the condition.
     • Text Style (optional): Modify the text color, font weight, or size for specific states.

3. Mapping in the background:

   • Condition Example:
     • If temperature > 30:
       • Icon: mdi:thermometer-high
       • Icon Color: red
       • Background Color: #FFE5E5
     • If state = "on":
       • Icon: mdi:power
       • Icon Color: green
       • Background Color: #E5FFEA

4. Preview and Apply:

   • Real-Time Preview: Show a live preview of the entity card as conditions and styles are applied.
   • Save Configuration: Apply changes without editing YAML files.

Use Cases:

1. Dynamic Temperature Indicator:

   • When the temperature is within a safe range, display a green icon with a neutral background.
   • If the temperature exceeds a threshold, display a red icon with a warning background.

2. Power Status Indicator:

   • Show a green icon when the power is "on" and a gray icon when "off."
   • Add a blue background when the device is in "standby."

3. Lighting Control:

   • Change the icon and color based on brightness level or on/off state.

This system offers a powerful, user-friendly way to customize Home Assistant cards, making the interface more accessible and visually dynamic without requiring coding expertise.