Need help with sensor icon color based on state

Configuration
31

i did that and use this config
sensor.onofredual1601882_sensor_portao:
friendly_name: Estado do Portão
templates:
icon: mdi:gate
icon_color: if (state === ‘CLOSE’) return ‘rgb(255, 0, 0)’; else return ‘rgb(51, 255, 51)’;
theme: >
if (state === ‘CLOSE’) return ‘rgb(255, 0, 0)’; return ‘rgb(51, 255, 51)’;

i used to have the icon color change but now iven the icon is not correct

where do i put this ?

 # Customize entities matching a pattern
 # to override use: custom_ui_state_card: null
##########################################################################################

"*.*":
  custom_ui_state_card: state-card-custom-ui
32

configuration.yaml:

##########################################################################################
# Base configuration
##########################################################################################

homeassistant:
  name: Name
  latitude: !secret latitude
  longitude: !secret longitude
  elevation: !secret elevation
  unit_system: metric
  time_zone: !secret time_zone
  customize: !include_dir_merge_named customize
  customize_glob: !include customize_glob.yaml

config:
frontend: !include frontend.yaml
customizer: !include customizer.yaml

frontend.yaml:

##########################################################################################
# https://home-assistant.io/components/frontend/#javascript_version
# https://home-assistant.io/developers/frontend_creating_custom_ui/
##########################################################################################
##########################################################################################
# https://github.com/home-assistant/home-assistant/pull/10776
##########################################################################################

javascript_version: auto

themes: !include_dir_merge_named frontend_themes

extra_html_url:
  - /local/custom_ui/state-card-custom-ui.html
  - /local/custom_ui/state-card-tiles.html
  - /local/custom_ui/state-card-value_only.html
  - /local/custom_ui/custom-weather-card.html

#  - /local/custom_ui/state-card-table.html
#  - /local/custom_ui/state-card-custom_scene.html
#  - /local/custom_ui/state-card-text.html

extra_html_url_es5:
  - /local/custom_ui/state-card-custom-ui-es5.html
  - /local/custom_ui/state-card-tiles_es5.html
  - /local/custom_ui/state-card-value_only.html
  - /local/custom_ui/custom-weather-card.html

#  - /local/custom_ui/state-card-custom_scene.html
#  - /local/custom_ui/state-card-text.html

folder frontend_themes contains:

51

themes_templating.yaml contains:

##########################################################################################
# Themes for templating entities
##########################################################################################

red:
  primary-text-color: red
#  paper-card-background-color: white #'#fcbba1'
  paper-item-icon-color: red
  secondary-text-color: red
  label-badge-background-color: white #'#fcbba1'
  label-badge-text-color: red

blue:
  primary-text-color: blue
  paper-card-background-color: white" #'#fcbba1'
  paper-item-icon-color: blue
  secondary-text-color: blue
  label-badge-background-color: white #'#fcbba1'
  label-badge-text-color: blue
  label-badge-red: blue
  label-badge-border-color: blue

bluewhite:
  primary-text-color: bluewhite
  paper-card-background-color: white
  paper-item-icon-color: bluewhite
  secondary-text-color: blue
  label-badge-background-color: white
  label-badge-text-color: blue

green:
  primary-text-color: green
#  paper-card-background-color: white
  paper-item-icon-color: green
  secondary-text-color: green
  label-badge-background-color: white
  label-badge-text-color: green
  label-badge-red: green
  label-badge-border-color: lightgrey

yellow:
  primary-text-color: yellow
#  paper-card-background-color: lightgrey
  paper-item-icon-color: yellow
  secondary-text-color: yellow
  label-badge-background-color: lightgrey
  label-badge-text-color: yellow
  label-badge-red: grey
  label-badge-border-color: yellow

yellow_only:
  primary-text-color: yellow
  paper-item-icon-color: yellow
  secondary-text-color: yellow
  label-badge-text-color: yellow

orange:
  primary-text-color: orange
#  paper-card-background-color: white
  paper-item-icon-color: orange
  secondary-text-color: orange
  label-badge-background-color: white
  label-badge-text-color: orange
  label-badge-red: orange
  label-badge-border-color: orange

brown:
  primary-text-color: brown
#  paper-card-background-color: white
  paper-item-icon-color: brown
  secondary-text-color: brown
  label-badge-background-color: white
  label-badge-text-color: brown
  label-badge-red: brown
  label-badge-border-color: brown

brown_only:
  primary-text-color: brown
  paper-item-icon-color: brown
  secondary-text-color: brown
  label-badge-border-color: brown


grey:
  primary-text-color: grey
#  paper-card-background-color: white
  paper-item-icon-color: grey
  secondary-text-color: grey
  label-badge-red: grey
  label-badge-border-color: lightgrey
  label-badge-background-color: white
  label-badge-text-color: grey

folder customize contains:

58

customize_device_trackers.yaml contains:

device_tracker.asus_router:
  templates:
    theme: >
      if (state === 'home') return 'green';
      return 'red';
    _stateDisplay: >
      if (state === 'home') return 'Online';
      return 'Offline';

customize_glob.yaml contains:

##########################################################################################
 # Customize entities matching a pattern
 # to override use: custom_ui_state_card: null
##########################################################################################

"*.*":
  custom_ui_state_card: state-card-custom-ui

device_tracker.*_bt:
  templates:
    icon: >
      if (state === 'home') return 'mdi:bluetooth'; 
      return 'mdi:bluetooth-off';

group.*_lights:
  show_last_changed: true

think that should get you going for starters…:wink:

33

so i need the customize_glob.yaml ?

34

i got the icon back but the text still normal :frowning:

35

estais like this

image

but i want the text at the same color has the logo

and i have this in the custumize_sensor.yaml

sensor.onofredual1601882_sensor_portao:
  friendly_name: Estado do Portão
  templates:
    icon: mdi:gate
    icon_color: if (state === 'CLOSE') return 'rgb(255, 0, 0)'; else return 'rgb(51, 255, 51)';
    theme: >
      if (state === 'CLOSE') return 'rgb(255, 0, 0)';  return 'rgb(51, 255, 51)';
36

this is not a theme. you are declaring a color.
also, if this is not a template sensor ( cant see because you didnt provide the sensor declaration) you should not use the icon: mdi:gate here. Do that in the sensor declaration, just to be methodical. On the other hand, if this is a template sensor, it could be here, and, of course, if you want the icon to change depending in the state of the sensor.

change:

icon_color: if (state === 'CLOSE') return 'rgb(255, 0, 0)'; else return 'rgb(51, 255, 51)';

into

icon_color: <
  if (state === 'CLOSE') return 'rgb(255, 0, 0)';
  return 'rgb(51, 255, 51)';

the else is not necessary, this makes it cleaner and easier to read.

btw, are you sure the state is in capitals? never seen that before. could you post a screenshot of the sensor in the dev tools <> ?

37

the icon is changing color but i wanto to the all line to change color.
you men to put like this :slight_smile:

theme: >
      if (state === 'home') return 'green';
      return 'red';

in the dev is in cp the name, refrase the icon color changes but i want the all line to change.

38

not sure what you say here, you mean the name is in capitals? or the state. Makes a big difference, when you want the state to be the base of your template. You need to have the state, and have it exact the way it is. If it is False, don’t use ‘false’ in your template. Most of the time template errors arise by not following the exact state.

theme: >
  if (state === 'home') return 'green';
  return 'red';

indeed. thats what you want, after having successfully made the themes in your themes.yaml…

note that now you use ‘home’ instead of ‘CLOSE’. as long as you don’t post a screenshot of the dev-tools of this sensor, we cant be of assistance debugging this I am afraid. I am a bit puzzled how the icon can change color if you use the wrong state… If your not, than use the exact same state in the theme template here. should work than.

39

i put home because i copy your example but i have CLOSE.

here the screen shop

40

image
image946×215 18 KB

finaly here

i see the theme is in red and when the stat changes the theme also changes.

if you have time and want to do a team viewer say.

41

made it, the themes folder was wrong :frowning:
manyyyyyy thanks Mariusthvdb

1 Like
42

Hello Mariustvhbdb how are you?
Is possible change a theme of one entity when the state of a sensor change?

Best regards.

43

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';
44

yesssssssssss, many thanks.

45

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?

46

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/
47

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

48

The value change still works but the icon is still gone. I have copy paste youre code above into the correct files.

49

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:

50

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?