2022.12 Color states are broken/unusable

I have a better idea.
Create new official, default theme, but provide the old theme to be optionally selected. Actually, themes are for what HA devs are doing. They should use them too.

I know that with the actual way of setting a theme (per end-device) it might feel annoying to change the theme on all devices, but there is a way to set up a backend-selected theme using automation.

maybe something like --state-person-zone-$(zone_name)-color

so one could (if he wants) do things like this:

state-person-zone-color: 'blue'  # default, unless overridden for specific zones

state-person-zone-work-color: 'yellow'
state-person-zone-golf-club-color: 'lightgreen'

state-person-zone-home-color: 'darkgreen'

The frontend JS code is already dynamically constructing variable names and then looking up whether they exist, so this proposal would not be very far-fetched.

By the same principle we could then also color only one specific sensor:

state-binary-sensor-garage-door-open: 'red'
state-binary-sensor-garage-door-closed: 'darkblue'

And if the user does not specify any of these colors it should fall back to looking up the next higher more generic color in the hierarchy (default zone color, default color for all binary sensors, etc), so eventually, if none of these are specified, it will fall back to the pre 2022.12 theme color for everything that is active or inactive.

2 Likes

yes, that would work, and, on the other domains, is what we indeed should be having already. Being able to define dedicated on/off colors on the binary for example is so desired.

for me, zones was a bit of a surprise,( I have a lot of zones, and it would require some rethinking to see the need for separate colors there), but I guess that would indeed be a nice option. As long as you could set them (please no more randomized colors…)

1 Like

You have to empty the browser cache.

shift-reload isn’t enough?
The other variables I set in this .js file will all update on shift-reload immediately.

Are you on the beta branch? I have only one production system, I can’t switch this to beta, the “stable” releases are exciting enough already.

Ok, I should have said: I had to clear the cache :wink: (because of iPad)

sorry for noob Q, but where is the file ha-style.ts you refer to located if running hassio?

You cannot directly edit that file, but you can override these colors with your own theme.

Alternatively (if you feel super nerdy) you can also inject your own JavaScript module into the default theme to override the values from there. This approach is usually not the recommended way, but it would allow you to test quick changes without reloading the theme or even without creating a theme at all.

use the ha-styles file only as a reference for which variable names are existing and what their default values are.

So now off and unavailable is the same colour how to change that ? It is not clear if sensor is dead or off :frowning:

it’s here and you should bookmark it, since I practically can not remember a single release that didnt need some re-styling after changes in this file :wink:

As far as I have seen on github they have already begun changing it so that these are configurable. In the current latest release it is still hardcoded.

1 Like

sorry, I know where to find the file on Github, but where do I find it on my own Home Assistant? I can’t find it in my file system.

not sure what you are asking for, I have no clue of the file or settings, I’m trying to learn how I change it my self

its not there. see post by prof7bit above.

Its only a reference for you to be aware which color vars are used, and can be modified in your themes

1 Like

and again, that’s the thing - people often don’t use themes.
So, they basically have to create a theme that just ‘exposes’ the colors to be editable.

BUT:
Still… some might like the actual HA default theme - and just want to get rid of the color choices…
This should be addressed in the end…

The goal would be:

  • Add official support for themes.

Which means:

  • Expose the Color for entities / entity states to the Card Configurator (UI).
    • anyone can choose the preferred colors, and colors per state
  • Add themable elements and document these:
    • Themable Elements are:
      • borders
      • border radius
      • shadows
      • headers (Card-Headers)
      • background colors / background images
      • etc.

These options should be:

  • Documented
  • strict → further UI development will also stick to these options.

That would allow:
1 - official Themes would not use undocumented features that might brake at some point
2 - allow better support, since everything is documented
3 - development of official “built in themes” that can be improved
4 - acceptance from the community, since they can still use custom themeing
5 - it woudl (probably) remove the need for card mod for many users

5 Likes

That is nearly useless. I am sorry to say it.

Half the updates incl anything frontend is always listed as “bump something to version x.xx”. That says nothing.

2 Likes

Its also incomplete, probably because this list is compiled manually. For example between 12.0 and 12.3 there was a fix that fixed the wrong home colors in the history (blue instead of green sometimes for some persons). It is not mentioned in the changelog.

Frontend gets its own release changelog:

Same happens again.

Now we get this PR:

Objections like:
– how to distinguish “unknown” states;
– how to differ “unavailable” & “no history” cases
are just IGNORED.

1 Like

Some update according to colors.

Some fixes has been done in the lasted patch (2022.12.4) :

  • You can now distinguish unavailable from inactive state in the history timeline
  • Improve contrast color for media player using light blue color
  • Fixes alarm and lock colors
  • Use yellow as active color instead of blue for most domain (binary_sensor, calendar, etc…)
8 Likes