try customUI - GitHub - Mariusthvdb/custom-ui: Adapted Custom-ui for HA 110+ / HA 2021.6
examples - custom-ui/EXAMPLES.md at 053380a7f1628ea5efe8b385e7552ec92fd35b21 · Mariusthvdb/custom-ui · GitHub
Then I don’t understand your description. Is only the binary sensor „xxx“ supposed to change colours? If so, then:
styles:
icon:
- color: |
[[[
var e = states['binary_sensor.xxx'].state;
var x = states['input_boolean.xxx_arm'].state;
if (e == 'on' && x == 'on') return 'red';
if (e == 'on' && x == 'off') return 'blue';
if (e == 'off' && x == 'on') return 'yellow';
if (e == 'off' && x == 'off') return 'grey';
return 'pink';
]]]
„e“ and „x“ are variables to clear the following if/else conditions.
return 'pink';
is a shortform for else and a kind of fallback, if no condition is met.
Forgive me, the logic of what you wrote is clear and it is what I need but, I have not the faintest idea where to put it.
I am from the Vera system, it was enough to look for a plugin or a Luup code to do actions.
Definitely HA is more complete, I connected my google home, did automation with zwave devices but, HA is not for beginners like me!
Whenever I look for something in the community, it seems to assume that everyone is an expert … I download integrations, I create directories, I copy files, I modify the now very long configuration.yaml that sometimes gives errors, then I look for other solutions that suggest others integrations with installations in an old and modern way with examples that lead to other links … I’m definitely inside a washing machine.
I end up copying and pasting nonsense codes to randomly test … it’s humiliating
My poor logic would like me to insert your code in the button, change the names and everything works … instead I’ll have to add who knows what to get to a solution, believe me, it’s frustrating.
But on the other hand: I think, every system, that allows its users to manipulate the given standards and do their own special stuff, request knowledge about how the „engine runs“. 
But: It will become easier.
How was this implemented in the Vera system?
I really hope so
It has been a few years since the installation of my Vera system and I don’t remember well, however, each sensor has properties such as parameters and settings with fields such as icon type, color, association etc; Each sensor has by default the switch “ARMED/DISARMED”, to allow the creation of automations on condition. Unfortunately, the Vera System was very old and had been standing still for over 10 years.
Thanks for your interest, I will try a few more attempts but, I would appreciate so much more help on my problem, thanks
Sounds convenient! But: Now you want all the color conditions, and this request a little bit more effort… Here is an example, how you can built your card:
type: custom:button-card
entity: binary_sensor.xxx
triggers_update: all
styles:
icon:
- color: |
[[[
var e = entity.state;
var x = states['input_boolean.xxx_arm'].state;
if (e == 'on' && x == 'on') return 'red';
if (e == 'on' && x == 'off') return 'blue';
if (e == 'off' && x == 'on') return 'yellow';
if (e == 'off' && x == 'off') return 'grey';
else return 'lightgrey';
]]]
4 Likes
Great, it works perfectly, now I know what to work on and thank you.
I will do this to all sensors and, if I may venture, in my opinion, each sensor should have by default a switch that arms or disarms it because the condition would make the automation easier for amateurs. Thank you again.
I went ahead and now I configure the floor plan 
, so I tried to use your code with “paper-buttons-row” but it doesn’t seem to be compatible, moreover to the touch, it should change the state of the “input_boolean” but it doesn’t happen … where am i wrong?
type: picture-elements
image: /local/piantina/casa.png
elements:
- type: custom:paper-buttons-row
action: call-service
service: input_boolean.toggle
service_data: {}
target:
entity_id: input_boolean.sensorecucinaarm
buttons:
- entity: binary_sensor.sensore_cucina
layout: icon
state_icons:
'on': mdi:motion-sensor
'off': mdi:leak
styles:
button:
color: |
[[[
var e = entity.state;
var x = states['input_boolean.sensorecucinaarm'].state;
if (e == 'on' && x == 'on') return 'red';
if (e == 'on' && x == 'off') return 'white';
if (e == 'off' && x == 'on') return 'yellow';
if (e == 'off' && x == 'off') return 'grey';
else return 'lightgrey';
]]]
style:
top: 18%
left: 35%
I have to do this for about 12 sensors … is this the right way or is there a more “practical” method?
I don’t use that, but I think, that a) the indentation is wrong and must be
styles:
button:
color: |
…
and b) that the code must be Jinja (as in Developer Tools → Templates):
{% set e = states('binary_sensor.sensore_cucina') %}
{% set x = states('input_boolean.sensorecucinaarm') %}
{% if (e == 'on' and x == 'on') %} red
{% elif (e == 'on' and x == 'off') %} white
{% elif (e == 'off' and x == 'on') %} yellow
{% elif (e == 'off' and x == 'off') %} grey
{% else %} lightgrey
{% endif %}
1 Like
Thanks to your help, I went ahead with my project, and made a card with all the sensors that I arm and disarm.
Now I would like to add the “secondary_info: last-changed” function but I would like it to refer to the sensor ‘binary_sensor.senso_soggiorno’, what should I do?
type: entities
entities:
- entity: input_boolean.sensoresoggiornoarm
name: Soggiorno
icon: mdi:walk
secondary_info: last-changed
card_mod:
style: |
:host {
--paper-item-icon-color:
{% set e = states('binary_sensor.sensore_soggiorno') %}
{% set x = states('input_boolean.sensoresoggiornoarm') %}
{% if (e == 'on' and x == 'on') %} red
{% elif (e == 'on' and x == 'off') %} orange
{% elif (e == 'off' and x == 'on') %} blue
{% elif (e == 'off' and x == 'off') %} gray
{% else %} lightgrey
{% endif %}
}
I’m only aware of a method by using card_mod:
type: entities
show_header_toggle: false
state_color: true
entities:
- entity: light.flur
name: Flurlicht
secondary_info: true
card_mod:
style:
hui-generic-entity-row:
$: |
.info .secondary {color: red;}
.info .secondary::before {
content: "Garderobe changed at: {{ as_timestamp(states.light.garderobe.last_changed)|timestamp_custom('%d.%m.%y %H:%M', true) }}";
color: green;
}
Hi Guys,
I’ve a picture-elements card where I’m trying to change the icon color based on a motion sensor last trigger time.
Example: If {{ relative_time(states.binary_sensor.front_motion.last_changed) }} is less than 5 minutes I want the icon color to show Red or else Green.
With the following I’m able to change the color based on the state of this sensor, could any one please help me how can I do the same with last changed time.
icon_color: |-
{% if is_state("binary_sensor.front_motion", "on") %}
red
{% else %}
green
{% endif %}
1 Like
{% set ls = states.binary_sensor.front_motion.last_changed %}
{{ now() - ls < timedelta(minutes=5) }}
1 Like
Thanks much @pedolsky
Following is my working code
icon_color: |-
{% set ls = (states.binary_sensor.front_motion.last_changed) %}
{% if ( now() - ls < timedelta(minutes=5) ) %}
red
{% else %}
green
{% endif %}
This is what i have been searching for! I do have a question for you tho. I am trying to create a garbage collection card on my dashboard, and I would like to have 1 card with 1 icon or picture displaying. when its recycle day the icon will switch from grey to blue and the following week when its yard waste it will switch from grey to green. that seems the most simple but im not sure how to attach 2 entities to 1 icon. which leaves me to believe it might be easier to get images of a blue trash can and a green trash can and display which ever boolean is currently on.
Hi,
I have a small question regarding changing my icon color.
I need to change the color of my icon with 1 sensor.valve.x entity where the status is on or off, and with feedback of a service, where the results can be heating, cooling or off.
Is this possible? If yes, can somebody help me with the syntax?
thx,
Jurgen
Hi @jukkevp,
I have managed to get the icon and the text color to change on a card based on a value. Not sure if this was exactly what you were after.
Basically if I am exporting electricity everything is green, or red if I am importing electricity.
It might not be the best/easiest way to do it, but it’s a start.
show_name: true
show_icon: true
type: custom:button-card
triggers_update: all
variables:
time: |
[[[
return states["input_datetime.current_exporting_power_last_updated"].state.slice(-8)
]]]
tap_action:
action: none
entity: sensor.smart_meter_power_status
state:
- value: Exporting.. :)
icon: mdi:transmission-tower-import
color: green
styles:
card:
- color: green
- font_size: 16px
name: |
[[[
return "Started Exporting Power @ " + [variables.time] + " :)"
]]]
- value: Importing.. :(
icon: mdi:transmission-tower-export
color: red
styles:
card:
- color: red
- font_size: 16px
name: |
[[[
return "Started Importing Power @ " + [variables.time] + " :("
]]]
hold_action:
action: none
screenshot of exporting.
Graham.
1 Like
I’m trying to get an icon to change colour based on the relative value of several entities and cannot get it to work at all. It just stays one colour…
Last iteration of code was:
type: custom:button-card
show_entity_picture: true
entity: sensor.soc
name: Use Power?
styles:
icon:
- color: |
[[[
var soc = states['sensor.soc'].state;;
var green = states['input_number.test_target_green'].state;
var amber = states['input_number.test_target_amber'].state;
if (soc > green) return 'green';
if (soc > amber) return 'amber';
else return 'red';
]]]
tap_action:
action: none
show_state: false
show_label: false
size: 50%`
I’ve tried for hours… Any help gratefully received.