Custom UI - icon color change

Did the recent updates in Jan 2023 remove the icon color changes in customize.yaml?

For example:

templates:
  icon_color: if (state == 'on') return 'red';

Confirm, color customization stopped working.
2023.1.1

I found the same thing

From memory the .js filename had changed and I had to amend in my configuration.yaml and add -gpt to the path

/local/www/custom-ui/custom-ui-gpt.js

Ahh cool, thanks! I can confirm that adding ‘-gpt’ to the .js file fixed it.

EDIT: Actually, I’m not sure if it worked or if I did it right. I just updated the resource in the ‘manage resource’ page of the dashboard. But when I go to HACS, it seems like it’s not loading customUI anymore.

I ended up checking in the www/community directory which is where hacs seems to update the files

In the customui directory, that’s where the file was renamed -gpt

I updated the resource path in configurqtion.yaml to match the renamed filename

The -gpt in the filename may be a pre release naming convention, as i chose in hacs to search for pre release version’s when i revently updated

Customizing names stopped working too.
2023.1.2

Seems that plugin simply stopped being loaded.
Cannot find it in Code Inspector.
Always updated it by HACS.
Some person created this issue - but the plugin’s author decided to close it.

Not sure if it is related to changes in HACS.
Here is a test with some old version of HA & HACS: some previous version of Custom UI is loaded, and it is not loaded when updated to the latest one:

Seems that smth is changed in Custom UI which makes it more “capricious” than usual.

Update: seems that resource line in “resources” points to a file with an old name.

1 Like

So is there a fix for the newest beta not loading if installed through HACS or is there supposed to be a non-beta release that will fix it? Looks like the github issue was closed without a solution.

I have an icon i want to blink ( seeing it and not seeing it) when an entity is on. So it looks like an alarm.
I want this when some sensors in the house are not ok ( flooding sensor, open freezer ,etc)
How do I do this ? Is this also with state colour ?

you should check the topic on card-mod, which has a great overview listing of Ildars posts.

or, use some custom card that has this functionality built in, like custom:button-card

the custom resource custom-ui in this thread does not provide the functionality

ok, thanks. Found a way to blink :wink:

Probably it is better to post your solution here for other people).
Then mark this post as a “solution”.

This will blink the icon, but also the button…

you should set the animation to the icon only (if you want that) , but this is not the topic to do so. Check button-card, or indeed mushroom.

nevertheless:

  state:
    - value: 'on'
      styles:
        icon:
          - color: green
          - animation: blink 2s ease infinite

does it for button-card

What I want is the button disappear when the entity is 0… indont really care about the button

That would be a simple type: conditional and has nothing to do with custom-Ui …

Hi there,

my shutter icons are purple - some updates before it was yellow and blue.
Is it possible to change the color?

yes, change the state colors in your theme, they are all in the form of:

    state-cover-closed-color: midnightblue
    state-cover-closing-color: blue
    state-cover-open-color: gold
    state-cover-opening-color: orange
    state-cover-unknown-color: slategrey

note: this has nothing to do with custom-ui, but is core HA Frontend and documented in the Frontend docs on theme variables

Here is a template to alter the color of battery icons more granularly than the HA colors red-orange-green. It sets icon_color: from 0xFF0000 thru 0x00FF00 based on the state.

homeassistant:
  customize_glob:
    sensor.*_battery:
      templates: &battery_color
        icon_color: >
            var r = Math.min(255, Math.round(510 - 5.10 * Number(state)));
            var g = Math.min(255, Math.round(5.10 * Number(state)));
#          return 'rgb(' + r + ',' + g + ',0)';
            var h = r * 0x10000 + g * 0x100;
            return '#' + ('000000' + h.toString(16)).slice(-6);

    sensor.*_battery_level:
      templates: *battery_color

image

And with custom-ui / custom-ui-only the battery is even colored in the more info panel: