Custom UI - icon color change

Share your Projects! Dashboards & Frontend
22

yep very wel possible.

Keep it all together nice and tidy.

just beware to have the proper headers in place, along with careful indenting.

strange behavior might occur though. Groups declared in the packages aren’t shown after one clicks the reload groups button in configuration. Also, in my setup, script behave unreliably when declared in the packages, so I always put these in their dedicated /config/scripts folders.

Other than that, packages are very nice to have. very easy to take out also when testing and debugging…

23

I already use packages, but never with

homeassistant:
  customize:

wondering if in packages do I have to put homeassistant: or not?

24

for sure, if you want to customize, it should be under homeassistant:

Just follow the order of your configuration.yaml

25

It does not work with Badges in state cards :frowning:
Have you an idea for this ?

I have try all these properties:
primary-text-color
label-badge
ha-label-badge-color
label-badge-blue

Bu no one works.

The color of text and icon are been modified only in detail card.

27

What do you mean by “it”?

Badge and state-card examples are here: Custom UI - icon color change - #15 by davefi

Badge background is here: Custom UI - icon color change - #17 by Mariusthvdb

28

Yes i am having the same problem it does not work it just stays red.

   sensor.window_eliott_top:
      friendly_name: Eliott
      templates:
      theme: >
          if (state = 'Open') {
            return red_badge;
          } else (state = 'Closed' ) {
            return green_badge;
          }

If I do this the Badge goes green.

  sensor.window_eliott_top:
     friendly_name: Eliott
     theme: green_badge

This is the frontend stuff

frontend:
  themes:  
    green_badge:
      label-badge-red: green
      label-badge-border-color: lightgrey
      label-badge-background-color: white
      label-badge-text-color: green

    red_badge:
     label-badge-red: grey
     label-badge-border-color: lightgrey
     label-badge-background-color: white
     label-badge-text-color: red
1 Like
29

Is rgb_color working anymore with custom_ui for you all? Looks like we need to switch to hs_color

2 Likes
30 
homeassistant:
  customize:
    sensor.central:
      templates:
        rgb_color: [255,0,0]

is this expected to work for example ?

I am getting this :

2018-04-03%2000_15_40-Home%20Assistant

31

primary-text-color: works to change a text color.
But rgb_color, label-badge-red and any other combination not working to change badge color.

32

Hi @anon57099626

What transport sensor are you using for your tube I.e. central line ?

33

thanks @Vlad for your comment, looking at https://github.com/andrey-git/home-assistant-custom-ui/issues/126 it seems that rgb_color was working to modify the icon colors, but now it’s broken.

@bachoo786 https://www.home-assistant.io/components/sensor.london_underground/

1 Like
34

Even though I was the OP, can I suggest that this issue is moved to CustomUI - discussion thread . That way you can be more sure hat @andrey is aware.

35

Ok Got the Custon_ui badges colour to work.

Had to use customize_glob.yaml

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

"sensor.window_*":
  state_card_mode: badges
  templates:
    theme: >
      if (state === 'Open') return 'red_badge'; else return 'green_badge';

"sensor.door_*":
  state_card_mode: badges
  templates:
    theme: >
      if (state === 'Open') return 'red_badge'; else return 'green_badge';

"*_temperature":
  state_card_mode: badges
  templates:
    theme: >
      if (state > 21) return 'hot'; else if (state >= 19 ) return 'comfortable'; else return 'cold';

"*_humidity":
  state_card_mode: badges
  templates:
    theme: >
      if (state > 65) return 'hot'; else if (state >= 55 ) return 'comfortable'; else return 'cold';

24%20am

36

Hi
can you please explain what you did (step by step)?

37

Guys, do you know if I could spread the badges a bit more or put them in center?

12
121008×694 48.9 KB

1 Like
38

Good evening. The customize for icon color change used to work but now doesn’t. My custom ui version is CustomUI: 20180330
Please kindly advice.

customize:
    binary_sensor.door_back_sensor:
      templates:
        rgb_color: "if (state === 'on') return [200, 100, 30]; else return [10, 20, 30];"
39

See CustomUI - discussion thread - there has been a change in HA colour usage

2 Likes
40

Thank you very much.

41

Regards Norick, could you share the “script” of this group, to learn how it is done for my system? Thank you.

42

Hey @Rhoos, what exactly you want me to share?