Zone colours

Feature Requests
1

I know this subject has recently been discussed at length since colours were changed in 2022.12. However, having read through the posts I am still unsure on the situation with zone colours and if there is going to be any way of changing them so that multiple zones do not appear the same colour on a history card.

Forgive me if I’ve missed the definitive answer somewhere, but I certainly can’t find it.

As a feature request, would the option to set a colour per zone when creating a new zone be a solution that could work?

2

OP here just bumping this. Am I the only one who’s still struggling with the changes to zone colours?

2 Likes
3

Me too. But sadly I didn’t find a way to change it.

4

Bumping this too

5

There seem to be theme variables for zones by name now (and also other sensors, like for example all the various states of my lawn mower robot).

for example I have a zone called “Arbeit”, and the variable is --state-person-arbeit-color (lowercase, although my zone name starts with an uppercase letter)

I am using the following script (theme-override.js placed in the /config/www folder) to inject additional variables into an existing theme:

let myColors = [
  ['--state-inactive-color',            '#22394f'],
  ['--state-person-home-color',         '#408000'],
  ['--state-person-arbeit-color',       '#0066cc'],
  ['--state-vacuum-mowing-color',       '#33aa33'],
  ['--state-vacuum-error-color',        'var(--red-color)'],
  ['--state-vacuum-edgecut-color',      'var(--state-active-color)'],
  ['--state-vacuum-returning-color',    'var(--state-active-color)']
];

for (let [key, val] of myColors) {
	document.documentElement.style.setProperty(key, val);
}

In configiration.yaml I have this to activate the above javascript:


frontend:
    extra_module_url:
        - /local/theme-override.js

(the /local folder is aliased to the /config/www folder, so any javascript file placed in /config/www/something.js must be referenced as /local/something.js in the extra_module_url)

I am using this hack instead of creating a new theme to be able to just continue using the built-in theme and only change a few variables. The above script will be injected after the theme has been loaded, so it will override any variables in the existing theme.

To activate it or test any color changes, just clear the cache and reload (shift+reload) in firefox or clear app cache on android.

PS: If you are wondering why I have a mowing vacuum cleaner: HA knows only about one kind of robot, and these are vacuum robots, so every robot you have in your home is a vacuum, even if it doesn’t suck.

1 Like
6

Sadly, having to resort to dirty hacks on HA again :sweat:

@prof7bit, how did you manage to find those variables? I can’t find any --state-person- on my DevTools, other than the custom ones I made.

Also, it seems I had to fully restart my instance to get the theme override kicking… Just reload configs didn’t do the trick.

Lastly, through trial and error, I noticed it does the following conversions with area names:

  • spaces are converted to underlines
  • symbols are ignored
  • diacritics are replaced by the plain letter

Thus, an area named “Aterro (Glória)” becomes --state-person-aterro_gloria-color.

7

To get the overrides active or updated you just have to clear the cache in your browser (shift-reload) or clear the cache of the mobile app. Maybe for the very first time you need to reload the config, but no HA restart was ever needed. If you change colors or add new variables, just clear the cache and reload the browser.

As for the possible names, I have seen some documentation in the official docs that mention it, but I don’t have a link for it handy now. The variables do not exist until you explicitly create them. The non-existence of such a variable tells home assistant to fall back to the next more generic method of coloring it (there are multiple levels).

8

Hello there, thank you for all your input.
I did exactly what you wrote only used some other zones for sure, but when I’m inserting

frontend:
    extra_module_url:
        - /local/theme-override.js

to my configuration.yaml then it blocks all of my themes as HA shows no theme installed. If I remove it then everything goes back to normal.

Can you help me,please where did I go wrong?

my js code

let myColors = [
  ['--state-inactive-color',            '#22394f'],
  ['--state-person-home-color',         '#408000'],
  ['--state-person-office-bri-color', '#cc0085'],
  ['--state-person-office-csb-color', '#cc0085'],
  ['--state-person-gym-color',       	'#ccb600']
];

for (let [key, val] of myColors) {
	document.documentElement.style.setProperty(key, val);
}
9

Sorry, I discovered that I created a duplicate tag in the config.yaml file.

However, I have another question: everything seems to be applied and working, but no colors have changed. I have cleared the caches and even tried restarting HA.

Do you have any idea what could be the issue?