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 
.
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:
-
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.
- Condition Type:
-
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.
- Elements to Customize:
-
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
- If temperature > 30:
- Condition Example:
-
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:
-
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.
-
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.”
-
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.