Grey Energy dashboard device color is indistinguishable from untracked color

[dieugab]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.
• [X] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

The new color system doesn't work when a device gets assigned the grey color and is then near indistinguishable from the grey 'untracked' color

Describe the behavior you expected

Color should be differentiated from the untracked color.

Steps to reproduce the issue

1. Add x amount of devices to the Energy dashboard
2. Look at the Individual devices detail usage graph

What version of Home Assistant Core has the issue?

2024.10.1

What was the last working version of Home Assistant Core?

2024.9

In which browser are you experiencing the issue with?

Safari 18.0 (20619.1.26.31.6)

Which operating system are you using to run this browser?

macOS Sequoia (15.0)

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

[dasfuu]

As seen in my now closed issue: the color order in the energy dashboard is not optimal. Not only shouldn't there be no two shades of grey, but the biggest consumers should get assigned the "primary"(first few) colors.

[karwosts]

but the biggest consumers should get assigned the "primary"(first few) colors.

Currently the colors are assigned by the order of the device in the device list, not sorted by consumption.

The reason for this is that I think you want consistency of color, so that the same device is always the same color. If colors were sorted by consumption, then the color of a given device would jump around and change each day (as its consumption changed), which I think would be confusing.