Sorry it took me a long time to do this, I hope it will be helpful:
Before we begin:
1- Customizing specific entities is not possible as far as I know, as of the time of writing this. What is possible, however, is customizing device types.
2- I tried to make additional custom icons appear on Stream Deck, but I failed. If someone knows how to use custom icons in Stream Deck that are already added to Home Assistant, please let us know how.
Note: If an icon is not displaying according to what you expect, try to play around with the options “Prefer icon from plugin” and “Prefer icon from HA” in the Stream Deck plugin. Sometimes this will fix things, but not always.
Now you can customize your Home Assistant buttons on Stream Deck by editing the “yml” file, as mentioned above in the original guide.
1- Open the “yml” file you created in the guide above and scroll down to a section you want to change.
Example: for me, I scrolled down to
# ======================== On-States ======================
on:
color: '#17eb7e'
playing:
color: '#ffd484'
open:
color: '#ffd484'
opening:
color: '#ffd484'
home:
color: '#ffd484'
locked:
color: '#ffd484'
heat:
color: '#ffd484'
active:
color: '#17eb7e'
# =========================================================
This section is the default for all devices. If a device matches a state, the specified color will be shown. The default color is a shade of light orange ‘#ffd484’. I changed the color to green ‘#ffd484’ when devices are in the “active” state, as you can see above.
2- I wanted to change the color and icon of lights depending on the state, so I scrolled down to this section
light:
labelTemplates:
icon: mdi:lightbulb
color: '#888888'
feedbackLayout: '$B1'
feedback: |
{% set defaultBrightness = (255 if state === 'on' else 0) %}
{% set brightness = attributes.brightness | default(defaultBrightness, true) %}
{
"indicator": {{ brightness / 255 * 100 }},
"value": "{{ (brightness / 255 * 100) | int }}%"
}
states:
unavailable:
icon: mdi:lightbulb-alert
on:
color: '#ffd484'
I modified the “states” to show a different color and, when the light is off, a different icon will be displayed.
on:
icon: mdi:lightbulb-on
color: '#fae94d'
off:
icon: mdi:lightbulb-outline
Important: please manage your “spaces”. In “yml” certain lines have to be indented with certain spaces. In the example above, the line “states:” is two spaces inside compared to the line that reads “light:”. In other words, two spaces come before the word “states:”. And the “on” and “off” lines are indented two more spaces compared to “states:”. This means that they start with four spaces. And the “icon:” and “color:” are indented two more spaces.
3- One final change I made was to the air conditioner temperature colors. The original yml read
sensor:
classes:
humidity:
icon: mdi:water-percent
color: '#2C73D2'
atmospheric_pressure:
icon: mdi:thermometer-lines
color: '#2C73D2'
temperature:
icon: mdi:thermometer
color: |
{% set numState = state | int %}
{% if attributes.unit_of_measurement == '°F' %}
{% set numState = (numState - 32) * 5 / 9 %}
{% endif %}
{% if numState <= -20 %}
#0000FF
{% elif numState <= -15 %}
#0040FF
{% elif numState <= -10 %}
#0080FF
{% elif numState <= -5 %}
#00BFFF
{% elif numState <= 0 %}
#87CEFA
{% elif numState <= 5 %}
#B0E0E6
{% elif numState <= 10 %}
#90EE90
{% elif numState <= 15 %}
#ADFF2F
{% elif numState <= 20 %}
#FFFF00
{% elif numState <= 25 %}
#FFA500
{% else %}
#FF0000
{% endif %}
I changed it to
sensor:
classes:
humidity:
icon: mdi:water-percent
color: '#2C73D2'
atmospheric_pressure:
icon: mdi:thermometer-lines
color: '#2C73D2'
temperature:
icon: mdi:thermometer
color: |
{% set numState = state | int %}
{% if attributes.unit_of_measurement == '°F' %}
{% set numState = (numState - 32) * 5 / 9 %}
{% endif %}
{% if numState <= 04 %}
#6226bd
{% elif numState <= 8 %}
#0000FF
{% elif numState <= 12 %}
#428ffc
{% elif numState <= 16 %}
#54ccff
{% elif numState <= 20 %}
#61cfc0
{% elif numState <= 25 %}
#229c10
{% elif numState <= 30 %}
#6ea13b
{% elif numState <= 35 %}
#d6d64d
{% elif numState <= 40 %}
#ffd000
{% elif numState <= 45 %}
#ff9d00
{% else %}
#FF0000
{% endif %}
If you need to change more stuff, play around with the file. Test and adjust according to your needs. Good luck!
