Entity state colors theming

[piitaya]

Warning This is a draft PR with proposition, there is some work to do before merging.

Breaking changes

State css variables changed because of RGB to hexadecimal naming and cleaning.

Proposed change

Why this change ?

Only primary-color and secondary-color are officially supported. The goal of this PR is to propose a standard for state colors.

Hexadecimal variables

The state variables are now in hexadecimal format instead of RGB format. RGB format was needed for tile components. A previous PR (https://github.com/home-assistant/frontend/pull/14770) converted RGB format to hexadecimal format. Now we can use hexadecimal colors for states. Also, it simplify the codebase and remove rgb(${color}) in many places.

Unknown color

The unknown color has been added to history to help the user identify the state between unavailable/off/unknown

Update domain color

update domain color has been update to orange instead of green.

Theme colors rules

The theme variables has been updated to allow theming flexibility and predictability. All these domains can be colored :

• alarm_control_panel
• alert
• automation
• binary_sensor
• calendar
• camera
• climate
• cover
• fan
• group
• humidifier
• input_boolean
• light
• lock
• media_player
• remote
• script
• siren
• sun
• switch
• timer
• update
• vacuum
• device_tracker
• person

These different css variables are checked in this order to determine the color :

1. --state-{domain}-{device_class}-{state}-color
2. --state-{domain}-{state}-color
3. --state-{domain}-(active|inactive)-color
4. --state-(active|inactive)-color

Sensors are not colored but battery sensor have their color based on battery percentage.

Type of change

• [ ] Dependency upgrade
• [ ] Bugfix (non-breaking change which fixes an issue)
• [x] New feature (thank you!)
• [x] Breaking change (fix/feature causing existing functionality to break)
• [ ] Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• [ ] The code change is tested and works locally.
• [ ] There is no commented out code in this PR.
• [ ] Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• [ ] Documentation added/updated for www.home-assistant.io

[emufan]

Like it. Wouldn't it be helpful to have not "only" 😂 one --state-inactive, but same pattern as for active state with domain and device_class as well?

I have several devices, e.g. some classes, where esp. inactive has a meaning, where it would be great to set a color as well.

[piitaya]

@emufan It's not an easy thing because the inactive color can be different for different cards : dark blue on entity, light, entities card etc... and grey on tile card.

[emufan]

@emufan It's not an easy thing because the inactive color can be different for different cards : dark blue on entity, light, entities card etc... and grey on tile card.

Yes, I know, but don't get the point. If it is not set, it would be as before, dark blue on entity, light, entities card etc... and grey on tile card. And if set, of course it is by purpose and should then be used in entity, light, entities card etc and tile. So nothing to distinguish here I think.

[piitaya]

I simplified the rules to allow multiple level of theming. It will also be easier to maintain if the rules are simple.

[jncanches]

Hello,

why this was not in the Breaking changes section of the 2023.2 release ? Before 2023.2, colors css variables was published with format --rgb-<colorName>-color with rgb notation. Now there are only Hexadecimal notation listed in --<colorName>-color css variables. Every custom IHM that uses those RGB variables (to handle opacity for example) are broken now.

I know this was not officially maintained/supported but a mention in breaking changes would have been nice :)

[frenck]

why this was not in the Breaking changes section of the 2023.2 release ?

Because before this release all those things weren't supported. There has been published a blog on the dev blog, which also was linked in the main release notes.

[jncanches]

why this was not in the Breaking changes section of the 2023.2 release ?

Because before this release all those things weren't supported. There has been published a blog on the dev blog, which also was linked in the main release notes.

I saw this post. Thank you @frenck . Standard and supported variables will improve stability of custom theme on each release. It is a great improvment !