I have the Shelly EM3 , three phases from the distributor , all working well in the Shelly App’s and HA. The Energy Dashboard shows all the bars in the “Energy Usage” bar charts in various shades of Blue. My 3 Phases are Red , Yellow and Blue. How do I change the colors in the graph ? Will look better !!
Hey, did you ever figure out a way to do this? I also find the colors options in the energy dashboard very lacking.
1 Like
No !! Really looking forward to a solution.
4 Likes
Did someone find a way to change the colors?
A feature request has been posted on the github frontend repository.
I am postin this link on all the post I can find here.
Make sure to upvote 
3 Likes
Looking for the same… Found this Youtube video this morning that looks like it has the solution…
https://www.youtube.com/watch?v=9c2XUjobVB8
1 Like
Hi, I tried it and it’s not working for me. Can you share your configuration.yaml? Anybody else tried it?
I tried the above and it did not work until I realized that it defines a new theme which then needs to be selected under the users preferences before it becomes visible. This is not really what I wanted since I would have preferred to change the energy colors in the default Home Assistant theme and not define a completely new theme (which is then incomplete).
The code below defines a Theme using red, white and blue colors which reflect a popular French contract called Tempo. But as mentionned above it sadly defines a new theme which must be selected under user preferences. If anybody knows howto modify the default theme please let us know. I have tried naming the theme “default” and “Home Assistant” but this did not work.
# Insert this snippet in the configuration.yaml file
# Load frontend themes from the themes folder
frontend:
themes:
My Theme: # this is the name of the theme for which we change the colors
energy-grid-consumption-color-0: "#587cfc"
energy-grid-consumption-color-1: "#0000ff"
energy-grid-consumption-color-2: "#b5b5b5"
energy-grid-consumption-color-3: "#ebebeb"
energy-grid-consumption-color-4: "#fa7575"
energy-grid-consumption-color-5: "#ff0000"
I managed to improve the above theme so that it supports dark and light mode and inherits the entire settings from the standard theme. But it is still a new theme which must be selected under the user profile to become active. The colors Blue, White and Red are made for the french EDF Tempo contract which has these price categories.
# Snippet to be inserted in configuration.yaml
# Load frontend themes from the themes folder
frontend:
themes:
My Theme: # Define new theme for which we change the colors
# This seme must be selected in the user preference to become active
# Allow switch between dark and light mode and inherit styles from these
primary-color: coral
modes:
light:
secondary-text-color: olive
dark:
secondary-text-color: slategray
# redefine energy source colors
energy-grid-consumption-color-0: "#587cfc"
energy-grid-consumption-color-1: "#0000ff"
energy-grid-consumption-color-2: "#b5b5b5"
energy-grid-consumption-color-3: "#ebebeb"
energy-grid-consumption-color-4: "#fa7575"
energy-grid-consumption-color-5: "#ff0000"
type or paste code here
1 Like
