Customize: custom color per state for entities/domains

Configuration
1

Hi everybody,

I am currently (mainly) using the Dark - Green theme by Juanmtech. I have changed one line

# from
  state-icon-active-color: "#FBD150"
# to
  state-icon-active-color: "#FB5250"

What I am trying to achieve first:

Different colors for different states disregarding the theme colors (so those colors will stay the same after changing themes as well)

  • any light object on = yellow
  • any light object off = dark grey
  • any window object open = red
  • any window object closed = green
    etc. etc.

My goal was to always display open doors / windows in that reddish color #FB5250. While this works fine, I don’t particularly like all my entities with ON state to be red.

Is it possible to customize colors somehow that will work with regular cards? I have seen a (or multiple??) custom cards that allow this (button-card), but I would for now prefer to just do this in regular lovelace without a dedicated card for it¹.

In that short time I have been getting into home-assistant now, I have used customize.yaml quite a bit, but mostly for friendly_names, custom icons, and entity_pictures. I could not fine a way to do what I am trying to do, but I am sure that it is possible.

I don’t know much about css, but I thought perhaps icon colors could be changed through this? For example (not real code, just to make my point) IF icon.light.on THEN color = #FFFFF, ELSE IF icon.light.off THEN color = #F00000 (by declaring icon.light.on/offs color values in a separate css file). Or is there something else I can do?

I am aware that this could look kinda strange with some themes because some colors won’t match with others. However, I don’t want/need to do this for every and any entity; just doors, windows, binary lights would be nice to set to “agreeable” colors (that should work with most themes I would use, anyway).

¹ even though I have implemented button-card, I also use monster-card a lot; afaik I cannot combine those two. While monster-card allows me to create a card that will display all entities binary_sensor.*door*, it will put all those entities in a regular card that I cannot edit color-wise with button-card.

Thanks in advance for your ideas :slight_smile:

2

You can’t do what you want without using some kind of custom component.

3

Thank you @finity

Do you (or anybody else reading this) know of a custom component that is capable of what monster-card does, but also has the ability of changing icon colors? I really like how monster automatically adds new entities as long as the card is set up to do so; if I manually have to create cards, that’s fine for once my initial configuration is done… but at the moment (migrating to hass) I am adding, deleting, and changing entities quite often and it is a pain having to manually change cards just to change them again after a few configuration changes.

4

As far as I know a lot of this custom ui still works: