Custom UI - icon color change

27 now. But where are they???

Do I need to safe-guard these?

  icon: mdi:toggle-switch
  icon: mdi:toggle-switch
  icon: mdi:light-switch
  icon: mdi:window-shutter
  icon: mdi:window-shutter
  icon: mdi:window-shutter
  icon: mdi:window-shutter
  icon: hass:power
  device_type: garage
  icon: mdi:light-switch
  icon: mdi:window-shutter
  icon: hass:light-switch
  icon: hass:toggle-switch-off-outline
  icon: hass:toggle-switch-off-outline
  icon: hass:toggle-switch-off-outline
  icon: hass:toggle-switch-off-outline
  icon: hass:toggle-switch-off-outline
  icon: hass:toggle-switch-off-outline
  icon: hass:toggle-switch-off-outline
  icon: hass:lightbulb-multiple
  icon: hass:light-switch
  icon: hass:light-switch
  icon: hass:light-switch

its a matter of elimination. comment them all and see if the error is gone? ok?

than enable half of them and retry. error still gone? enable half of the rest. if not, check in the last enabled section…

but, you dont need to do this in all your custom-ui templates, just the ones where the state is created during startup. Mostly HA template sensors, or things made by python scripts etc etc

wouldnt think so no, only templates. but, with the method above, its easily checked

btw, a state.state will most likely ever be ‘unavailable’ , not ‘Unavailable’. you need to check the true state in the state machine, not what is shown in the Frontend

huh? I do not understand that statement!

id use
if (state && state.state == 'unavailable')

but, you forget even state can be none, so, you either want to check for state alone

if (state) and, if state exists, you can continue. Or, you check for

if (state.state != 'unavailable') and continue.


        icon_color: >
          if (attributes && attributes['dst active']
              && attributes['dst active'] == true )
          return 'maroon';
          return 'green';

it checks if attributes are available, And if a certain attributes is available, And then if that attributes is true. in all other cases it returns the exception

I commented those out and zero errors on this boot…

well, there you have it :wink: system never lies…

what switches are those? template switches maybe?

No, those are real switches. I uncommented them and no errors from them this time. Go figure!
Just 2 left:

  - name: Period of day
    unique_id: period_of_day
    state: >-
      {% if (as_timestamp(state_attr("sun.sun","next_dusk"))) - (as_timestamp(state_attr("sun.sun","next_setting"))) < 0 %} Dusk
      {% elif (as_timestamp(state_attr("sun.sun","next_rising"))) - (as_timestamp(state_attr("sun.sun","next_dawn"))) < 0 %} Dawn
      {% elif (state_attr("sun.sun","elevation")) < 0 %} Night
      {% else %} Day
      {% endif %}
    icon: >-
      {% if is_state('sun.sun', 'above_horizon') %} mdi:weather-sunny
      {%elif (as_timestamp(state_attr("sun.sun","next_dusk"))) - (as_timestamp(state_attr("sun.sun","next_setting"))) < 0 %} mdi:weather-sunset-down
      {% elif (as_timestamp(state_attr("sun.sun","next_rising"))) - (as_timestamp(state_attr("sun.sun","next_dawn"))) < 0 %} mdi:weather-sunset-up
      {% else %} mdi:weather-night
      {% endif %}

thats a core template sensor…

forget about those, use:

      - unique_id: part_of_day
        name: Part of day
        state: >
          {% set hour = now().hour %}
          {% if hour in range(0,6) %} Night
          {% elif hour in range(6,12) %} Morning
          {% elif hour in range(12,18) %} Afternoon
          {% else %} Evening
          {% endif %}
        <<: &pod_icon
          icon: >
            {% set hour = now().hour %}
            {% if hour in range(0,6) %} mdi:weather-night
            {% elif hour in range(6,12) %} mdi:weather-sunset-up
            {% elif hour in range(12,18) %} mdi:weather-sunny
            {% else %} mdi:weather-sunset-down
            {% endif %}

unless you specifically want to hold to those timestamps…

I also have this but do not have it in configuration.yaml!

2022-02-04 03:04:40 WARNING (MainThread) [homeassistant.components.version] Configuration of the Version platform in YAML is deprecated and will be removed in Home Assistant 2022.4; Your existing configuration has been imported into the UI automatically and can be safely removed from your configuration.yaml file
2022-02-04 03:04:40 WARNING (MainThread) [homeassistant.components.version] Configuration of the Version platform in YAML is deprecated and will be removed in Home Assistant 2022.4; Your existing configuration has been imported into the UI automatically and can be safely removed from your configuration.yaml file

Also already removed from configuration.yaml:

Logger: homeassistant.components.androidtv.config_flow
Source: components/androidtv/
Integration: Android TV (documentation, issues)
First occurred: 3:04:56 AM (1 occurrences)
Last logged: 3:04:56 AM

Host [] already configured. This yaml configuration has already been imported. Please remove it

And I can’t for the life of me the source for this!

Logger: homeassistant.helpers.script
Source: helpers/
First occurred: 3:05:29 AM (1 occurrences)
Last logged: 3:05:29 AM

Error in 'condition' evaluation: In 'template' condition: UndefinedError: list object has no element 157

I know! it should be available pdq. If I put that into template editor it’s fine!

haha, well, yes, but you cant drop all your yaml errors in here :wink:

LOL! thought I’d try…
Have a good night (or day, where ever you are)…and thanks!

1 Like

@mariustvbd, question: is it possible to change the colour of an icon based on the state of a source. For example Apple TV has various sources, if one source is playing can the icon related to that source change in colour? I am using the button card.

what I came up with is:
- type: button
icon: mdi:television
icon_height: 80px
state_color: red
show_state: true
- color: |
if (state_source[‘media_player.apple_tv’, ‘GSE IPTV PRO’].state == ‘playing’) return “red”;
return “darkgreen”;
action: call-service
service: script.lounge_box
service_data: {}
target: {}
action: call-service
service: script.lounge_box
service_data: {}
target: {}

but that doesn’t seem to be working. Any help would be highly appreciated

first of, your template is valid for custom:button-card, and not core button.

You could however try a template like that with card-mod, but then you’d need to change it to Jinja, and not use Javascript

in both cases, its not a custom-ui question, and in the wrong spot here because of that.

besides that, custom-ui is currently partly broken, because of Breaking! HA 2022.4 (partly) breaks Custom-ui · Issue #48 · Mariusthvdb/custom-ui · GitHub, so dont hold your breath on getting that back.

in all cases: format your code correctly please (using the </> button in the toolbar) , so we can see what you’re actually posting

A simple button should show the icon highlighted if the mower is mowing. I don’t have any idea why it’s not working. Here my code in customize.yaml:

    icon_color: if (state == 'mowing') return 'rgb(214,162,69)';return 'rgb(102,102,102)';

could be many things, without anything further we cant help you.

please show the frontend config of the card

and show the Settings/About bottom line on custom-ui

Hi all, I have a pair of custom-buttons with following lovelace config:

            - type: custom:button-card
              entity: input_boolean.hvac_bedroom_preset
              icon: mdi:snowflake
              name: Preset
              show_state: false
              show_label: false 

            - type: custom:button-card
              entity: sensor.temperature_bedroom
              icon:  mdi:thermometer
              show_name: false
              show_state: true

resulted in different icon's color
Is there any way how to “unify” color of icons?
I have some of these within my whole config and not able to solve it :woozy_face:

Any advice please?

with button-card, you dont need custom-ui at all.

any color setting can be done in the styles directly.
for further instructions/exmaples, you’d best hop over to the dedicated thread on custom:button-card

Sorry for my ignorance. Thanks

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

For example:

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