HA 0.110.2 - Icons are not being colorized

[drew1kun]

Checklist

• I'm running the latest version of CustomUI (Update guide) or using a specific release that is not marked as "Broken".
• I tried to force-refresh (Ctrl+Shift+R / Ctrl+F5) the browser
• (Optional, but recommended) I'm using Chrome or tried to reproduce the feature on Chrome.

Browser + Version:
Chrome 81.0.4044.138 (Official Build) (64-bit)

CustomUI version:
20190518
Home Assistant release (hass --version):
0.110.2
Problem-relevant configuration.yaml entries:

frontend:
  themes: !include_dir_merge_named themes/
  extra_html_url:
  - /local/custom_ui/state-card-custom-ui.html

homeassistant:
  customize:
    sensor.bedroom_t_h_p_battery:
      templates:
        # Following changes the text color in details window,
        # when clicking on sensor in UI, according to custom themes/alert.yaml:
        theme: >
          if (state <= 10) return 'alert_red';
          if (state <= 30) return 'alert_yellow';
          return 'grey';
        # Following changes the sensor's lovelace icon color:
        icon_color: >
          if (state <= 10) return 'rgb(220, 76, 64)';
          if (state <= 30) return 'rgb(248, 192, 30)';
          return 'grey';

themes/alert.yaml

alert_yellow:
  primary-text-color: '#FFC100'     # Solarized Yellow
  paper-item-icon-color: '#FFC100'  # Solarized Yellow
alert_red:
  primary-text-color: '#DC312E'     # Solarized Red
  paper-item-icon-color: '#DC312E'  # Solarized Red

Result (icon is not colorized):

When I click on the sensor's icon, it's not colorized either:

But when I add custom_ui_state_card: state-card-custom-ui so the code looks like this:

homeassistant:
  customize:
    sensor.bedroom_t_h_p_battery:
    custom_ui_state_card: state-card-custom-ui 
      templates:
        # Following changes the text color in details window,
        # when clicking on sensor in UI, according to custom themes/alert.yaml:
        theme: >
          if (state <= 10) return 'alert_red';
          if (state <= 30) return 'alert_yellow';
          return 'grey';

Then the icons on card still not colorized, but the state is colorized (see, it is yellow now):

So theme works, while icon_color does not. I tried to use them simultaneously and one by one - no changes.

Problem-relevant Home Assistant log entries:

nothing I can see

Any errors from browser Javascript console:

[drew1kun]

Sorry, I just saw that @Mariusthvdb recommended to check if the correct version of CustomUI was actually loaded and mine seems actually not being loaded:

I am installing and updating it with update.sh script, but if the Pull request will never be merged, then what is the recommended way to install, update the custom-ui then?

I removed the original state-card-custom-ui.html and downloaded the one from @Mariusthvdb fork (patch-1 branch), restarted HA a couple of times but the version is still not changed in UI (checked on both Crome and Android app).

[Mariusthvdb]

you can only install manually now. Don't ever use the script again, as it reinstalls the old and now deprecated files!

also, there's some development, as we made it future proof here: home-assistant/frontend#6028 (comment)

download the patched file, edit it as described (open in a txt editor and remove the opening <script> and closing </script>. And rename it to state-card-custom-ui.js

while you are editing, also find the spot where the name and version are stated, and change it to something like:

console.log("Loaded CustomUI JS 20200520-adapted-for-HA110+"),window.CUSTOM_UI_LIST||(window.CUSTOM_UI_LIST=[]),window.CUSTOM_UI_LIST.push({name:"CustomUI",version:"JS 20200520-adapted-for-HA110+",url:"https://github.com/andrey-git/home-assistant-custom-ui"})

That way, you can see if it was really loaded, just like above.

reference it in configuration.yaml as follows:

frontend:
  extra_module_url:
    - /local/custom_ui/state-card-custom-ui.js

that's it, and restart.

as I told you before, there's no use for theme: any more, it simply isn't supported by Lovelace at the moment. It was never useful to use theme: and icon_color: for the same entity, so I dont get why you are doing that?

I also mentioned before you shouldn't use the line

custom_ui_state_card: state-card-custom-ui 

anymore in the customizations.

there are now enough threads on this topic, this should maybe be closed, as more will only add to the confusion.

a tip, since you are trying to 'theme' your colorizations: use yam anchors:

simply by adding this:

homeassistant:

##########################################################################################
# Domain
##########################################################################################
  customize_domain:

    automation:
      templates: &state_color
        icon_color: >
          if (state == 'on') return 'gold';
          return 'steelblue';

    binary_sensor:
      templates:
        <<: *state_color

    input_boolean:
      templates:
        <<: *state_color

    switch:
      templates:
        icon: >
          if (state == 'on') return 'mdi:toggle-switch';
          return 'mdi:toggle-switch-off';
        <<: *state_color

all mentioned domains will be colorized according to state_color template created in the top line

you can also use customize_glob:

    sensor.*_sensor*temperature:  # adjust the wildcard to your needs
      templates:
        icon_color: >
          if (state < -20) return 'black';
          if (state < -15) return 'navy';
          if (state < -10) return 'darkblue';
          if (state < -5) return 'mediumblue';
          if (state < 0) return 'blue';
          if (state < 5) return 'dodgerblue';
          if (state < 10) return 'lightblue';
          if (state < 15) return 'turquoise';
          if (state < 20) return 'green';
          if (state < 25) return 'darkgreen';
          if (state < 30) return 'orange';
          if (state < 35) return 'crimson';
          return 'firebrick';

or even combine an anchor in glob:

    sensor.*_bewegingssensor:
      templates: &battery_color
        icon_color: >
          if (state > 75) return 'green';
          if (state > 50) return 'gold';
          if (state > 25) return 'orange';
          if (state > 10) return 'brown';
          return 'red';

    sensor.*_dimmer:
      templates:
        <<: *battery_color

    sensor.*_afstandsbediening*:
      templates:
        <<: *battery_color

    sensor.*_remote:
      templates:
        <<: *battery_color

    sensor.*_battery_level:
      templates:
        <<: *battery_color

    sensor.*_battery:
      templates:
        <<: *battery_color

    sensor.battery*:
      templates:
        <<: *battery_color

have fun!

[drew1kun]

Ok, removing <script> and </script> tags, renaming file to '.js' and referensing the following way works:

frontend:
  extra_module_url:
    - /local/custom_ui/state-card-custom-ui.js

Thank you very much. Closing.