made it, the themes folder was wrong 
manyyyyyy thanks Mariusthvdb
1 Like
Hello Mariustvhbdb how are you?
Is possible change a theme of one entity when the state of a sensor change?
Best regards.
you mean the entity is not the sensor of which you check the state ?
sure that is possible.
see the docs on home-assistant-custom-ui/docs/templates.md at master · andrey-git/home-assistant-custom-ui · GitHub
light.kitchen:
templates:
# Uses global variable - might be slow.
theme: >
if (entities['light.bedroom'].state === 'on') return 'red'; else return 'default';
yesssssssssss, many thanks.
i wanted to do this
Make a group that contains all on entities.
Note that the group itself must be preexisting, CustomUI can’t create a new group.
Note this doesn’t change group membership that the backend sees, so calling services on this group would only affect the original members.
customize:
group.on_devices:
templates:
entity_id: return Object.keys(entities).filter(key => entities[key].state === 'on')
but didn’t work, do you have this?
i have the same problems. The icon is not displayed, so it has no color.
customize.yaml
sensor.chromecast:
icon: >
if (state === 'Home') return 'mdi:chromecast';
return 'mdi:lan-disconnect';
icon_color: >
if (state === 'Home') return 'rgb(0, 171, 0)';
return 'rgb(255, 0, 0)';
sensors.yaml
- platform: template
sensors:
chromecast:
friendly_name: Chromecast
value_template: "{% if is_state('device_tracker.chromecast', 'home') %}Connected{% else %}Offline{% endif %}"
configuration:
frontend:
themes:
home:
label-badge-red: green
extra_html_url:
- /local/custom_ui/state-card-iframe.html
# themes: !include_dir_merge_named themes/you miss the ‘templates’:
in customize.yaml you could try this:
sensor.chromecast:
templates:
icon: >
if (state === 'Home') return 'mdi:chromecast';
return 'mdi:lan-disconnect';
icon_color: >
if (state === 'Home') return 'rgb(0, 171, 0)';
return 'rgb(255, 0, 0)';
not sure if i read your config right, but i think your sensor is a templates sensor, in which case you should be able to do it in the definition of the sensor itself:
- platform: template
sensors:
chromecast:
friendly_name: Chromecast
value_template: >
{% if is_state('device_tracker.chromecast', 'home') %} Connected
{% else %} Offline
{% endif %}
icon_template: >
{% if is_state('device_tracker.chromecast', 'home') %} 'mdi:chromecast'
{% else %} 'mdi:lan-disconnect'
{% endif %}
in which case you would only need the icon_color template in the customize section
The value change still works but the icon is still gone. I have copy paste youre code above into the correct files.
is the state ‘home’, and not ‘Home’ ?
then try:
icon_color: >
if (state === 'home') return 'rgb(0, 171, 0)';
return 'rgb(255, 0, 0)';
always very important to be case sensitive and test in the dev tools for state.
wait, i see that the icon mdi:chromecast you try, don’t exist… it is mdi:cast:
it it indeed home not Home. i also changed to mdi:google-chome restarted but still no effect
i also tried:
device_tracker.chromecast:
templates:
theme: >
if (state === 'home') return 'green';
return 'red';
_stateDisplay: >
if (state === 'home') return 'Online';
return 'Offline';
cause i believe with this code if its going to work, i dont need the extra sensor anymore, right?
Should be chrome…
But better mdi:cast
Are you sure that doesnt work? Please copy your full code so we can check
configuration.yaml
homeassistant:
name: Home
latitude: !secret home_latitude
longitude: !secret home_longitude
elevation: 0
unit_system: metric
time_zone: Europe/Amsterdam
customize: !include customize.yaml
auth_providers:
- type: homeassistant
mqtt:
broker: !secret mqtt_broker
port: !secret mqtt_port
username: !secret mqtt_user
password: !secret mqtt_password
####################################################
# #
# Enables configuration UI #
# #
####################################################
config:
http:
discovery:
conversation:
history:
logbook:
map:
tts:
- platform: google
####################################################
# #
# Includes #
# #
####################################################
automation: !include automations.yaml
device_tracker: !include device_trackers.yaml
frontend: !include_dir_merge_named frontend/
group: !include_dir_merge_named groups/
input_select: !include input_select.yaml
light: !include hyperion.yaml
media_player: !include htpc_01_connection.yaml
panel_iframe: !include panel_iframe.yaml
script: !include_dir_merge_named scripts/
sensor: !include sensors.yaml
weather: !include openweathermap.yaml
zone: !include zone.yaml
customize.yaml
script.harmony_hub_woonkamer_activity_films_tvshows:
icon: mdi:filmstrip
script.harmony_hub_woonkamer_activity_netflix:
icon: mdi:netflix
script.harmony_hub_woonkamer_activity_spotify:
icon: mdi:spotify
script.harmony_hub_uitschakelen:
icon: mdi:remote
script.harmony_hub_woonkamer_activity_youtube:
icon: mdi:youtube
script.harmony_hub_woonkamer_activity_ziggo_tv:
icon: mdi:television
sensor.weathercardanimated_iframe:
custom_ui_state_card: state-card-iframe
config:
height: 350
width: 108
scale: 1
url: 'https://embed.windy.com/embed2.html'
sensor.chromecast:
templates:
icon: >
if (state === 'Connected') return 'mdi:cast';
return 'mdi:lan-disconnect';
icon_color: >
if (state === 'Connected') return 'rgb(0, 171, 0)';
return 'rgb(255, 0, 0)';
group.steamonline:
templates:
entity_id: return Object.keys(entities).filter(key => entities[steam].state === 'Online')
device_tracker.iiidefconiii_s8thomas:
templates:
theme: if (state === 'home') return 'home'; else return null;
device_tracker.jp:
templates:
theme: if (state === 'home') return 'home'; else return null;
device_tracker.defap01:
templates:
theme: if (state === 'home') return 'home'; else return null;
device_tracker.chromecast:
templates:
theme: >
if (state === 'home') return 'green';
return 'red';
_stateDisplay: >
if (state === 'home') return 'Online';
return 'Offline';
sensors.yaml
#sensor 2
- platform: mqtt
state_topic: "owntracks/homeassistant/th"
name: "Battery Tablet"
unit_of_measurement: "%"
value_template: '{{ value_json.batt }}'
device_class: battery
#sensor 3
- platform: google_travel_time
name: !secret my_work_name
api_key: !secret api_key_google
origin: !secret home_adress
destination: !secret my_work_adress
#sensor 5
- platform: systemmonitor
resources:
- type: ipv4_address
arg: Ethernet
- type: network_in
arg: Ethernet
- type: network_out
arg: Ethernet
- type: packets_in
arg: Ethernet
- type: packets_out
arg: Ethernet
- type: disk_free
arg: /home
- type: memory_free
- type: processor_use
- type: since_last_boot
- type: last_boot
- type: disk_use_percent
arg: c:\
- type: disk_use_percent
arg: d:\
- type: disk_use_percent
arg: e:\
#sensor 6
- platform: speedtest
monitored_conditions:
- ping
- download
- upload
#sensor 7 # STEAM FRIENDS #
##known devices sensors
- platform: template
sensors:
since_last_boot_templated:
friendly_name: Uptime
value_template: "{{ states.sensor.since_last_boot.state.split('.')[0] }}"
remote_harmony_hub:
friendly_name: Current Activity
value_template: "{{ states.remote.harmony_hub.attributes.current_activity }}"
icon_template: "{% if is_state_attr('remote.harmony_hub','current_activity','Netflix') %} mdi:netflix{% elif is_state('remote.harmony_hub','current_activity','Films & TV Shows') %} mdi:filmstrip{% elif is_state('remote.harmony_hub', 'off') %} mdi:power-sleep{% else %}mdi:help{% endif %}"
chromecast:
friendly_name: Chromecast
value_template: >-
{% if is_state('device_tracker.chromecast', 'home') %} Connected
{% else %} Offline
{% endif %}
icon_template: >-
{% if is_state('device_tracker.chromecast', 'home') %} 'mdi:chromecast'
{% else %} 'mdi:lan-disconnect'
{% endif %}
defap01:
friendly_name: DEF-AP-01
value_template: "{% if is_state('device_tracker.defap01', 'home') %}Connected{% else %}!no-reply, please check!{% endif %}"
icon_template: "{% if is_state('device_tracker.defap01', 'home') %} mdi:access-point-network{% else %}mdi:lan-disconnect{% endif %}"
deffw01:
friendly_name: DEF-FW-01
value_template: "{% if is_state('device_tracker.deffw01', 'home') %}Connected{% else %}!no-reply, please check!{% endif %}"
icon_template: "{% if is_state('device_tracker.deffw01', 'home') %} mdi:router-wireless{% else %}mdi:lan-disconnect{% endif %}"
defprn01:
friendly_name: DEF-PRN-01
value_template: "{% if is_state('device_tracker.defprn01', 'home') %}Connected{% else %}Offline{% endif %}"
icon_template: "{% if is_state('device_tracker.defprn01', 'home') %} mdi:printer{% else %}mdi:lan-disconnect{% endif %}"
harmonyhub:
friendly_name: HarmonyHub
value_template: "{% if is_state('device_tracker.harmonyhub', 'home') %}Connected{% else %}!no-reply, please check!{% endif %}"
icon_template: "{% if is_state('device_tracker.harmonyhub', 'home') %} mdi:remote{% else %}mdi:lan-disconnect{% endif %}"
homeassistant:
friendly_name: Home Assistant
value_template: "{% if is_state('device_tracker.homeassistant', 'home') %}Connected{% else %}!no-reply, please check!{% endif %}"
icon_template: "{% if is_state('device_tracker.homeassistant', 'home') %} mdi:tablet-android{% else %}mdi:lan-disconnect{% endif %}"
htpc01:
friendly_name: Kodi HTPC-01
value_template: "{% if is_state('device_tracker.htpc01', 'home') %}Connected{% else %}!no-reply, please check!{% endif %}"
icon_template: "{% if is_state('device_tracker.htpc01', 'home') %} mdi:kodi{% else %}mdi:lan-disconnect{% endif %}"
htpc02:
friendly_name: Kodi HTPC-02
value_template: "{% if is_state('device_tracker.htpc02', 'home') %}Connected{% else %}Offline{% endif %}"
icon_template: "{% if is_state('device_tracker.htpc02', 'home') %} mdi:kodi{% else %}mdi:lan-disconnect{% endif %}"
iiidefcontoweriii:
friendly_name: IIIdefcontowerIII
value_template: "{% if is_state('device_tracker.iiidefcontoweriii', 'home') %}Connected{% else %}Offline{% endif %}"
icon_template: "{% if is_state('device_tracker.iiidefcontoweriii', 'home') %} mdi:desktop-tower{% else %}mdi:lan-disconnect{% endif %}"
ltjoella:
friendly_name: Laptop Joella
value_template: "{% if is_state('device_tracker.ltjoella', 'home') %}Connected{% else %}Offline{% endif %}"
icon_template: "{% if is_state('device_tracker.ltjoella', 'home') %} mdi:laptop-windows{% else %}mdi:lan-disconnect{% endif %}"
toon:
friendly_name: Toon
value_template: "{% if is_state('device_tracker.toon', 'home') %}Connected{% else %}!no-reply, please check!{% endif %}"
icon_template: "{% if is_state('device_tracker.toon', 'home') %} mdi:flash{% else %}mdi:lan-disconnect{% endif %}"
vsx992:
friendly_name: Pioneer VSX-922
value_template: "{% if is_state('device_tracker.vsx992', 'home') %}Connected{% else %}Offline{% endif %}"
icon_template: "{% if is_state('device_tracker.vsx992', 'home') %} mdi:surround-sound-5-1{% else %}mdi:lan-disconnect{% endif %}"
weathercardanimated_iframe:
value_template: iframe
group1_home.yaml
Home:
name: Home
icon: mdi:home
view: yes
entities:
- device_tracker.iiidefconiii_s8thomas
- device_tracker.jp
- device_tracker.tg
- device_tracker.tp
- sensor.battery_tablet
- group.openweathermap
- group.weathercardanimated_iframe
- group.systemmonitor
- group.activities
- group.htpc01
- group.devices
- group.lockouts
- media_player.iiidefconiiihuiskamer
- media_player.htpc01
weathercardanimated_iframe:
name: ' '
entities:
- sensor.weathercardanimated_iframe
systemmonitor:
name: Home Assistant Status
entities:
- sensor.since_last_boot_templated
- sensor.last_boot
- sensor.memory_free
- sensor.processor_use
- disk.use_percent_c
- disk.use_percent_d
- disk.use_percent_e
activities:
name: Activities
entities:
- sensor.remote_harmony_hub
- script.harmony_hub_woonkamer_activity_films_tvshows
- script.harmony_hub_woonkamer_activity_netflix
- script.harmony_hub_woonkamer_activity_spotify
- script.harmony_hub_woonkamer_activity_youtube
- script.harmony_hub_woonkamer_activity_ziggo_tv
- script.harmony_hub_uitschakelen
htpc01:
name: Kodi HTPC-01
entities:
- input_select.kodi_results
openweathermap:
name: Weather
entities:
- weather.weather
devices:
name: Devices
entities:
- sensor.chromecast
- sensor.defap01
- sensor.deffw01
- sensor.defprn01
- sensor.harmonyhub
- sensor.homeassistant
- sensor.htpc01
- sensor.htpc02
- sensor.iiidefcontoweriii
- sensor.ltjoella
- sensor.toon
- sensor.vsx992
device_trackers
#Device_trackers
- platform: nmap_tracker
hosts:
- !secret include_subnets1
- !secret include_subnets2
scan_options: " --privileged -sP "
home_interval: 600
interval_seconds: 300
consider_home: 600
new_devices_defaults:
track_new_devices: yes
hide_if_away: false
#owntracks
- platform: owntracks
home_interval: 600
interval_seconds: 300
consider_home: 600
new_devices_defaults:
track_new_devices: yes
hide_if_away: false
frontend.yaml
themes:
home:
label-badge-red: green
extra_html_url:
- /local/custom_ui/state-card-iframe.html
# themes: !include_dir_merge_named themes/
Thats what i have so far
Should be ‘mdi:cast’
Only had a quick glance now (on phone ) will check later for more if necessary.
back again:
in customize.yaml:
you have:
sensor.chromecast:
templates:
icon: >
if (state === 'Connected') return 'mdi:cast';
return 'mdi:lan-disconnect';
icon_color: >
if (state === 'Connected') return 'rgb(0, 171, 0)';
return 'rgb(255, 0, 0)';
take out the icon template here.
so use:
sensor.chromecast:
templates:
icon_color: >
if (state === 'Connected') return 'rgb(0, 171, 0)';
return 'rgb(255, 0, 0)';
in sensors.yaml
you have:
chromecast:
friendly_name: Chromecast
value_template: >-
{% if is_state('device_tracker.chromecast', 'home') %} Connected
{% else %} Offline
{% endif %}
icon_template: >-
{% if is_state('device_tracker.chromecast', 'home') %} 'mdi:chromecast'
{% else %} 'mdi:lan-disconnect'
{% endif %}
so here you set the icon, but it is not correct:
replace 'mdi:chromecast' with 'mdi:cast'
that should do it. I hope…
going to try, still no icon 
Hmm. What does it do when you enter this in the dev-template tool:
{% if is_state(‘device_tracker.chromecast’, ‘home’) %} ‘mdi:chromecast’
{% else %} ‘mdi:lan-disconnect’
{% endif %}
Please make a screenshot?
btw, i now spot you only have this in your frontend.yaml:
themes:
home:
label-badge-red: green
extra_html_url:
- /local/custom_ui/state-card-iframe.html
which means you don’t have custom-ui installed… you should do that first: home-assistant-custom-ui/docs/installing.md at master · andrey-git/home-assistant-custom-ui · GitHub
still, without this, you should be able to customize the template sensors icon. But i think using the correct name for the icon solves that 
after you’ve installed custom-ui, this:
sensor.chromecast:
templates:
icon_color: >
if (state === 'Connected') return 'rgb(0, 171, 0)';
return 'rgb(255, 0, 0)';
and
device_tracker.chromecast:
templates:
theme: >
if (state === 'home') return 'green';
return 'red';
_stateDisplay: >
if (state === 'home') return 'Online';
return 'Offline';
will start to work. You could even add the icon template to the device_tracker if you want.
what’s cool too is using a device_class option, in your case on the binary_sensor:Template - Home Assistant and Binary sensor - Home Assistant (you then take out the icon_template in the template sensor, since it is then handled by the device_class setting) use ‘connectivity’. You can also leave out the _stateDisplay option form the customize section then.
Unless of course you want it all set manually.
Error rendering template: TemplateSyntaxError: unexpected char ‘‘’ at 15
i will dig deeper in custum-ui later, is this the same as lovelace?
probably a curly-quote… happens when copying from the community forum every once in a while.
edit with you text editor, and replace all single quotes to be sure. But, and this is probably the 4th time I suggest, you use the wrong mdi: icon. It doesn’t exist so won’t show up… use mdi:cast
No.
You really must read-up, before getting into this trouble… get to know the basics, and then start fiddling with the details…
i changed that icon already… tought if sead that also 3 times…cant find the post about it do
sensors.yaml
chromecast:
friendly_name: Chromecast
value_template: >-
{% if is_state('device_tracker.chromecast', 'home') %} Connected
{% else %} Offline
{% endif %}
icon_template: >-
{% if is_state('device_tracker.chromecast', 'home') %} 'mdi:cast'
{% else %} 'mdi:lan-disconnect'
{% endif %}this is not right, you are declaring a value_template in the customize.yaml. That should be done in the template sensor definition . In customize you customize based on the value of the state, not set the state itself.
If you want it to display the Connected / Offline, you can either use _stateDisplay here, or use the device_class in the template sensor definition.