Home/Away state coloring not consistent

[TheZoker]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

The problem

For one person, the away state is purple and home is turquoise:

For another person away is turquoise and home is purple:

Expected behavior

The colors should be consistent.

Steps to reproduce

1. Have two device trackers each attached to a different person
2. Have a look at the state history

Environment

• Home Assistant release with the issue: 0.110
• Last working Home Assistant release (if known): none
• Browser and browser version: Chrome Edge 83
• Operating system: Windows 10

State of relevant entities

Problem-relevant configuration

Javascript errors shown in your browser console/inspector

Additional information

[bramkragten]

Colors are not tied to states (or the most states) just a few exceptions.

We could maybe add home and away to this list, not sure if that will work with coloring the other states (zones) a device tracker could be in.

https://github.com/home-assistant/frontend/blob/dev/src/components/state-history-chart-timeline.js#L75-L81

[SeanPM5]

How about always ensuring green for home and red for away (like on binary sensors). And then the zones would just be random colors.

[Mariusthvdb]

Maybe out of scope here, but since you’re talking state colors:
Why not make those user configurable. Somewhere in /configuration, allow to set on_color and off_color and use those anywhere for home/true/on and not_home/false/off and the other binary states.

Not talking custom_ui here, or even templates (would be great too though...). No, simply allow the user to set the state colors used throughout HA.

I mean who would want Color red to dominate the frontend, it is so ugly and harsh.... I always use firebrick, or maroon ;-)

[bramkragten]

That would be theming, not something that should be in config

[Mariusthvdb]

well, when you think of it, why not? Wouldn't it be handy to have that in the GUI too. Theming now is very much a yaml driven process, needing acces to the file system etc etc.
Since HA is heading more and more to a Gui driven way of configuration, I would certainly see the merits of a view where we can set all used fields in the Frontend.

It would also prevent the many questions/challenges people face when using a theme that doesn't (yet) use all needed and/or available/necessary color settings, and their states get lost because the background uses the same color as the secondary-color..... liken the dark color themes lately.

As said, probably out of scope here, but please consider that elsewhere in the frontend/gui development?

getting it back in scope: a small subset of these theme colors, like primary and secondary-colors, or these on/off colors, could be added to /profile page where we now also have the theming settings.

[Mariusthvdb]

That would be theming, not something that should be in config

talking about theming, please allow me this here (dont want to bother you with a dedicated issue/FR)
before Lovelace, we could set themes per entity, so the icon, name, and state would get the color set in that theme.
via custom_ui we could do this:

    automation:
      templates: &state_theme
        theme: >
          if (state == 'on') return 'gold';
          return 'steelblue';

this entity theming has long been gone since Lovelace doesnt support it, but Ive never thought of asking you if this would be an minor tweak in the custom-ui, or if that is simply no longer possible using Lovelace.

Reason I ask is that theming was a perfect way of accenting the state of an entity that has an entity_picture and not an icon. The entity_picture can be the same for all states, but the color could then reflect the state, and signal the user in the frontend.

If at all possible, Id take this to a dedicated thread, and ask for some assistance to bring that back too, just like icon_color. Of not, Ill forget about it.
thanks for not killing me here...

[stale]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue now has been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[TheZoker]

@bramkragten Any news/idea on this?

[bramkragten]

A PR is welcome, add the colors to https://github.com/home-assistant/frontend/blob/dev/src/components/state-history-chart-timeline.js#L75-L81 and make sure it doesnt overlap with the other colors zone can get.

[TheZoker]

Thanks I will try 👍
Just a quick question: Wouldn't it be also possible, that the frontend decides for a color for each state on load and uses this color across this session of the frontend? So at least every state has a certain color and not multiple like it is now