Mariusthvdb / custom-ui

Add templates and icon_color to Home Assistant UI
163 stars 30 forks source link

Trying to force colors for lights... #42

Closed danielbrunt57 closed 3 years ago

danielbrunt57 commented 3 years ago

Hello Marius, I grew tired of the HA lightbulb colors in my frontend being unconducive to me... image and have been searching all evening to find a solution and found this thread: https://community.home-assistant.io/t/customize-dimming-light-icon/98780/8. I've tried implementing a template but it's not working:

homeassistant:
  customize: !include customize.yaml
  customize_domain:
    switch:
      templates:
        icon_color: >
          if (state == 'on') return 'green';
          return 'red';
        icon: >
          if (state == 'on') return 'mdi:toggle-switch';
          return 'mdi:toggle-switch-off';
    light:
      templates:
        theme: ''
        icon_color: >
          if (state == 'off' return 'rgb(128,128,128)';
          if (attributes.brightness < 16) return 'rgb(255,255,255)';
          if (attributes.brightness < 32) return 'rgb(255,255,240)';
          if (attributes.brightness < 64) return 'rgb(255,255,224)';
          if (attributes.brightness < 80 return 'rgb(255,255,208)';
          if (attributes.brightness < 96) return 'rgb(255,255,192)';
          if (attributes.brightness < 112) return 'rgb(255,255,176)';
          if (attributes.brightness < 128) return 'rgb(255,255,260)';
          if (attributes.brightness < 144) return 'rgb(255,255,144)';
          if (attributes.brightness < 160) return 'rgb(255,255,128)';
          if (attributes.brightness < 176) return 'rgb(255,255,112)';
          if (attributes.brightness < 192) return 'rgb(255,255,96)';
          if (attributes.brightness < 208) return 'rgb(255,255,80)';
          if (attributes.brightness < 224) return 'rgb(255,255,64)';
          if (attributes.brightness < 240) return 'rgb(255,255,32)';
          if (attributes.brightness < 255) return 'rgb(255,255,16)';
          return green;

The template for domain: switches is working. Can you see what I'm doing wrong or is what I am trying to do not possible?

danielbrunt57 commented 3 years ago

Wondering about this...

image

Mariusthvdb commented 3 years ago

first of all, can you confirm custom-ui is installed correctly? (I guess you can as the switch is truly working?)

secondly: why dont you like the colors the frontend is returning? they're supposed to be the color of the factual light setting..?

you should take out the theme:, because that is no longer supported, neither core, nor custom-ui

lastly you have an error in this line:

if (state == 'off' return 'rgb(128,128,128)';

missing closing ')' .....

danielbrunt57 commented 3 years ago

Yes, custom-ui is otherwise working... These are the colors I have for lights. They do change intensity with brightness but, 'blue'??? image (Office Light 1 is a test with just icon_color: green)

I was missing more than 1 closing ')'! if (attributes.brightness < 80 return 'rgb(255,255,208)'; s/b if (attributes.brightness < 80) return 'rgb(255,255,208)';

Now that I have fixed my syntax, the template is working: image

    light:
     templates:
        icon_color: >
          if (state == 'off') return 'rgb(169,169,169)';
          if (attributes.brightness < 16) return 'rgb(255,255,255)';
          if (attributes.brightness < 32) return 'rgb(255,255,240)';
          if (attributes.brightness < 64) return 'rgb(255,255,224)';
          if (attributes.brightness < 80) return 'rgb(255,255,208)';
          if (attributes.brightness < 96) return 'rgb(255,255,192)';
          if (attributes.brightness < 112) return 'rgb(255,255,176)';
          if (attributes.brightness < 128) return 'rgb(255,255,260)';
          if (attributes.brightness < 144) return 'rgb(255,255,144)';
          if (attributes.brightness < 160) return 'rgb(255,255,128)';
          if (attributes.brightness < 176) return 'rgb(255,255,112)';
          if (attributes.brightness < 192) return 'rgb(255,255,96)';
          if (attributes.brightness < 208) return 'rgb(255,255,80)';
          if (attributes.brightness < 224) return 'rgb(255,255,64)';
          if (attributes.brightness < 240) return 'rgb(255,255,32)';
          if (attributes.brightness < 255) return 'rgb(255,255,16)';
          return 'rgb(255,255,0)';

Thanks for the feedback...