Hard code add-ons update color to orange in Supervisor

[SeanPM5]

The request

The Supervisor add-ons page currently uses var(--accent-color). This can be a little bit problematic depending on the users theme. Here's how it looks like on the popular "midnight" theme for example:

This seems fine at first, but here's a few reasons why it's a tiny bit flawed IMO.

In this below example image, the top red bar is indicating an update is available for the SSH & Web Terminal add-on, and the bottom red bar is indicating that Visual Studio Code add-on is not available on the Raspberry Pi. Two completely different meanings, yet in this theme they look extremely similar.

And here's how it looks on the "solarized-light" and "solarized-dark" themes. You can't even see the update bar at all because the accent color is the same as the background color. There's other community themes with similar problems.

Second reason is that the add-ons detail page has this hardcoded to orange already iron-icon.update #ffa726 . Here's a screenshot from the "midnight" theme again. As you saw before it was red on the dashboard page, but now you click through to the details page and it's suddenly orange. Having two different colors indicating an update is available is inconsistent and confusing.

Third and final reason, is that without having this hard coded, it makes it difficult to describe how this works in documentation and tutorials. You can't simply say "updates appear in orange" because if the user is using a non-default theme that's not always the case.

Sure, you could say that these problems are theme-specific issues, and I'd agree with that. But on the flip side, these themes are out there and are being used, sometimes they have unfortunate color choices. There should be some safeguards in place to prevent themes from hindering the usability of important functionality like this imo.

So for these reasons, I think it makes sense to hard code this. I think line 144 of hassio/src/components/hassio-card-content.ts is what would need to be changed? It's already done on the add-on details page. Orange looks fine on both light and dark themes, so it shouldn't be an issue, and it would immediately solve the problems mentioned above.

The alternatives

Alternative would be to display add-ons with available updates in a separate group on the dashboard page.

Or some kind of "Update" text / badge overlay that doesn't necessarily rely on colors.

Additional information

[KTibow]

I think a new theme variable would be better so you can theme it how you want, how about supervisor-update-color?

[SeanPM5]

I'm of the opinion that this should be treated like a traffic light. Those are always red, green, amber no matter where you go; consistent and memorable. Now imagine you enter another town and the traffic light pattern is suddenly blue, purple, pink. Which color means stop, which means go? You'd be totally confused. That's how it behaves right now when you switch themes.

Other parts of Home Assistant that get themed typically have icons with identifying shapes. It doesn't matter if the button to add a new integration is orange, red, or green because you can always refer to it as "the plus button in the bottom right corner." It doesn't matter if a toggle switch is yellow or blue, you can always determine the state of it easily - the color is purely for aesthetics.

But here in Supervisor add-ons page literally all you have is color-coding, and if those colors change every time you change your theme, you really have nothing at all to help you tell things apart. It'll always be inconsistent and can't be reliably documented.

That's my reasoning for feeling this should be hard coded and not customizable. A new supervisor-update-color theme variable would be better than using accent color, but it'd still be allowing the same problem to become commonplace down the line.

[bramkragten]

I think we should use our warning-color variable.

[ludeeus]

I think the whole dashboard should change.
Show updates with the reset
Don't rely on colors, use text for (running/stopped)

I have started, just takes time 🙈

[matthiasdebaat]

Nice! Lets have a chat about that @ludeeus

[ludeeus]

I have an example on a different implemention in another issue/discussion somewhere here
edit: here #6019 (comment)