Change colours of each Zone in HomeAssistant?

Hi there, I’m just playing around with setting up Zones in HomeAssistant and have it working so that I have a lovelace History card that shows each person and where they are (home, office, school etc.). Problem is, I only seem to have three colours,

  1. Home = Green
  2. Away = Grey
  3. All registered zones = Blue for all zones

Is there a way to split 3 into different colours for each zone, so that it becomes more obvious from the history view where the person is (rather than blue for every named zone)?

Thanks in advance!

1 Like

This has been an issue since 2022:12. There are a few threads on it with workarounds/solutions.
Try this one:

Thanks found the answer there. Nice one!

Imagine you have these zones:
– zone.home (friendly name “Home”)
– zone.bar (“Bar”)
– zone.my_mom (“Mom”)
– zone.company (“My Office”)

Define these variables:
–state-person-home-color
–state-person-bar-color
–state-person-mom-color
–state-person-my_office-color
and enjoy your colors.
(similarly for device_tracker)

But - these zones must have exactly these FRIENDLY NAMES and in ENGLISH only.

Hey could you provide me a helping hand?
Just cant get it to work
Here is my yml config:

zone.gym:
    state-person-gym-color: '#FF9800'

Here the zone:

zone.gym
Gym
0
latitude: X longitude: Xradius: 35 passive: false persons: editable: true icon: mdi:dumbbell friendly_name: Gym

Ty

Looks good. Did you add that to the themes.yaml ?
Did you also make an automation to run the theme at start up?

Read this guide:

Thanks @BlackDragon0704! I’ve the same problem with multiple zones… but I’m a bit noob with HA.
Might you pls share in what config file I must make the editing?

Create a custom theme like:

my_super_theme:
  state-device_tracker-school-color: red
  state-device_tracker-my_mom-color: green
  state-person-school-color: red
  state-person-my_mom-color: green

where a “ZONE” part in “state-xxx-ZONE-color” is a slugified version of a zone’s name.
Note that this may not work fine for some languages.