Custom UI - icon color change

Share your Projects! Dashboards & Frontend
150

Sorry but no, themes don’t work anymore, and haven’t found an edit to reinstate that functionality in Lovelace yet. Remember this was designed for States…

You can use card-mod for badges and I will post an example when I am back at my desk.
Cheers!
back

badges:
  - entity: person.marius
    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .label-badge .label span{
                {% if is_state('person.marius','home') %} color: red;
                {% else %} color: black;
                {% endif %}
              }
        .: |
          :host {
            {% if is_state('person.marius','home') %} --label-badge-red: green;
            {% else %} --label-badge-red: grey;
            {% endif %}
          }

see: https://github.com/thomasloven/lovelace-card-mod#styling-badges

151

Ok, so you create new entities of type badge and those are “stylable”.

that could be good enough to me. I’ll give it a try this weekend to see if i’m capable of that understanding.

Have a good day.

152

no, these are Lovelace badges, and the code above is the top of a Lovelace view. Entity is of the domain person.

153

thanks for this detail.

So far i haven’t yet modified my lovelace views file and was about to set that in the configuration.yaml. You saved me a bit of time.

154

card-mod did the trick. thanks again @Mariusthvdb. Although I’m not too acquainted yet to JavaScript and CSS so I more or less copied examples.

I believe there is a way to better optimize my code as it mostly duplicates three times :

    badges:
      - entity: person.anne_laure
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                .: |
                  :host {
                    {% if is_state('person.anne_laure','home') %} --label-badge-red: green;
                    {% else %} --label-badge-red: red;
                    {% endif %}
                   }
      - entity: person.emmanuel
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                .: |
                  :host {
                    {% if is_state('person.emmanuel','home') %} --label-badge-red: green;
                    {% else %} --label-badge-red: red;
                    {% endif %}
                   }
      - entity: person.valentine
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                .: |
                  :host {
                    {% if is_state('person.valentine','home') %} --label-badge-red: green;
                    {% else %} --label-badge-red: red;
                    {% endif %}
                   }
155

exactly, hence my request above if we could use entity instead of the entity name in the template. If so, we could simply use a yaml anchor:

    badges:
      - entity: person.anne_laure
        style: &badge_style
          ha-state-label-badge:
            $:
              ha-label-badge:
                .: |
                  :host {
                    {% if is_state(entity,'home') %} --label-badge-red: green;
                    {% else %} --label-badge-red: red;
                    {% endif %}
                   }

      - entity: person.emmanuel
        style: *badge_style

      - entity: person.etc
        style: *badge_style

we might have to ask Thomas Loven or Kendell about this, since they wont be reading along here :wink:
see 🔹 Card-mod - Super-charge your themes! for the relevant thread

NM! Found it already: use config.entity

even 1 line shorter:

badges:
  - entity: person.me
    <<: &badge
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .label-badge .label span{
                  {% if is_state(config.entity,'home') %} color: purple;
                  {% else %} color: black;
                  {% endif %}
                }
          .: |
            :host {
              {% if is_state(config.entity,'home') %} --label-badge-red: gold;
              {% else %} --label-badge-red: grey;
              {% endif %}
            }

  - entity: person.she
    <<: *badge

depending on what you want to define under the anchor.

156

I understand the syntax (never used the &myvariable/*myvariable scheme before) and discover the config.entity possibility. Have to read a bit about that config.entity way of doing.

HA is an infinite montain of knew knowledge for me :wink:

157

yeah these are Yaml Anchors, and can be defined ‘on the fly’ so to speak. Anything written after the definition character <<: &anchor_name will be copied (‘merged’ in anchor lingo) when you put <<: *anchor_name

anchors are defined per yaml file. Meaning, if you need the same anchor in another file you need to recreate it first.

here’s a Yaml primer by Thomas, read all the way down: http://www.thomasloven.com/blog/2018/08/YAML-For-Nonprogrammers/

since examples can be easier to understand than the above primer, (there are 2 different ways to create Anchors) have a look at more examples in https://github.com/Mariusthvdb/custom-ui/blob/2ba4168e9554e9290bc3f2c872316a522639f2e4/examples.md

158

thanks, I’ll read that.

the anchor syntax is simple yet powerful. I’ll probably reuse it as I hate repeating code.

159

Change the ICON Color dont work for me :frowning:

customize:

binary_sensor.office_window_xiaomi_1_openclose:
  friendly_name: Büro Fenster
  device_class: window
  templates:
    rgb_color: "if (state === 'on') return [200, 100, 30]; else return [10, 20, 30];"

But this Example dont work :frowning:

if i open the Window, the icon color is the Frontend Style:

ha-icon[data-domain="binary_sensor"][data-state="on"]
color: var(--paper-item-icon-active-color, #fdd835);

default Color.

What I need, is when the window is open, then change the color: --color-red-error-1
or RGB

i hope you an help me! Thanks all

160

You should use icon_color: and not rgb_color:

Also, check the correct color format to use, you can find many examples in the examples ;-)-

161

yes, i test so many ways, but nothing works.

here the new Test in customize File:

binary_sensor.office_window_xiaomi_1_openclose:
  friendly_name: Büro Fenster
  device_class: window
  icon_color: "{% if is_state('binary_sensor.office_window_xiaomi_1_openclose', 'on') %}rgb(255, 214, 10){% else %}rgb(255, 255, 255){% endif %}"
162

icon_color can only be set using custom-ui, which uses javascript templates, and not jinja templates like you use.

did you install custom-ui?

163

yes i install custom-ui

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/custom-ui/custom-ui.js

/usr/share/hassio/homeassistant/www/custom_ui/custom-ui.js

is that okay?

the yaml in customize:

binary_sensor.office_window_xiaomi_1_openclose:
  friendly_name: Büro Fenster
  device_class: window
  templates:
    icon_color: '{% if is_state("binary_sensor.office_window_xiaomi_1_openclose", "on") %}rgb(255, 214, 10){% else %}rgb(255, 255, 255){% endif %}'

yaml office:

- type: glance
        show_name: true
        style: !include ../includes/style_entities.yaml
        entities:
          - entity: light.light1test
            name: Licht
          - sensor.buro_dect301_1_temperature
          - entity: binary_sensor.office_window_xiaomi_1_openclose
            name: Fenster

window

window2

window3
window31093×213 22.4 KB

164

this is not ok. As I said before.

please check the many examples… you started out well Custom UI - icon color change - #159 by basti4k but somehow changed from a JS template to a jinja template… why?

try:

  templates:
    icon_color: >
      if (state == 'on') return 'rgb(200, 100, 30)'; 
      return 'rgb(10, 20, 30)';

and you should be set

165

Hi and many thanks for your help!!

Unfortunately I have no idea where and what the difference is to JS template or jinja template :slight_smile: i test the examples :slight_smile:
What is the right way for installation?

Can I see if everything is installed correctly and Custom UI is working properly?

binary_sensor.office_window_xiaomi_1_openclose:
  friendly_name: Büro Fenster
  device_class: window
  templates:
    icon_color: >
      if (state == 'on') return 'rgb(200, 100, 30)';
      return 'rgb(10, 20, 30)';

the new code dont work :frowning:
Your code is simple and I understand it. But it does not work

166

apparently it isnt :wink:

did you read the readme… ? It’s all in there.

btw:

  extra_module_url:
    - /local/custom-ui/custom-ui.js

/usr/share/hassio/homeassistant/www/custom_ui/custom-ui.js

you are not using the same dash/underscore in the path. use either ‘_’ or ‘-’ in both

1 Like
167

OMG THANKS, yes in the Readme is the foldername: custom_ui

i rename the folder:
/usr/share/hassio/homeassistant/www/custom-ui/custom-ui.js

configuration.yaml

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/custom-ui/custom-ui.js

The file is now loaded in the developer tool:
CUSTOM-UI (JS) Version 20201218 adapted for HA 2020.X.X +

After “restart” it work :clap: :pray: :star_struck:

QA: if i edit a “icon_color: >” part, the color. Then always have to restart the completely HA?

168

no, as a rule of thumb, all customizations are reloaded if you click config/server_control RELOAD LOCATION & CUSTOMIZATIONS.

Sometimes a refresh of the browsers helps. On occasion, none of this kicks in and the next restart it will be fine.

1 Like
169

Thanks it works perfect!

i see in the example the way, for the color varible:

configuration.yaml

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/custom-ui/custom-ui.js

themes/ing_dark.yaml

# Status Color
alert_red:
  paper-item-icon-color: "var(--color-red-1)"
alert_blue:
  paper-item-icon-color: "var(--color-blue-1)"

# Theme
ING Dark:
  # Fonts
  color-red-1: "rgba(247,53,67,1)"
  color-blue-1: "rgba(6,169,244,1)"

customize:

templates:
    icon_color: >
      if (state == 'on') return 'alert_red';
      return 'alert_blue';

But it does not work :frowning: