Energy panel colours

[tom_l]

Apparently the Energy Panel colour choices are not very good for some types of colour blindness.

If this affects you (or you just want to change the colours) you can add the following lines to a theme and change 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.

[rjd (RJDalga)]

Thanks Tom. I haven’t tried it yet but I would like some clarification on the alfa-numerics you show above. I assume one can pretty much define any color with the correct alfa-numeric??? Is there a list somewhere of these by any chance?

[CM000n (Simon)]

These are just standard hex colors:

Colors HEX

[rjd (RJDalga)]

Got it! Thanks

[rjd (RJDalga)]

In turn, does one have to find and delete the ‘default’ colors in another theme(s) to avoid conflicts?

[knorian]

does anyone know why the energy-grid-return-color: is displayed correctly in the energy dashboar and not correctly when i use it in a card

?

[tom_l]

What card config are you using?

They’re both the same for me:

Energy Dashboard:

Card:

Card config

type: energy-distribution
title: Energy Distribution

[knorian]

i use a theme. i want the purple line to be orange. this is displayed correctly on the dashboard, but not on the card.

        ####### energy-dashboard
        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"
        energy-gas-color: "#8E021b"

card configuration:

type: energy-distribution

[tom_l]

I just used the browser inspector to check the colour applied to the card, it is definitely energy-grid-return-color. Try clearing your browser cache.

[knorian]

it is very mysterious. it is also displayed correctly in the card configuration
I clered the browser cache. unfortunately no result

[tom_l]

Weird.

You can open an issue here if you like:

Issues · home-assistant/frontend

Include all your screenshots (drag and drop them into the issue) and as much info as you can (including the bit about cache clearing).

[ausfas]

Hi Tom,
Would you be able to comment on this post… help

Energy tab - more colors for graphs

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-g…

[tom_l]

No. And please don’t demand that people answer you.