Enhancing Home Assistant Themes with Entity-Specific Colors

[LeeroysHub]

Enhancing Home Assistant Themes with Entity-Specific Colors

Home Assistant's built-in theming system allows for domain-level color customization, but it doesn't natively support assigning colors to individual entities. To improve this, I modified the frontend code by introducing additional CSS variables for entity-specific theming.

The Proposed Change

In domainStateColorProperties.ts, I added:

const entityID = slugify(stateObj.entity_id, "_");

And updated the properties.push array to include:

`--state-${entityID}-${stateKey}-color`
`--state-${entityID}-${activeKey}-color`

This enables themes to define colors per entity, removing the need for workarounds like card-mod for styling entity states. To change an entity, you can add an entity specific variable to your theme such as:

state-switch_sony_muteki_power_state-on-color: 'var(--red-color)'
state-switch_gaming_consoles-on-color: 'var(--red-color)'

Benefits

• Cleaner Configurations – Themes can now assign state colors to individual entities without extra custom styling.
• Better Readability – A more intuitive dashboard where each entity’s colors reflect its current state.
• Negligible Performance Impact – Since entities already reference state colors, this small addition doesn’t introduce slowdown.
• No need for card-mod to change the entity color.