able to edit the color would be great I am running 3 whole building monitors one for the pump house one for the Garage and one for the main house plus a bunch of separate devices
1 Like
Well I have a different issue. I’m colorblind. It would be nice to choose a color for each device you add.
Now I have 3 grid consumptions: Energy daytime, Energy nighttime and Return Energy. Those 3 colors: blue, light blue and purple are almost identical to me. It would be great If I can choose a color when i add those devices in the confguration of Energy.
@Gratje Home Assistant has recently employed a developer to look at the user interface design and ease of access for all. If you open a discussion topic here: https://github.com/home-assistant/frontend/discussions it will be seen by the developer. They are very keen to hear information about these sorts of issues.
You can also chat with them directly on Discord here: https://discord.gg/KXshVBv5 It is a development channel so keep the discussion to the point.
Note: until an easier way is developed you can change these colours by adding the following lines to a theme and changing the colours that they are currently set to:
energy-grid-consumption-color: "#488fc2"
energy-grid-return-color: "#8353d1"
energy-solar-color: "#ff9800"
energy-non-fossil-color: "#0f9d58"
energy-battery-out-color: "#4db6ac"
energy-battery-in-color: "#f06292"
energy-gas-color: "#8E021b"
You can then use the reload themes service in Developer tools / services to apply your changes.
3 Likes
I am tryign to change my sources because we have a complex energy tier rate here. I’m trying to look at energy usage based on the tiers so I have multiple sources setup per the tariff examples shown in utility meter. How do I change source color?
# themes:
# basic:
# modes:
# dark:
# energy-sources:
# energy_home peak-color: "#ff9800"
# energy_home_midpeak: "#486ac2"
I commented it out for now but this is basically what I’ve been trying to figure out.
It would be really nice if we could assign a customer color to each individual source. I use the energy monitor the same way as @Gutek, being able to see individual device consumption on an hourly level is super useful to me.
1 Like
Hello
Did you figure it out ?
In French we have the TEMPO energy offer which add 6 energy sensors (peak / off peak and BLUE/WHITE/RED days).
I would love to set the Blue color to the BLUE days, etc.
4 Likes
yes the gradient color is too similar when we add 6 energy sensor.
A feature request has been posted on the github frontend repository.
Make sure to upvote 
@tom_l Hi, I have recently started using HA. Still a compleet noop 
Anyway, i’m trying to put your yaml code about changing the colors to my liking. But I just can’t find out what or where or how to ad this code?
energy-grid-consumption-color: "#941515"
energy-grid-return-color: "#285c07"
I’m using Mushroom as my default theme. And I want to change the colors of the ‘Net consumed from the grid’ gauge. Please can you help me.?
Thanks in advance. Charly.
I tried to create a template sensor to add the energy from a couple of Mill wall heaters, but the result does not display correctly. Any suggestions about what I’m doing wrong is greatly appreciated!
Here is the template:
template:
- sensor:
- name: "Total Mill Energy"
unique_id: sensor.total_mill_energy
state: "{{ (states('sensor.br_heater_day_consumption') | float + states('sensor.gr_heater_day_consumption') | float ) | round(2) }}"
unit_of_measurement: "kWh"
state_class: measurement
device_class: energy
attributes:
last_reset: '1970-01-01T00:00:00+00:00'
The energy dashboard shows no data:
But if I create a History Graph on a regular dashboard, there does seem to be a sum() of the heater_day_consumption. But this is not a useful graph, because it’s state_class: total_increasing
Screenshot 2023-01-15 at 19.26.30|690x337
A statistics graph does show me what I want to see with stat_types: change, however it only displays the data with a single heat sensor. When I try to use my template, again I see no data 
Screenshot 2023-01-15 at 19.30.15|532x500
Sorry can’t include more than 1 screen shot because I am a new user 
template:
- sensor:
- name: "Total Mill Energy"
unique_id: sensor.total_mill_energy
state: "{{ (states('sensor.br_heater_day_consumption') | float(0) + states('sensor.gr_heater_day_consumption') | float(0)) | round(2) }}"
availability: "{{ states('sensor.br_heater_day_consumption') | is_number and states('sensor.gr_heater_day_consumption') | is_number }}"
unit_of_measurement: "kWh"
state_class: total_increasing
device_class: energy
You had an incorrect state class for an energy sensor to be displayed on the energy dashboard.
The last reset attribute is not required.
You should include defaults for functions and filters (like float).
The availability template will prevent odd readings if a sensor is unavailable (or if both are).
1 Like
This is now working for me!
Big thanks for the additional tips and the quick response!
1 Like
Hi
In comparative mode, with custom templates. Old color data are black…
My data are OK. I have no problem with the default theme of HA.
An idea to force color on the old data in comparative mode
Exemple : compare this year to last year… Last year data are black
If the compare colors aren’t working, it’s because you’re using color names in your theme, you need to use #rrggbb hex style color definitions for the compare to work correctly, as it tries to append an alpha channel to the existing hex color, which doesn’t work for names.
Hi Tom,
I’ve tried both options in the card
type: energy-distribution
link_dashboard: false
energy-grid-consumption-color: '#ffffff'
energy-grid-return-color: '#ffc108'
energy-solar-color: '#ffc108'
energy-non-fossil-color: '#0f9d58'
energy-battery-out-color: '#46d27a'
energy-battery-in-color: '#2b7346'
and in themes.xml
th_gauge_1:
info-color: "grey" #former blue
success-color: "yellow" #green
warning-color: "blue" #yellow
error-color: "green" #red
energy-distribution:
energy-grid-consumption-color: '#ffffff'
energy-grid-return-color: '#ffc108'
energy-solar-color: '#ffc108'
energy-non-fossil-color: '#0f9d58'
energy-battery-out-color: '#46d27a'
energy-battery-in-color: '#2b7346'
but none of them are working. Any help ?
Did you end up finding a solution on where to add the code ?
These are definitely theme variables, not card options, so it needs to go in your themes configuration, either in your configuration.yaml or in a separate themes yaml, depending on how you have structured that.
Once you define a theme, remember you need restart or call frontend.reload_themes, and then select that theme from your user profile page.
I was after the theme method. It appears I can’t override default theme but have to create a custom theme just for energy dashboard… Is that right ?
Yes if you want to change colors of things via theme variables, you need to create a theme, and you have to select that theme instead of the default theme.
1 Like